/* ========== 頁面專屬配色（紫金主題）========== */
:root {
    /* 紫色系 */
    --purple-dark: #4a1c6b;
    --purple-main: #6b2d9b;
    --purple-light: #9b59b6;
    --purple-soft: #d4a5e8;
    --purple-pale: #f3e5f9;
    
    /* 金色系 */
    --gold-dark: #b8860b;
    --gold-main: #d4af37;
    --gold-light: #f4d03f;
    --gold-soft: #fef3c7;
    
    /* 背景與文字 */
    --bg-light: #faf8fc;
    --bg-white: #ffffff;
    --text-dark: #2d1b3d;
    --text-gray: #5c4a6e;
    --text-light: #8b7a9e;
    --border-light: rgba(74, 28, 107, 0.12);
    
    /* 漸層 */
    --gradient-purple: linear-gradient(135deg, #6b2d9b 0%, #9b59b6 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    --gradient-hero: linear-gradient(135deg, #4a1c6b 0%, #6b2d9b 50%, #2d1b3d 100%);
    
    /* 陰影 */
    --shadow-gold: 0 4px 20px rgba(212,175,55,0.3);
}

/* 基礎重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: var(--font-size-base); }
body { 
    font-family: var(--font-primary); 
    background: var(--bg-light); 
    color: var(--text-dark); 
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
}
.container { 
    max-width: var(--container-xl); 
    margin: 0 auto; 
    padding: 0 var(--space-8); 
}

/* Navigation - 使用外部 nav-style.css，此處不重複定義 */

/* Hero */
.hero { 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    padding: 120px var(--space-8) var(--space-20); 
    background: var(--gradient-hero); 
    color: white; 
    position: relative; 
    overflow: hidden; 
}
.hero-bg-shape { position: absolute; border-radius: var(--radius-circle); opacity: 0.5; }
.hero-bg-shape-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 70%); top: 5%; right: -150px; }
.hero-bg-shape-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(155,89,182,0.2) 0%, transparent 70%); bottom: 10%; left: -100px; }
.hero-container { 
    max-width: var(--container-xl); 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: var(--space-20); 
    align-items: center; 
    position: relative; 
    z-index: 1; 
}
.hero-content { max-width: 600px; }
.hero-badge { 
    display: inline-block; 
    padding: var(--space-3) var(--space-6); 
    background: rgba(212,175,55,0.2); 
    border: 1px solid var(--gold-main); 
    border-radius: var(--radius-full); 
    font-size: var(--text-sm); 
    color: var(--gold-light); 
    margin-bottom: var(--space-8); 
    letter-spacing: var(--tracking-wide); 
}
.hero h1 { 
    font-size: var(--text-5xl); 
    font-weight: var(--font-bold); 
    margin-bottom: var(--space-6); 
    line-height: var(--leading-tight); 
}
.hero-subtitle { 
    font-size: var(--text-lg); 
    color: rgba(255,255,255,0.85); 
    margin-bottom: var(--space-5); 
    line-height: var(--leading-relaxed); 
}
.hero-highlight { 
    font-size: var(--text-base); 
    color: var(--gold-light); 
    font-weight: var(--font-medium); 
    margin-bottom: var(--space-8); 
    padding: var(--space-4) var(--space-5); 
    background: rgba(212,175,55,0.15); 
    border-radius: var(--radius-lg); 
    border-left: 3px solid var(--gold-main); 
}
.hero-buttons { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.btn-primary { 
    display: inline-flex; 
    align-items: center; 
    gap: var(--space-3); 
    padding: var(--space-4) var(--space-8); 
    background: var(--gradient-gold); 
    color: var(--purple-dark); 
    text-decoration: none; 
    border-radius: var(--radius-full); 
    font-size: var(--text-base); 
    font-weight: var(--font-semibold); 
    transition: all var(--transition-normal) var(--ease-out); 
    box-shadow: var(--shadow-gold); 
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(212,175,55,0.5); }
.btn-secondary { 
    display: inline-flex; 
    align-items: center; 
    gap: var(--space-3); 
    padding: var(--space-4) var(--space-8); 
    background: transparent; 
    color: white; 
    text-decoration: none; 
    border-radius: var(--radius-full); 
    font-size: var(--text-base); 
    border: 2px solid rgba(255,255,255,0.4); 
    transition: all var(--transition-normal) var(--ease-out); 
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--gold-main); }
.hero-image { position: relative; }
.hero-image-frame { 
    border-radius: var(--radius-2xl); 
    overflow: hidden; 
    box-shadow: 0 30px 80px rgba(0,0,0,0.3); 
    border: 4px solid rgba(212,175,55,0.3); 
}
.hero-image img { width: 100%; height: auto; display: block; }

/* Sections */
section { padding: var(--space-24) 0; }
.section-header { text-align: center; margin-bottom: var(--space-16); }
.section-tag { display: inline-block; font-size: var(--text-sm); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); color: var(--gold-main); margin-bottom: var(--space-4); }
.section-title { font-size: var(--text-4xl); font-weight: var(--font-bold); margin-bottom: var(--space-5); color: var(--purple-dark); }
.section-desc { max-width: 750px; margin: 0 auto; color: var(--text-gray); font-size: var(--text-lg); line-height: var(--leading-relaxed); }

/* Mission Section */
.mission { background: var(--bg-white); }
.mission-content { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-20); align-items: center; }
.mission-image { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.mission-image img { width: 100%; height: auto; }
.mission-text h2 { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--purple-dark); margin-bottom: var(--space-6); }
.mission-text p { color: var(--text-gray); margin-bottom: var(--space-5); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.mission-quote { background: var(--purple-pale); padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg); border-left: 4px solid var(--gold-main); margin-top: var(--space-8); }
.mission-quote p { font-style: italic; color: var(--purple-dark); margin-bottom: 0; font-size: var(--text-base); }

/* Questions Section */
.questions { background: linear-gradient(135deg, #f3e5f9 0%, #fef3c7 100%); }
.questions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); max-width: 900px; margin: 0 auto; }
.question-card { background: white; padding: var(--space-8) var(--space-8); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); text-align: center; transition: all var(--transition-normal) var(--ease-out); border: 2px solid transparent; }
.question-card:hover { border-color: var(--gold-main); transform: translateY(-5px); }
.question-card p { font-size: var(--text-lg); color: var(--purple-dark); font-weight: var(--font-medium); line-height: var(--leading-relaxed); }

/* Stats Section */
.stats { background: var(--gradient-hero); color: white; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-10); }
.stat-card { text-align: center; padding: var(--space-8) var(--space-5); }
.stat-number { font-size: var(--text-5xl); font-weight: var(--font-bold); color: var(--gold-light); margin-bottom: var(--space-3); }
.stat-label { font-size: var(--text-base); opacity: 0.85; }

/* Features Section - 8大特色 */
.features { background: var(--bg-white); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.feature-card { background: white; border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-md); text-align: center; border: 1px solid var(--border-light); transition: all var(--transition-normal) var(--ease-out); position: relative; overflow: hidden; }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-gold); }
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.feature-number { width: 50px; height: 50px; border-radius: var(--radius-circle); background: var(--gradient-purple); color: white; display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); font-weight: var(--font-bold); margin: 0 auto var(--space-5); }
.feature-card h3 { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--purple-dark); margin-bottom: var(--space-3); }
.feature-card p { color: var(--text-gray); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Course Info Section */
.course-info { background: var(--purple-pale); }
.course-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.course-info-column { background: white; border-radius: var(--radius-2xl); padding: var(--space-10); box-shadow: var(--shadow-md); }
.course-info-column h3 { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--purple-dark); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-3); }
.course-info-column h3 span { width: 40px; height: 40px; border-radius: var(--radius-circle); background: var(--gradient-purple); color: white; display: flex; align-items: center; justify-content: center; }
.course-list { list-style: none; }
.course-list li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-light); color: var(--text-gray); font-size: var(--text-base); }
.course-list li:last-child { border-bottom: none; }
.course-list li::before { content: '✓'; color: var(--gold-main); font-weight: var(--font-bold); }

/* Quote Section */
.quote-section { background: var(--bg-white); padding: var(--space-20) 0; }
.quote-box { max-width: 900px; margin: 0 auto; text-align: center; }
.quote-icon { width: 60px; height: 60px; margin: 0 auto var(--space-8); opacity: 0.3; }
.quote-text { font-size: var(--text-2xl); font-style: italic; color: var(--purple-dark); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); }
.quote-author { color: var(--gold-dark); font-weight: var(--font-semibold); font-size: var(--text-base); }

/* Pricing Section */
.pricing { background: var(--gradient-hero); color: white; }
.pricing-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.pricing-info h2 { font-size: var(--text-4xl); font-weight: var(--font-bold); margin-bottom: var(--space-8); }
.pricing-list { display: flex; flex-direction: column; gap: var(--space-5); }
.pricing-item { display: flex; align-items: flex-start; gap: var(--space-4); }
.pricing-item-icon { width: 45px; height: 45px; border-radius: var(--radius-circle); background: rgba(212,175,55,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pricing-item-icon svg { width: 20px; height: 20px; stroke: var(--gold-light); }
.pricing-item-text h4 { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--gold-light); margin-bottom: var(--space-1); }
.pricing-item-text p { font-size: var(--text-sm); opacity: 0.85; line-height: var(--leading-relaxed); }
.pricing-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: var(--radius-2xl); padding: var(--space-12) var(--space-10); border: 1px solid rgba(255,255,255,0.2); text-align: center; }
.pricing-card h3 { font-size: var(--text-xl); color: var(--gold-light); margin-bottom: var(--space-3); }
.pricing-amount { font-size: var(--text-5xl); font-weight: var(--font-bold); margin-bottom: var(--space-1); }
.pricing-note { font-size: var(--text-sm); opacity: 0.7; margin-bottom: var(--space-8); }
.pricing-features { text-align: left; margin-bottom: var(--space-8); list-style: none; }
.pricing-features li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: var(--text-sm); }
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before { content: '✓'; color: var(--gold-main); font-weight: var(--font-bold); }

/* FAQ Section */
.faq { background: var(--purple-pale); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: white; border-radius: var(--radius-lg); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--border-light); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) var(--space-8); cursor: pointer; transition: all var(--transition-normal) var(--ease-out); }
.faq-question:hover { background: var(--purple-pale); }
.faq-question span { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--purple-dark); }
.faq-question svg { transition: transform var(--transition-normal) var(--ease-out); stroke: var(--purple-main); flex-shrink: 0; margin-left: var(--space-4); }
.faq-item.active .faq-question svg { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal) var(--ease-out); }
.faq-item.active .faq-answer { max-height: 500px; }
.faq-answer p { padding: 0 var(--space-8) var(--space-6); color: var(--text-gray); font-size: var(--text-base); line-height: var(--leading-relaxed); }

/* Contact Section */
.contact { background: var(--bg-white); }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.contact-text h2 { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--purple-dark); margin-bottom: var(--space-5); }
.contact-text p { color: var(--text-gray); font-size: var(--text-base); margin-bottom: var(--space-8); line-height: var(--leading-relaxed); }
.contact-info { background: white; border-radius: var(--radius-2xl); padding: var(--space-10); box-shadow: var(--shadow-lg); }
.contact-item { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--border-light); }
.contact-item:last-child { border-bottom: none; }
.contact-icon { width: 55px; height: 55px; border-radius: var(--radius-circle); background: var(--purple-pale); display: flex; align-items: center; justify-content: center; }
.contact-icon svg { width: 24px; height: 24px; stroke: var(--purple-main); }
.contact-detail { display: flex; flex-direction: column; }
.contact-label { font-size: var(--text-sm); color: var(--text-light); margin-bottom: var(--space-1); }
.contact-detail a, .contact-detail span { font-size: var(--text-base); color: var(--text-dark); text-decoration: none; font-weight: var(--font-medium); }
.contact-detail a:hover { color: var(--purple-main); }

/* Footer */
.footer { background: var(--gradient-hero); color: white; padding: var(--space-16) 0 var(--space-10); }
.footer-content { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-12); }
.footer-brand h3 { font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-3); }
.footer-brand p { opacity: 0.75; font-size: var(--text-sm); margin-bottom: var(--space-5); line-height: var(--leading-relaxed); }
.footer-section h4 { font-size: var(--text-base); font-weight: var(--font-semibold); margin-bottom: var(--space-5); color: var(--gold-light); }
.footer-section a { display: block; color: white; text-decoration: none; opacity: 0.75; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.footer-section a:hover { opacity: 1; color: var(--gold-light); }
.footer-bottom { padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: var(--text-sm); opacity: 0.6; }

/* LINE 按鈕樣式已由 line-button.css 提供 */

/* Responsive */
@media (max-width: 1200px) {
    .hero-container { grid-template-columns: 1fr; gap: var(--space-12); text-align: center; }
    .hero-content { max-width: 100%; }
    .hero-buttons { justify-content: center; }
    .hero-image { max-width: 500px; margin: 0 auto; }
    .footer-content { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
    /* 導航樣式由外部 nav-style.css 處理 */
    section { padding: var(--space-20) 0; }
    .mission-content, .contact-wrapper, .pricing-content, .course-info-grid { grid-template-columns: 1fr; gap: var(--space-12); }
    .mission-image { max-width: 500px; margin: 0 auto; }
    .questions-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .hero { padding: var(--space-24) var(--space-5) var(--space-16); min-height: auto; }
    .hero h1 { font-size: var(--text-4xl); }
    .section-title { font-size: var(--text-3xl); }
    .features-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
    .stat-number { font-size: var(--text-4xl); }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; }
}
@media (max-width: 480px) {
    .container { padding: 0 var(--space-5); }
    .hero-buttons { flex-direction: column; width: 100%; }
    .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
    .pricing-card { padding: var(--space-10) var(--space-6); }
    .pricing-amount { font-size: var(--text-4xl); }
}