/* moban003 - Light Enterprise SaaS Theme */
:root {
    --brand-primary: #4f46e5;
    --brand-secondary: #818cf8;
    --brand-dark: #312e81;
    --page-bg: #ffffff;
    --section-bg: #f9fafb;
    --text-dark: #111827;
    --text-gray: #4b5563;
    --border-line: #e5e7eb;
    --radius-md: 12px;
    --radius-lg: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--page-bg); color: var(--text-gray); line-height: 1.7; font-size: 16px; }
a { color: var(--brand-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4 { color: var(--text-dark); font-weight: 700; line-height: 1.3; }

/* Navigation */
.app-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; background-color: rgba(255,255,255,0.95); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-line); }
.brand-mark { font-size: 1.5rem; font-weight: 800; color: var(--brand-dark); display: flex; align-items: center; gap: 10px; }
.brand-mark img { width: 32px; height: 32px; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { color: var(--text-gray); font-weight: 500; padding: 0.5rem 0; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a.current-page { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

/* Buttons */
.cta-button { display: inline-block; padding: 0.8rem 2rem; background-color: var(--brand-primary); color: #fff; border-radius: 50px; font-weight: 600; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3); transition: transform 0.2s, box-shadow 0.2s; }
.cta-button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); }
.cta-button.outline { background-color: transparent; color: var(--brand-primary); border: 2px solid var(--brand-primary); box-shadow: none; }
.cta-button.outline:hover { background-color: var(--brand-primary); color: #fff; }

/* Hero Split Layout */
.hero-split { display: flex; align-items: center; padding: 5rem 5%; background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%); min-height: 80vh; }
.hero-text-area { flex: 1; padding-right: 4rem; }
.hero-text-area h1 { font-size: 3.5rem; margin-bottom: 1.5rem; letter-spacing: -1px; }
.hero-text-area p { font-size: 1.25rem; margin-bottom: 2.5rem; color: var(--text-gray); }
.hero-visual-area { flex: 1; display: flex; justify-content: center; position: relative; }
.hero-circle { width: 400px; height: 400px; background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)); border-radius: 50%; opacity: 0.1; position: absolute; z-index: 0; }

/* Cards Grid */
.benefits-container { padding: 5rem 5%; background-color: var(--page-bg); }
.section-heading { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
.section-heading h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.benefit-card { background: #fff; padding: 2.5rem; border-radius: var(--radius-md); border: 1px solid var(--border-line); transition: all 0.3s ease; }
.benefit-card:hover { border-color: var(--brand-secondary); box-shadow: 0 10px 25px rgba(0,0,0,0.05); transform: translateY(-5px); }
.benefit-card img { width: 56px; height: 56px; margin-bottom: 1.5rem; }
.benefit-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }

/* Long SEO Article Section */
.seo-article-wrap { padding: 5rem 5%; background-color: var(--section-bg); }
.article-body { max-width: 900px; margin: 0 auto; background: #fff; padding: 4rem; border-radius: var(--radius-lg); box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.article-body h2 { font-size: 2rem; color: var(--brand-dark); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--section-bg); }
.article-body h3 { font-size: 1.5rem; margin: 2.5rem 0 1rem; color: var(--brand-primary); }
.article-body p { margin-bottom: 1.5rem; text-align: justify; }
.article-body ul { margin-left: 1.5rem; margin-bottom: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; }

/* Step-by-Step Timeline (For Guide) */
.timeline { max-width: 800px; margin: 0 auto; position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-secondary); opacity: 0.3; border-radius: 2px; }
.timeline-item { position: relative; margin-bottom: 3rem; }
.timeline-item::before { content: ''; position: absolute; left: -2.45rem; top: 0.3rem; width: 20px; height: 20px; background: var(--brand-primary); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--brand-secondary); }
.timeline-item h3 { font-size: 1.4rem; margin-bottom: 0.8rem; }

/* Accordion FAQ */
.accordion-wrapper { max-width: 800px; margin: 0 auto; }
.accordion-item { border-bottom: 1px solid var(--border-line); }
.accordion-header { padding: 1.5rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.15rem; color: var(--text-dark); }
.accordion-header:hover { color: var(--brand-primary); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-content p { padding-bottom: 1.5rem; color: var(--text-gray); }

/* Footer */
.app-footer { background-color: var(--text-dark); color: #fff; padding: 5rem 5% 2rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin-bottom: 4rem; }
.footer-col h4 { color: #fff; margin-bottom: 1.5rem; font-size: 1.1rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.8rem; }
.footer-col a { color: #9ca3af; }
.footer-col a:hover { color: #fff; }
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); color: #6b7280; font-size: 0.9rem; }

/* Responsive */
@media (max-width: 900px) {
    .hero-split { flex-direction: column; text-align: center; padding-top: 3rem; }
    .hero-text-area { padding-right: 0; margin-bottom: 3rem; }
    .hero-text-area h1 { font-size: 2.5rem; }
    .nav-links { display: none; }
    .article-body { padding: 2rem; }
}