@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap');
* { font-family: 'Vazirmatn', sans-serif !important; }

body { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); color: #fff; }

.header-pro { background: rgba(10,10,30,0.95); backdrop-filter: blur(15px); box-shadow: 0 8px 32px rgba(0,0,0,0.6); position: sticky; top: 0; z-index: 9999; }
.top-bar { background: #1a1a3a; padding: 12px 0; font-size: 0.95rem; }
.brand-name { background: linear-gradient(45deg, #00d2ff, #3a7bd5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; }

.hero { padding: 180px 0; text-align: center; background: url('assets/images/hero.jpg') center/cover no-repeat; position: relative; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); }
.hero h1 { font-size: 4.5rem; font-weight: 900; }

.discount-section { padding: 60px 0; background: linear-gradient(45deg, #667eea, #764ba2); }
.discount-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(20px); border-radius: 30px; padding: 40px; text-align: center; max-width: 600px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.2); }
.code { font-size: 3.5rem; font-weight: bold; letter-spacing: 10px; color: #00ffff; text-shadow: 0 0 20px #00ffff; }

.service-box { background: rgba(255,255,255,0.1); padding: 40px; border-radius: 20px; transition: 0.4s; }
.service-box:hover { transform: translateY(-15px); background: rgba(255,255,255,0.2); }

.trust-section img { margin: 0 20px; transition: 0.3s; filter: grayscale(0.5); }
.trust-section img:hover { filter: grayscale(0); transform: scale(1.2); }

#notification {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; min-width: 300px;
}
.notification {
    background: rgba(0,0,0,0.9); color: white; padding: 20px 40px; border-radius: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: notif 4s forwards;
}
@keyframes notif { 0% { opacity: 0; transform: translateY(-50px); } 10% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; } }