﻿/* Glassmorphism effects, custom animations, and AdSense safe styling */
body {
 scroll-behavior: smooth;
}

/* Lightweight local icon fallback replacing external Font Awesome CSS/webfont. */
.fas,
.far {
 display: inline-block;
 min-width: 1em;
 text-align: center;
 font-style: normal;
 font-weight: 700;
 line-height: 1;
}
.fa-lock:before { content: "\25C6"; }
.fa-paint-brush:before { content: "\25A3"; }
.fa-trash-alt:before { content: "\2715"; }
.fa-file-upload:before { content: "\21E7"; }
.fa-reply-all:before { content: "\21A9"; }
.fa-clone:before { content: "\25A6"; }
.fa-battery-full:before { content: "\25AC"; }
.fa-shield-alt:before { content: "\25C8"; }
.fa-download:before { content: "\2193"; }
.fa-language:before { content: "A"; }
.fa-clock:before { content: "\25F7"; }
.fa-star:before { content: "\2605"; }
.fa-envelope:before { content: "\2709"; }
.fa-calendar-alt:before { content: "\25A6"; }
.fa-chart-line:before { content: "\2197"; }

.bg-grid-pattern {
 background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.05) 1px, transparent 1px);
 background-size: 24px 24px;
}

.card-hover {
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
 transform: translateY(-8px);
}

.faq-item .faq-icon {
 transition: transform 0.2s;
}
.faq-item.active .faq-icon {
 transform: rotate(180deg);
}

/* Lazy loading blur */
.lazy {
 filter: blur(5px);
 transition: filter 0.3s;
}
.lazy:not([data-src]) {
 filter: blur(0);
}

/* Custom scrollbar */
::-webkit-scrollbar {
 width: 8px;
}
::-webkit-scrollbar-track {
 background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
 background: #555;
}

/* Mobile menu animations */
#mobile-menu {
 transition: all 0.3s ease;
}

/* AdSense ready - no aggressive layouts, proper spacing */
.adsense-container {
 min-height: 250px;
 margin: 20px 0;
 text-align: center;
}

/* Buttons */
.btn-premium {
 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
 box-shadow: 0 10px 15px -3px rgba(59,130,246,0.3);
}

/* Responsive typography */
@media (max-width: 640px) {
 h1 {
 font-size: 1.875rem;
 }
}


