/* roulang page: index */
:root {
      --primary: #0B192C;
      --secondary: #00D26A;
      --accent: #0084FF;
      --bg-light: #F8FAFC;
      --text-main: #0F172A;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
    }
    body {
      font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
      color: #334155;
      background-color: #FFFFFF;
      overflow-x: hidden;
    }
    .hero-pattern {
      background-color: #0B192C;
      background-image: radial-gradient(rgba(0, 210, 106, 0.12) 1px, transparent 1px), radial-gradient(rgba(0, 132, 255, 0.15) 1px, #0B192C 1px);
      background-size: 40px 40px;
      background-position: 0 0, 20px 20px;
    }
    .pulse-green {
      box-shadow: 0 0 0 0 rgba(0, 210, 106, 0.7);
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 210, 106, 0.7); }
      70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 210, 106, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 210, 106, 0); }
    }
    .coupon-ticket {
      background: linear-gradient(135deg, #0f2744 0%, #0B192C 100%);
      position: relative;
    }
    .coupon-ticket::before, .coupon-ticket::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 24px;
      height: 24px;
      background-color: #F8FAFC;
      border-radius: 50%;
      transform: translateY(-50%);
    }
    .coupon-ticket::before { left: -12px; }
    .coupon-ticket::after { right: -12px; }