/* roulang page: index */
:root {
      --primary: #1F4E5B;
      --primary-dark: #132328;
      --accent: #D97736;
      --coral: #F97316;
      --bg-cream: #FDFBF7;
      --text-main: #1F2937;
      --text-muted: #475569;
      --border-warm: rgba(217, 119, 54, 0.15);
      --radius-xl: 1.25rem;
      --radius-2xl: 1.5rem;
      --shadow-soft: 0 10px 35px -5px rgba(31, 78, 91, 0.07), 0 0 1px 1px rgba(0, 0, 0, 0.03);
    }

    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--bg-cream);
      color: var(--text-main);
    }

    body {
      margin: 0;
      padding: 0;
      line-height: 1.75;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    .glass-nav {
      background: rgba(253, 251, 247, 0.94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.35rem 0.9rem;
      border-radius: 9999px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--accent);
      background-color: rgba(217, 119, 54, 0.1);
      border: 1px solid var(--border-warm);
      margin-bottom: 0.85rem;
    }

    .card-hover {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px -10px rgba(31, 78, 91, 0.12);
    }

    details summary::-webkit-details-marker {
      display: none;
    }