:root {
    --background: 210 17% 98%;
    --foreground: 220 9% 23%;
    --card: 0 0% 100%;
    --card-foreground: 220 9% 23%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 9% 23%;
    --primary: 220 9% 23%;
    --primary-foreground: 0 0% 100%;
    --secondary: 24 95% 61%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 17% 95%;
    --muted-foreground: 220 9% 46%;
    --accent: 38 92% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 17% 90%;
    --input: 210 17% 90%;
    --ring: 220 9% 23%;
    --radius: 0.5rem;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.dark {
    --background: 225 6% 18%;
    --foreground: 220 5% 87%;
    --card: 220 9% 23%;
    --card-foreground: 220 5% 87%;
    --popover: 220 9% 23%;
    --popover-foreground: 220 5% 87%;
    --primary: 220 5% 75%;
    --primary-foreground: 225 6% 18%;
    --secondary: 24 95% 65%;
    --secondary-foreground: 225 6% 18%;
    --muted: 220 9% 28%;
    --muted-foreground: 220 5% 65%;
    --accent: 38 96% 56%;
    --accent-foreground: 225 6% 18%;
    --destructive: 0 60% 50%;
    --destructive-foreground: 0 0% 98%;
    --border: 220 9% 32%;
    --input: 220 9% 32%;
    --ring: 220 5% 75%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    line-height: 1.8;
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    display: block;
}