/* roulang page: index */
/* ========== 设计变量与全局重置 ========== */
    :root {
      --primary-milan: #B8A99A;    /* 米兰灰泥主色 */
      --secondary-charcoal: #2C2C2C; /* 深炭灰 */
      --accent-gold: #C8A96E;      /* 哑光金 */
      --bg-warm: #FAF7F2;          /* 暖白纸纹底色 */
      --card-bg: #F5F2ED;          /* 卡片微灰白 */
      --card-hover-bg: #FFFBF5;
      --border-light: #E0D9CF;
      --text-body: #5A5550;
      --text-muted: #8C8882;
      --text-dark: #2C2C2C;
      --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
      --shadow-sm: 0 2px 12px rgba(44,44,44,0.04);
      --shadow-md: 0 8px 24px rgba(44,44,44,0.08);
      --border-radius-card: 12px;
      --border-radius-btn: 8px;
      --transition-smooth: all 0.25s ease;
    }
    
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: var(--font-sans);
      background-color: var(--bg-warm);
      color: var(--text-body);
      line-height: 1.7;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
    
    h1, h2, h3, h4, h5, h6 {
      color: var(--text-dark);
      font-weight: 600;
      letter-spacing: -0.3px;
    }
    
    a {
      text-decoration: none;
      color: inherit;
      transition: var(--transition-smooth);
    }
    
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    
    /* 覆盖 Bootstrap 默认样式 */
    .btn {
      border-radius: var(--border-radius-btn);
      padding: 14px 32px;
      font-weight: 600;
      transition: var(--transition-smooth);
      border: 1.5px solid transparent;
    }
    .btn:focus {
      box-shadow: 0 0 0 3px rgba(200,169,110,0.3);
    }
    .btn-primary-milan {
      background-color: var(--accent-gold);
      color: var(--secondary-charcoal);
      border-color: var(--accent-gold);
    }
    .btn-primary-milan:hover {
      background-color: #B8944F;
      border-color: #B8944F;
      color: var(--secondary-charcoal);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .btn-outline-milan {
      background: transparent;
      border: 1.5px solid var(--secondary-charcoal);
      color: var(--secondary-charcoal);
    }
    .btn-outline-milan:hover {
      background-color: var(--secondary-charcoal);
      color: var(--bg-warm);
      transform: translateY(-2px);
    }
    
    .card {
      border-radius: var(--border-radius-card);
      box-shadow: var(--shadow-sm);
      transition: var(--transition-smooth);
      background-color: var(--card-bg);
      border: none;
      height: 100%;
    }
    .card:hover {
      box-shadow: var(--shadow-md);
      transform: scale(1.02);
      background-color: var(--card-hover-bg);
    }
    .card-img-top {
      border-top-left-radius: var(--border-radius-card);
      border-top-right-radius: var(--border-radius-card);
      object-fit: cover;
      height: 220px;
    }
    
    .accordion-button {
      background-color: var(--card-bg);
      color: var(--text-dark);
      font-weight: 600;
      border: 1px solid var(--border-light);
      border-radius: var(--border-radius-btn) !important;
      box-shadow: none !important;
    }
    .accordion-button:not(.collapsed) {
      background-color: var(--bg-warm);
      color: var(--accent-gold);
      box-shadow: none;
    }
    .accordion-button::after {
      background-image: none;
      content: "+";
      font-size: 1.5rem;
      color: var(--accent-gold);
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
    }
    .accordion-button:not(.collapsed)::after {
      content: "−";
      transform: rotate(180deg);
    }
    
    /* 导航自定义 */
    .navbar {
      background-color: rgba(250,247,242,0.9);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 12px rgba(0,0,0,0.02);
      transition: background-color 0.3s;
      padding: 0.8rem 0;
    }
    .navbar.scrolled {
      background-color: var(--bg-warm);
      box-shadow: var(--shadow-sm);
    }
    .navbar-brand {
      font-weight: 700;
      color: var(--primary-milan) !important;
      letter-spacing: 1px;
    }
    .navbar-brand .brand-milan {
      font-weight: 400;
      font-family: 'Georgia', serif;
      color: var(--secondary-charcoal);
    }
    .nav-link {
      color: var(--text-dark) !important;
      font-weight: 500;
      font-size: 0.95rem;
      margin: 0 4px;
      position: relative;
    }
    .nav-link:hover, .nav-link.active {
      color: var(--accent-gold) !important;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 8px;
      right: 8px;
      height: 2px;
      background: var(--accent-gold);
      transform: scaleX(0);
      transition: transform 0.25s ease;
    }
    .nav-link:hover::after {
      transform: scaleX(1);
    }
    .search-input {
      border-radius: 20px;
      border: 1px solid var(--border-light);
      padding: 0.4rem 1rem;
      font-size: 0.9rem;
      background: white;
    }
    .navbar-toggler {
      border: none;
      color: var(--secondary-charcoal);
    }
    
    /* Hero 背景图 */
    .hero-section {
      background: linear-gradient(0deg, rgba(250,247,242,0.4) 0%, rgba(250,247,242,0.1) 100%), url('/assets/images/backpic/back-1.webp') center center/cover no-repeat;
      min-height: 85vh;
      display: flex;
      align-items: center;
    }
    
    /* 区块标题装饰线 */
    .section-title {
      font-size: 2.25rem;
      font-weight: 600;
      color: var(--secondary-charcoal);
      margin-bottom: 0.5rem;
      position: relative;
      display: inline-block;
    }
    .section-title::after {
      content: '';
      display: block;
      width: 50px;
      height: 4px;
      background: var(--accent-gold);
      margin-top: 12px;
    }
    
    /* 数字动画样式 */
    .counter {
      font-size: 3rem;
      font-weight: 700;
      color: var(--accent-gold);
    }
    
    /* 页脚 */
    footer {
      background-color: var(--secondary-charcoal);
      color: var(--bg-warm);
    }
    footer a {
      color: var(--bg-warm);
      opacity: 0.8;
    }
    footer a:hover {
      color: var(--accent-gold);
      opacity: 1;
    }
    
    /* 滚动渐现动画 */
    .fade-in-section {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fade-in-section.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    @media (max-width: 768px) {
      .hero-section {
        min-height: 70vh;
        text-align: center;
      }
      .section-title {
        font-size: 1.8rem;
      }
      .btn {
        padding: 12px 24px;
        width: 100%;
        margin-bottom: 0.5rem;
      }
    }