body { font-family: 'Tajawal', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Cairo', sans-serif; font-weight: 700; }

.glass-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
}

.dark .glass-card {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.shape-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 120px;
}
.floating {
    animation: floating 6s ease-in-out infinite;
}
@keyframes floating {
    0% { transform: translate3d(0, 0px, 0); }
    50% { transform: translate3d(0, 15px, 0); }
    100% { transform: translate3d(0, 0px, 0); }
}

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Premium Visual Effects */
.glass-grain {
    position: relative;
}

.glass-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
}

.dark .glass-grain::before {
    opacity: 0.04;
}

/* Navbar Scroll Animation Styles */
.nav-transition {
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-width, padding, height;
    transform: translateZ(0);
}

.scrolled-nav {
    max-width: 420px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    height: 4.5rem !important;
    gap: 0.75rem;
}

.scrolled-nav .hide-on-scroll {
    opacity: 0;
    max-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hide-on-scroll {
    max-width: 500px;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visible only when scrolled */
.show-on-scroll {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.scrolled-nav .show-on-scroll {
    opacity: 1;
    max-width: 50px;
    pointer-events: auto;
}

.scrolled-nav .nav-logo img {
    height: 3.5rem !important;
}

/* Gold Glow for the Lifetime Package */
.glass-card-gold {
    background: rgba(255, 248, 230, 0.92);
    border: 1px solid rgba(255, 215, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.dark .glass-card-gold {
    background: rgba(40, 35, 20, 0.92);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.gold-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
/* Respect reduced motion preference - performance fix for low-end devices */
@media (prefers-reduced-motion: reduce) {
    .floating { animation: none !important; }
    .reveal { transition: none !important; }
    .animate-ping { animation: none !important; }
}