:root {
    --color-primary: #165DFF;
    --color-secondary: #0E2C9B;
    --color-accent: #FF7D00;
    --color-neutral: #F5F7FA;
    --color-dark: #1D2129;
    --color-light: #86909C;
}

@layer utilities {
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .card-hover {
        transition: all 0.3s ease;
    }
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .banner-card-hover {
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .banner-card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }
    .scroll-smooth {
        scroll-behavior: smooth;
    }
}

/* 图片悬停放大效果 */
img:not(.no-hover-scale) {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
img:not(.no-hover-scale):hover {
    transform: scale(1.05);
}

/* 阅读全文按钮hover效果 */
a.bg-primary:hover {
    background-color: rgba(22, 93, 255, 0.88) ;
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 100%;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1400px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1600px;
    }
}

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-neutral { color: var(--color-neutral); }
.text-dark { color: var(--color-dark); }
.text-light { color: var(--color-light); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-neutral { background-color: var(--color-neutral); }
.bg-dark { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-light); }

.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:text-secondary:hover { color: var(--color-secondary); }
.hover\:text-accent:hover { color: var(--color-accent); }
.hover\:text-neutral:hover { color: var(--color-neutral); }
.hover\:text-dark:hover { color: var(--color-dark); }
.hover\:text-light:hover { color: var(--color-light); }

.hover\:bg-primary:hover { background-color: var(--color-primary); }
.hover\:bg-secondary:hover { background-color: var(--color-secondary); }
.hover\:bg-accent:hover { background-color: var(--color-accent); }
.hover\:bg-neutral:hover { background-color: var(--color-neutral); }
.hover\:bg-dark:hover { background-color: var(--color-dark); }
.hover\:bg-light:hover { background-color: var(--color-light); }

.bg-primary\/90 { background-color: rgba(22, 93, 255, 0.9); }
.bg-primary\/80 { background-color: rgba(22, 93, 255, 0.8); }
.bg-primary\/70 { background-color: rgba(22, 93, 255, 0.7); }
.bg-primary\/60 { background-color: rgba(22, 93, 255, 0.6); }
.bg-primary\/50 { background-color: rgba(22, 93, 255, 0.5); }
.bg-primary\/40 { background-color: rgba(22, 93, 255, 0.4); }
.bg-primary\/30 { background-color: rgba(22, 93, 255, 0.3); }
.bg-primary\/20 { background-color: rgba(22, 93, 255, 0.2); }
.bg-primary\/10 { background-color: rgba(22, 93, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }

.text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/40 { color: rgba(255, 255, 255, 0.4); }
.text-white\/30 { color: rgba(255, 255, 255, 0.3); }
.text-white\/20 { color: rgba(255, 255, 255, 0.2); }
.text-white\/10 { color: rgba(255, 255, 255, 0.1); }

.font-sans {
    font-family: 'Inter', system-ui, sans-serif;
}

.py-\[100px\] {
    padding-top: 100px;
    padding-bottom: 100px;
}

.py-\[120px\] {
    padding-top: 120px;
    padding-bottom: 120px;
}

.py-\[140px\] {
    padding-top: 140px;
    padding-bottom: 140px;
}

.pt-20 {
    padding-top: 5rem;
}

.pt-24 {
    padding-top: 6rem;
}

.text-\[clamp\(2rem\2c 5vw\2c 3\.5rem\)\] {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.text-\[clamp\(1rem\2c 2vw\2c 1\.25rem\)\] {
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.5rem\)\] {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.text-\[clamp\(1\.8rem\2c 3vw\2c 2\.5rem\)\] {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.bg-\[linear-gradient\(rgba\(22\2c 93\2c 255\2c 0\.6\)\2c rgba\(22\2c 93\2c 255\2c 0\.6\)\)\2c url\(\'images\/bg2\.jpg\'\)\] {
    background-image: linear-gradient(rgba(22, 93, 255, 0.6), rgba(22, 93, 255, 0.6)), url('images/bg2.jpg');
}

.bg-gray-50 {
    background-color: #f9fafb;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

.text-gray-700 {
    color: #374151;
}

.bg-gray-800 {
    background-color: #1f2937;
}

.bg-white\/90 {
    background-color: rgba(255, 255, 255, 0.9);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.items-center {
    align-items: center;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

@media (min-width: 768px) {
    .md\:order-1 {
        order: 1;
    }
    .md\:order-2 {
        order: 2;
    }
}