/* YN Laojia Theme - Mobile-First CSS */

/* CSS Variables */
:root {
    --primary:#4F46E5;
    --secondary:#10B981;
    --text:#1F2937;
    --text-light:#6B7280;
    --bg:#FFFFFF;
    --bg-light:#F9FAFB;
    --border:#E5E7EB;
    --radius:8px;
}

/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--text);line-height:1.6;background:var(--bg);}
html{scroll-behavior:smooth;}
a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;}

/* Container */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}

/* Header */
.header{background:var(--bg);box-shadow:0 2px 8px rgba(0,0,0,0.08);position:sticky;top:0;z-index:100;}
.nav{display:flex;justify-content:space-between;align-items:center;padding:15px 0;}
.logo a{font-size:24px;font-weight:700;color:var(--primary);text-decoration:none;}
.menu{list-style:none;display:none;}
.menu li{display:inline;margin:0 15px;}
.menu a{color:var(--text);text-decoration:none;transition:color 0.3s;}
.menu a:hover{color:var(--primary);}
.mobile-toggle{display:block;background:none;border:none;cursor:pointer;}
.mobile-toggle span{display:block;width:25px;height:3px;background:var(--text);margin:5px 0;transition:all 0.3s;}
.btn{display:inline-block;padding:10px 20px;background:var(--primary);color:#fff;border-radius:var(--radius);transition:all 0.3s;text-decoration:none;border:none;cursor:pointer;}
.btn:hover{background:#4338CA;transform:translateY(-2px);}
.btn-secondary{background:var(--secondary);}
.btn-secondary:hover{background:#059669;}
.btn-lg{padding:14px 30px;font-size:16px;}

/* Hero */
.hero{padding:80px 0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;text-align:center;}
.hero h1{font-size:36px;margin-bottom:20px;}
.hero .subtitle{font-size:18px;margin-bottom:30px;opacity:0.9;}
.hero-cta{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;}

/* Tools Section */
.tools,.news,.faq,.cta{padding:60px 0;}
.tools h2,.news h2,.faq h2,.cta h2{font-size:32px;text-align:center;margin-bottom:10px;}
.section-subtitle,.news p,.cta p{text-align:center;color:var(--text-light);margin-bottom:40px;}
.tool-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.tool-card{background:var(--bg-light);padding:30px;border-radius:var(--radius);text-align:center;transition:transform 0.3s,box-shadow 0.3s;}
.tool-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.1);}
.tool-icon{font-size:48px;margin-bottom:15px;}
.tool-card h3{margin-bottom:10px;color:var(--primary);}
.tool-card p{color:var(--text-light);font-size:14px;}

/* News/Stats */
.stats{display:grid;grid-template-columns:1fr;gap:20px;text-align:center;}
.stat-number{font-size:48px;font-weight:700;color:var(--primary);}
.stat-label{color:var(--text-light);margin-top:10px;}

/* FAQ */
.faq{background:var(--bg-light);}
.faq-list{max-width:700px;margin:0 auto;}
.faq-item{background:var(--bg);margin-bottom:15px;border-radius:var(--radius);overflow:hidden;}
.faq-q{width:100%;text-align:left;padding:20px;background:none;border:none;font-size:16px;font-weight:600;cursor:pointer;transition:background 0.3s;}
.faq-q:hover{background:var(--bg-light);}
.faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:all 0.3s;}
.faq-item.active .faq-a{padding:20px;max-height:200px;}

/* CTA */
.cta{background:var(--primary);color:#fff;text-align:center;}
.cta h2{color:#fff;}
.cta p{color:rgba(255,255,255,0.9);}
.cta-btns{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;}

/* Footer */
.footer{background:var(--text);color:#fff;padding:40px 0 20px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:30px;margin-bottom:30px;}
.footer h3{margin-bottom:15px;color:var(--secondary);}
.footer ul{list-style:none;}
.footer ul li{margin-bottom:8px;}
.footer a{color:rgba(255,255,255,0.8);text-decoration:none;}
.footer a:hover{color:#fff;}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);}
.footer-bottom p{margin-bottom:10px;font-size:14px;}
.disclaimer{color:rgba(255,255,255,0.6);font-size:13px;}

/* Back to Top */
.back-to-top{position:fixed;bottom:30px;right:30px;background:var(--primary);color:#fff;border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:24px;opacity:0;visibility:hidden;transition:all 0.3s;}
.back-to-top.show{opacity:1;visibility:visible;}
.back-to-top:hover{background:#4338CA;transform:translateY(-3px);}

/* Page */
.page{padding:60px 0;}
.page h1{font-size:36px;margin-bottom:20px;}
.page-meta{color:var(--text-light);margin-bottom:30px;}
.page-content{line-height:1.8;margin-bottom:40px;}
.page-content p{margin-bottom:15px;}
.page-footer{display:flex;gap:15px;flex-wrap:wrap;}

/* About Section */
.about{padding:80px 0;background:var(--bg-light);}
.about-flex{display:flex;flex-direction:column;gap:40px;align-items:center;}
.about-content h2{font-size:32px;margin-bottom:20px;color:var(--text);}
.about-content p{font-size:18px;color:var(--text-light);margin-bottom:25px;}
.check-list{list-style:none;}
.check-list li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--text);font-weight:500;}
.check-list li::before{content:'✓';position:absolute;left:0;color:var(--secondary);font-weight:bold;}
.about-image{width:100%;max-width:500px;}
.glass-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(10px);padding:30px;border-radius:20px;border:1px solid rgba(255,255,255,0.3);box-shadow:0 8px 32px rgba(0,0,0,0.1);}
.glass-card h3{color:var(--primary);margin-bottom:15px;}

/* Additional Footer Styles */
.footer-logo{font-size:24px;color:var(--secondary) !important;font-weight:bold;}
.footer-divider{border:none;border-top:1px solid rgba(255,255,255,0.1);margin:20px 0;}
.footer-bottom .disclaimer{margin-top:15px;padding-top:15px;border-top:1px dashed rgba(255,255,255,0.1);max-width:800px;margin:0 auto;}

/* Responsive - Tablet */
@media(min-width:768px){
    .about-flex{flex-direction:row;}
    .about-content,.about-image{flex:1;}
    .tool-grid{grid-template-columns:repeat(2,1fr);}
    .stats{grid-template-columns:repeat(3,1fr);}
    .footer-grid{grid-template-columns:repeat(2,1fr);}
    .mobile-toggle{display:none;}
    .menu{display:flex;}
}

/* Responsive - Desktop */
@media(min-width:1024px){
    .hero h1{font-size:48px;}
    .tool-grid{grid-template-columns:repeat(3,1fr);}
    .footer-grid{grid-template-columns:repeat(4,1fr);}
}

/* WhatsApp Loading Popup */
.wa-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}
.wa-modal {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    max-width: 90%;
    width: 320px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: wa-slide-up 0.3s ease-out;
}
.wa-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #25D366;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}
.wa-text {
    color: #374151;
    font-size: 16px;
    font-weight: 500;
}
.wa-subtext {
    color: #6B7280;
    font-size: 14px;
    margin-top: 8px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes wa-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}