/* =========================================
   NEXT LEVEL ABOUT US PAGE STYLES
   ========================================= */
*, *::before, *::after { box-sizing: border-box !important; }
body { background: #fafafa; overflow-x: hidden; margin: 0; }

/* --- HERO SECTION --- */
.hero-header { 
    background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.8)), url('../images/about-bg.png'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Premium Parallax scroll effect */
    color: #fff; 
    text-align: center; 
    padding: 140px 20px 100px; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-content { max-width: 800px; animation: slideUp 0.8s ease-out; }
.hero-content h1 { font-family: 'Playfair Display', serif; font-size: 4rem; margin: 0 0 15px; text-shadow: 0 5px 15px rgba(0,0,0,0.5); letter-spacing: 1px; }
.hero-content p { font-size: 1.2rem; color: #f1f5f9; line-height: 1.6; text-shadow: 0 2px 5px rgba(0,0,0,0.5); font-weight: 300; }

/* --- ABOUT SECTION --- */
.about-section { max-width: 1200px; margin: 80px auto; padding: 0 20px; }
.about-container { display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap-reverse; }

.about-text { flex: 1; min-width: 300px; }
.about-text .sub-heading { font-size: 1.1rem; color: #e91e63; margin: 0 0 5px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.about-text .creator-name { font-family: 'Playfair Display', serif; font-size: 3rem; color: #1e293b; margin: 0 0 25px; line-height: 1.1; }
.highlight-text { font-size: 1.15rem; color: #334155; margin-bottom: 20px; }
.about-text p { font-size: 1.05rem; color: #64748b; line-height: 1.8; margin-bottom: 15px; }
.signature-text { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: #e91e63; font-style: italic; margin-top: 30px; border-left: 4px solid #e91e63; padding-left: 20px; background: #fff0f4; padding: 20px; border-radius: 0 12px 12px 0; }

/* --- HIGH SECURITY IMAGE CSS --- */
.about-img-box { 
    flex: 0.8; 
    min-width: 300px;
    position: relative; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); 
    background: #000; 
    
    /* MOBILE SAVE BLOCKERS */
    user-select: none; 
    -webkit-user-select: none; /* Prevents text selection */
    -webkit-touch-callout: none; /* Blocks iOS/Android long-press menu */
    
    transform: translateY(0);
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-img-box:hover { transform: translateY(-10px); box-shadow: 0 35px 60px -15px rgba(233, 30, 99, 0.3); }

.secure-founder-img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    object-fit: cover; 
    aspect-ratio: 4/5; /* Professional portrait ratio */
    transition: filter 0.2s ease; 
    pointer-events: none; /* Disables direct image clicks */
}

/* The Invisible Shield - Baffles 'Save Image As' */
.image-shield { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    z-index: 10; 
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); /* Transparent 1x1 pixel */
    cursor: default; 
}

/* Blur Class triggered by JS when window loses focus */
.security-blur .secure-founder-img { filter: blur(25px) grayscale(100%); opacity: 0.5; }

.img-decorative-frame {
    position: absolute;
    bottom: -20px; right: -20px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, #e91e63 10%, transparent 10%);
    background-size: 20px 20px;
    z-index: -1;
}

/* --- STATS SECTION --- */
.stats-section { background: #fff; padding: 70px 20px; margin-bottom: 80px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.stats-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 40px; }
.stat-box { text-align: center; flex: 1; min-width: 200px; transition: 0.3s; }
.stat-box h3 { font-size: 3.5rem; color: #e91e63; margin: 0 0 5px; font-family: 'Playfair Display', serif; line-height: 1; }
.stat-box p { font-size: 1rem; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin: 0; }

/* --- FEATURES SECTION --- */
.features { max-width: 1200px; margin: 0 auto 100px; padding: 0 20px; }
.features-header { text-align: center; margin-bottom: 60px; }
.features-header h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: #1e293b; margin: 0 0 10px; }
.features-header h2 span { color: #e91e63; font-style: italic; }
.features-header p { color: #64748b; font-size: 1.1rem; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.feature-card { background: #fff; padding: 50px 35px; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); transition: 0.4s; position: relative; overflow: hidden; border: 1px solid #f1f5f9; }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #e91e63; transform: scaleX(0); transform-origin: left; transition: 0.4s; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1); }
.feature-card:hover::before { transform: scaleX(1); }

.icon-wrapper { width: 80px; height: 80px; background: #fff0f4; color: #e91e63; border-radius: 20px; display: flex; justify-content: center; align-items: center; font-size: 2.2rem; margin-bottom: 25px; transition: 0.4s; }
.feature-card:hover .icon-wrapper { background: #e91e63; color: #fff; transform: rotate(-10deg); }
.feature-card h3 { font-size: 1.5rem; color: #1e293b; margin-bottom: 15px; font-weight: 600; }
.feature-card p { font-size: 1.05rem; color: #64748b; line-height: 1.6; margin: 0; }

/* --- CTA SECTION --- */
.cta-section { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); padding: 100px 20px; text-align: center; color: #fff; }
.cta-content { max-width: 800px; margin: 0 auto; }
.cta-content h2 { font-family: 'Playfair Display', serif; font-size: 2.8rem; margin: 0 0 20px; color: #fff; }
.cta-content p { color: #cbd5e1; margin-bottom: 40px; font-size: 1.15rem; line-height: 1.6; }
.cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-primary, .btn-secondary { padding: 16px 35px; border-radius: 50px; font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn-primary { background: #e91e63; color: #fff; border: 2px solid #e91e63; box-shadow: 0 10px 20px rgba(233,30,99,0.3); }
.btn-primary:hover { background: #be185d; border-color: #be185d; transform: translateY(-3px); box-shadow: 0 15px 25px rgba(233,30,99,0.4); }
.btn-secondary { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-secondary:hover { background: #fff; color: #0f172a; transform: translateY(-3px); }

/* Animations */
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* --- STRICT MOBILE RESPONSIVE FIXES --- */
@media (max-width: 992px) {
    .about-container { flex-direction: column-reverse; text-align: center; }
    .signature-text { border-left: none; border-top: 4px solid #e91e63; border-radius: 12px; }
}
@media (max-width: 600px) {
    .hero-header { padding: 100px 15px 60px; background-attachment: scroll; }
    .hero-content h1 { font-size: 2.8rem; }
    .hero-content p { font-size: 1rem; }
    
    .about-text h2 { font-size: 2.4rem; }
    .about-img-box { width: 100%; max-width: 400px; margin: 0 auto; }
    
    .stat-box { min-width: 140px; padding: 10px; }
    .stat-box h3 { font-size: 2.5rem; }
    
    .features-header h2, .cta-content h2 { font-size: 2.2rem; }
    .cta-buttons { flex-direction: column; width: 100%; }
    .btn-primary, .btn-secondary { width: 100%; }
}
/* --- AGGRESSIVE ANTI-SCREENSHOT LAYER --- */
#antiScreenshotLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0f172a; /* Solid Dark Blue/Black */
    color: #fff;
    z-index: 999999; /* Sabse upar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

#antiScreenshotLayer i {
    font-size: 4rem;
    color: #e91e63;
    margin-bottom: 20px;
}

#antiScreenshotLayer h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin: 0 0 10px;
}

#antiScreenshotLayer p {
    font-size: 1.2rem;
    color: #cbd5e1;
}

/* Jab body me 'blackout' class lagegi, tabhi ye parda dikhega */
body.blackout-active #antiScreenshotLayer {
    display: flex !important;
}

/* Blackout hone par background ka baaki sab kuch gayab kar do */
body.blackout-active > *:not(#antiScreenshotLayer) {
    opacity: 0 !important;
    pointer-events: none !important;
}