/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', 'Microsoft JhengHei', 'Helvetica Neue', sans-serif; line-height: 1.6; color: #333; background: #fafafa; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; }

/* Header */
.main-header { background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); color: white; padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.main-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo a { font-size: 1.5rem; font-weight: bold; color: white; display: flex; align-items: center; gap: 10px; }
.logo i { color: #f6ad55; }
.main-nav ul { list-style: none; display: flex; gap: 2rem; align-items: center; }
.main-nav a { color: white; font-weight: 500; padding: 0.5rem 0; position: relative; }
.main-nav a:hover { color: #f6ad55; }
.main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #f6ad55; transition: width 0.3s; }
.main-nav a:hover::after { width: 100%; }
.btn-nav { background: #ed8936; color: white !important; padding: 0.6rem 1.2rem !important; border-radius: 6px; }
.btn-nav:hover { background: #dd6b20; }
.mobile-menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }

/* Hero Section */
.hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat; opacity: 0.3; }
.hero h1 { font-size: 3rem; margin-bottom: 1rem; position: relative; }
.hero p { font-size: 1.3rem; max-width: 900px; margin: 0 auto 2rem; opacity: 0.95; position: relative; }
.cta-button { background: #f6ad55; color: white; padding: 15px 35px; border: none; border-radius: 8px; font-size: 1.2rem; font-weight: bold; cursor: pointer; text-decoration: none; display: inline-block; transition: transform 0.2s, box-shadow 0.2s; }
.cta-button:hover { background: #ed8936; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(237, 137, 54, 0.4); }

/* Stats */
.stats-bar { background: white; padding: 2rem 0; margin-top: -3rem; position: relative; z-index: 10; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border-radius: 8px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center; }
.stat-item h3 { font-size: 2.5rem; color: #667eea; margin-bottom: 0.5rem; }
.stat-item p { color: #666; font-size: 0.95rem; }

/* Section */
.section { padding: 4rem 0; }
.section-title { text-align: center; font-size: 2.2rem; margin-bottom: 1rem; color: #1a365d; }
.section-subtitle { text-align: center; color: #666; max-width: 700px; margin: 0 auto 3rem; font-size: 1.1rem; }

/* Features Grid */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.feature-card { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); }
.feature-icon { font-size: 2.5rem; color: #667eea; margin-bottom: 1rem; }
.feature-card h3 { margin-bottom: 0.8rem; color: #2d3748; }
.feature-card p { color: #666; line-height: 1.7; }

/* Pricing Tables */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.pricing-card { background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; border: 2px solid transparent; transition: border-color 0.3s, transform 0.3s; }
.pricing-card:hover { border-color: #667eea; transform: translateY(-5px); }
.pricing-card.featured { border-color: #f6ad55; position: relative; }
.pricing-card.featured::before { content: '最受歡迎'; position: absolute; top: 15px; right: -30px; background: #f6ad55; color: white; padding: 5px 40px; transform: rotate(45deg); font-size: 0.8rem; font-weight: bold; }
.pricing-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 1.5rem; text-align: center; }
.pricing-header h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.pricing-price { font-size: 2.5rem; font-weight: bold; margin: 1rem 0; }
.pricing-price span { font-size: 1rem; font-weight: normal; opacity: 0.8; }
.pricing-body { padding: 2rem; }
.pricing-features { list-style: none; margin-bottom: 2rem; }
.pricing-features li { padding: 0.5rem 0; border-bottom: 1px dashed #e2e8f0; display: flex; align-items: center; }
.pricing-features li i { color: #38a169; margin-right: 10px; }
.pricing-footer { padding: 0 2rem 2rem; text-align: center; }
.pricing-btn { display: block; width: 100%; padding: 12px; background: #667eea; color: white; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background 0.3s; }
.pricing-btn:hover { background: #5a67d8; }

/* Comparison Table */
.comparison-table { width: 100%; background: white; border-collapse: collapse; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-top: 3rem; }
.comparison-table th, .comparison-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
.comparison-table th { background: #667eea; color: white; font-weight: 600; }
.comparison-table tr:hover { background: #f7fafc; }
.check-icon { color: #38a169; }
.cross-icon { color: #e53e3e; }

/* Contact Form */
.contact-form { background: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); max-width: 800px; margin: 0 auto; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #2d3748; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 6px; font-size: 1rem; transition: border-color 0.3s; font-family: inherit; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #667eea; outline: none; }
.form-group textarea { min-height: 150px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.submit-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 40px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: bold; cursor: pointer; width: 100%; transition: opacity 0.3s; }
.submit-btn:hover { opacity: 0.9; }

/* Footer */
.main-footer { background: #1a365d; color: white; padding: 3rem 0 1.5rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-col h4 { font-size: 1.2rem; margin-bottom: 1rem; color: #f6ad55; }
.footer-col p, .footer-col a { color: #cbd5e0; line-height: 1.8; }
.footer-col a:hover { color: #f6ad55; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #2c5282; color: #a0aec0; font-size: 0.9rem; }

/* Testimonials */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.testimonial-card { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.testimonial-text { font-style: italic; color: #666; margin-bottom: 1.5rem; line-height: 1.8; }
.testimonial-author { display: flex; align-items: center; gap: 1rem; }
.testimonial-avatar { width: 60px; height: 60px; border-radius: 50%; background: #667eea; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.5rem; }
.testimonial-info h4 { margin-bottom: 0.3rem; color: #2d3748; }
.testimonial-info p { color: #718096; font-size: 0.9rem; }

/* CTA Section */
.cta-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 4rem 0; text-align: center; }
.cta-section h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.cta-section p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.95; max-width: 700px; margin-left: auto; margin-right: auto; }

/* Responsive */
@media (max-width: 768px) {
    .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #1a365d; padding: 1rem; border-top: 1px solid #2c5282; }
    .main-nav.active { display: block; }
    .main-nav ul { flex-direction: column; gap: 0.5rem; }
    .mobile-menu-toggle { display: block; color: white; }
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1.1rem; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
}