* { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'PingFang SC','Microsoft YaHei',sans-serif; color: #2B1A12; background: #FAF5EF; line-height: 1.7; }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  .container-main { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .nav-link { position: relative; transition: color .3s; }
  .nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: #C9A96E; transition: width .3s; }
  .nav-link:hover::after, .nav-link.active::after { width: 100%; }
  .btn-primary { background: linear-gradient(135deg,#7A5034,#5A3520); color: #fff; padding: 14px 32px; border-radius: 50px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: all .3s; box-shadow: 0 8px 24px rgba(122,80,52,0.3); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(122,80,52,0.4); }
  .btn-outline { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); color: #fff; padding: 14px 32px; border-radius: 50px; font-weight: 600; border: 1px solid rgba(255,255,255,0.5); display: inline-flex; align-items: center; gap: 10px; transition: all .3s; }
  .btn-outline:hover { background: rgba(255,255,255,0.3); }
  .play-btn { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 2px solid rgba(255,255,255,0.6); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .35s; }
  .play-btn:hover { transform: scale(1.1); background: rgba(255,255,255,0.32); box-shadow: 0 0 40px rgba(255,255,255,0.25); }
  .feature-card { background: #fff; border-radius: 20px; padding: 36px 28px; box-shadow: 0 10px 30px rgba(43,26,18,0.06); transition: all .4s; border: 1px solid rgba(232,221,208,0.5); }
  .feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(43,26,18,0.11); }
  .feature-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg,#E6D5B8,#C9A96E); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #5A3520; margin-bottom: 20px; }
  .stat-badge { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 28px 20px; text-align: center; transition: all .3s; }
  .stat-badge:hover { background: rgba(255,255,255,0.18); transform: scale(1.03); }
  .step-card { text-align: center; padding: 30px 20px; position: relative; }
  .step-num { width: 42px; height: 42px; border-radius: 50%; background: #7A5034; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 18px; }
  .form-input { width: 100%; padding: 14px 16px; border: 1px solid #E8DDD0; border-radius: 12px; background: #fff; font-size: 15px; transition: border .3s, box-shadow .3s; outline: none; color: #2B1A12; }
  .form-input:focus { border-color: #7A5034; box-shadow: 0 0 0 3px rgba(122,80,52,0.12); }
  .news-list li { padding: 20px 0; border-bottom: 1px solid #F0E7DC; transition: padding-left .3s; }
  .news-list li:hover { padding-left: 8px; }
  .news-list li a { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
  .news-list .date { flex-shrink: 0; font-size: 13px; color: #8A7A6C; }
  .accordion-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; background: #fff; border: 1px solid #E8DDD0; border-radius: 14px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all .3s; text-align: left; }
  .accordion-btn:hover { border-color: #C9A96E; }
  .accordion-btn.open { border-radius: 14px 14px 0 0; border-bottom-color: transparent; }
  .accordion-content { max-height: 0; overflow: hidden; transition: max-height .4s ease; background: #fff; border: 1px solid #E8DDD0; border-top: none; border-radius: 0 0 14px 14px; }
  .accordion-content.show { max-height: 500px; }
  .accordion-item { margin-bottom: 14px; }
  .footer-link { transition: all .3s; display: inline-block; }
  .footer-link:hover { color: #C9A96E; transform: translateX(4px); }
  @media (max-width: 768px) {
    .nav-menu { display: none; }
    .nav-mobile { display: flex; }
  }
  @media (min-width: 769px) {
    .nav-mobile { display: none; }
  }

* { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'PingFang SC','Microsoft YaHei',sans-serif; color: #2B1A12; background: #FAF5EF; line-height: 1.7; }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  .container-main { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .nav-link { position: relative; transition: color .3s; }
  .nav-link::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: #C9A96E; transition: width .3s; }
  .nav-link:hover::after, .nav-link.active::after { width: 100%; }
  .btn-primary { background: linear-gradient(135deg,#7A5034,#5A3520); color: #fff; padding: 14px 32px; border-radius: 50px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: all .3s; box-shadow: 0 8px 24px rgba(122,80,52,0.3); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(122,80,52,0.4); }
  .btn-outline { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); color: #fff; padding: 14px 32px; border-radius: 50px; font-weight: 600; border: 1px solid rgba(255,255,255,0.5); display: inline-flex; align-items: center; gap: 10px; transition: all .3s; }
  .btn-outline:hover { background: rgba(255,255,255,0.3); }
  .feature-card { background: #fff; border-radius: 20px; padding: 36px 28px; box-shadow: 0 10px 30px rgba(43,26,18,0.06); transition: all .4s; border: 1px solid rgba(232,221,208,0.5); }
  .feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(43,26,18,0.11); }
  .feature-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg,#E6D5B8,#C9A96E); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #5A3520; margin-bottom: 20px; }
  .scroll-section { scroll-margin-top: 90px; }
  @media (max-width: 768px) {
    .nav-menu { display: none; }
    .nav-mobile { display: flex; }
  }
  @media (min-width: 769px) {
    .nav-mobile { display: none; }
  }

@layer base {
            html {
                scroll-behavior: smooth;
            }
            body {
                @apply bg-paper text-ink font-sans antialiased;
            }
            ::selection {
                @apply bg-brand/20 text-ink;
            }
            img {
                @apply max-w-full h-auto;
            }
            a {
                transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
            }
            button {
                transition: all 0.25s ease;
            }
        }
        @layer components {
            .container-main {
                @apply max-w-7xl mx-auto px-5 md:px-8;
            }
            .nav-link {
                @apply relative py-2 px-1 hover:text-brand-dark transition-colors duration-200;
            }
            .nav-link.active {
                @apply text-brand-dark font-semibold;
            }
            .nav-link.active::after {
                content: '';
                @apply absolute left-1/2 -translate-x-1/2 bottom-0 w-5 h-0.5 bg-brand-dark rounded-full;
            }
            .btn-primary {
                @apply inline-flex items-center justify-center gap-2 bg-brand-dark text-white px-6 py-3 rounded-xl font-medium text-sm tracking-wide hover:bg-brand transition-all duration-200 shadow-gold hover:shadow-md hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-brand/40 focus:ring-offset-2 active:translate-y-0;
            }
            .btn-light {
                @apply inline-flex items-center justify-center gap-2 bg-white text-brand-dark px-6 py-3 rounded-xl font-medium text-sm tracking-wide hover:bg-brand-light hover:text-white transition-all duration-200 shadow-sm hover:shadow-md hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-white/60 focus:ring-offset-2 active:translate-y-0;
            }
            .badge {
                @apply inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1 rounded-full bg-brand/10 text-brand-dark border border-brand/20;
            }
            .card-base {
                @apply bg-white rounded-2xl shadow-card border border-stone-100 p-6 md:p-8 hover:shadow-card-hover transition-shadow duration-300;
            }
            .faq-item {
                @apply bg-white rounded-xl border border-stone-200/70 px-6 py-5 open:shadow-card transition-all duration-200;
            }
            .faq-item summary {
                @apply cursor-pointer font-medium text-ink text-[15px] flex items-center justify-between gap-4 list-none;
            }
            .faq-item summary::-webkit-details-marker {
                display: none;
            }
            .faq-item[open] summary .fa-chevron-down {
                @apply rotate-180;
            }
            .footer-link {
                @apply text-sm text-gray-400 hover:text-gold transition-colors duration-200;
            }
        }