/* roulang page: index */
:root {
      --color-primary: #0284c7;
      --color-primary-dark: #0369a1;
      --color-slate-dark: #0f172a;
      --color-slate-card: #1e293b;
      --color-amber-alert: #f59e0b;
      --color-emerald-ready: #10b981;
      --color-surface-soft: #f8fafc;
      --color-border-line: #e2e8f0;
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    body {
      background-color: #f8fafc;
      color: #1e293b;
      line-height: 1.75;
      overflow-x: hidden;
    }
    .cta-btn-primary {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .cta-btn-primary:hover {
      box-shadow: 0 10px 20px -5px rgba(2, 132, 199, 0.35);
      transform: translateY(-2px);
    }
    .card-hover-fx {
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .card-hover-fx:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.08);
      border-color: #cbd5e1;
    }
    .dark-card-hover:hover {
      transform: translateY(-3px);
      border-color: #0284c7;
      box-shadow: 0 12px 28px -6px rgba(2, 132, 199, 0.15);
    }
    .min-touch-target {
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }