/* roulang page: index */
@tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    /* 自定义设计变量与基础重置 */
    :root {
      --db-midnight: #0A1F3F;
      --db-gold: #C9A96E;
      --db-gold-hover: #B28A4A;
      --db-surface: #F7F9FC;
      --db-card: #FFFFFF;
      --db-text: #1E293B;
      --db-muted: #64748B;
      --db-border: #E2E8F0;
      --db-trust: #0F766E;
    }
    
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans SC', sans-serif;
      background-color: #F7F9FC;
      color: #1E293B;
      line-height: 1.6;
      margin: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    
    a, button, input, textarea {
      outline: none;
      transition: all 0.2s ease;
    }
    
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--db-gold);
      outline-offset: 2px;
      border-radius: 4px;
    }
    
    /* 自定义组件样式 */
    .btn-primary {
      background-color: var(--db-gold);
      color: var(--db-midnight);
      padding: 0.75rem 1.5rem;
      border-radius: 9999px;
      font-weight: 700;
      letter-spacing: 0.02em;
      box-shadow: 0 4px 12px rgba(201, 169, 110, 0.3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    .btn-primary:hover {
      background-color: var(--db-gold-hover);
      box-shadow: 0 8px 20px rgba(178, 138, 74, 0.4);
      transform: translateY(-2px);
    }
    
    .btn-outline {
      border: 2px solid var(--db-midnight);
      color: var(--db-midnight);
      padding: 0.75rem 1.5rem;
      border-radius: 9999px;
      font-weight: 600;
      letter-spacing: 0.02em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    .btn-outline:hover {
      background-color: var(--db-midnight);
      color: white;
    }
    
    .section-title {
      font-size: 2rem;
      font-weight: 700;
      color: var(--db-midnight);
      margin-bottom: 0.75rem;
      position: relative;
      display: inline-block;
    }
    .section-title::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 100%;
      height: 4px;
      background-color: var(--db-gold);
      border-radius: 2px;
    }
    
    .card {
      background: white;
      border-radius: 1rem;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
      transition: all 0.3s ease;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.1), 0 10px 15px -8px rgba(0, 0, 0, 0.05);
    }
    
    /* 瀑布流布局 */
    .masonry-grid {
      column-count: 1;
      column-gap: 1.5rem;
    }
    @media (min-width: 768px) {
      .masonry-grid {
        column-count: 2;
      }
    }
    @media (min-width: 1024px) {
      .masonry-grid {
        column-count: 3;
      }
    }
    .masonry-item {
      break-inside: avoid;
      margin-bottom: 1.5rem;
    }
    
    /* 移动端底部导航激活样式 */
    .bottom-tab.active {
      color: var(--db-gold);
    }
    
    /* FAQ动画 */
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-in-out, padding 0.3s ease;
    }
    .faq-item.open .faq-answer {
      max-height: 500px;
      padding-top: 0.75rem;
    }
    .faq-icon {
      transition: transform 0.3s ease;
    }
    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }