/* ============================================
   HHPoker - Shared Stylesheet
   ============================================ */

/* ---- Base & Reset ---- */
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; }

/* ---- Navbar ---- */
.navbar { transition: background 0.3s ease, box-shadow 0.3s ease; }
.navbar.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ---- Hero Gradient ---- */
.gradient-hero { background: linear-gradient(135deg, #1e3a5f 0%, #1a56db 40%, #3b82f6 70%, #60a5fa 100%); }

/* ---- Feature Cards ---- */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.06);
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -15px rgba(37,99,235,0.2);
}

/* ---- Buttons ---- */
.btn-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    transition: all 0.3s ease;
    border: none;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37,99,235,0.4);
}
.btn-outline {
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: #fff;
    color: #1e3a5f;
    transform: translateY(-2px);
}
.btn-white {
    background: #fff;
    color: #1d4ed8;
    transition: all 0.3s ease;
}
.btn-white:hover {
    background: #f0f5ff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* ---- FAQ Accordion ---- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.faq-item.active .faq-answer { max-height: 280px; padding-top: 1rem; padding-bottom: 0.5rem; }
.faq-item.active .faq-icon { transform: rotate(45deg); }

/* ---- Mobile Menu ---- */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.mobile-menu.open { max-height: 420px; }

/* ---- Counter Animation ---- */
.counter { font-variant-numeric: tabular-nums; }

/* ---- Testimonial Card ---- */
.testimonial-card {
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* ---- Stats Section ---- */
.stats-section {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a56db 50%, #2563eb 100%);
    position: relative;
    overflow: hidden;
}
.stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* ---- CTA Section ---- */
.cta-section {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 40%, #6366f1 100%);
    position: relative;
    overflow: hidden;
}
.cta-section .orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

/* ---- Contact Form ---- */
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ---- About Page ---- */
.about-hero {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a56db 50%, #2563eb 100%);
}

/* ---- Footer ---- */
.footer-link { transition: color 0.2s ease; }
.footer-link:hover { color: #60a5fa; }

/* ---- Page Header (inner pages) ---- */
.page-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a56db 50%, #2563eb 100%);
}