/* roulang page: index */
@import url('/assets/css/vendor/7d0d260fcb-all.min.css');

    :root {
      --primary-orange: #E94E1B;
      --secondary-yellow: #FFD100;
      --dark-slate: #1E1E1E;
      --deep-black: #121212;
      --warm-white: #F4F4F0;
      --text-body: #2D2D2D;
      --text-muted: #6B6B6B;
      --border-light: rgba(233, 78, 27, 0.25);
      --shadow-hard: 4px 4px 0px 0px rgba(233, 78, 27, 0.35);
      --shadow-hover: 6px 6px 0px 0px rgba(233, 78, 27, 0.55);
      --radius-card: 1rem;
      --radius-button: 0.5rem;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background-color: var(--warm-white);
      color: var(--text-body);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, .font-impact {
      font-family: 'Impact', 'Arial Black', 'Inter', system-ui, sans-serif;
      letter-spacing: 0.02em;
      font-weight: 800;
    }

    .pixel-bg {
      background-image: radial-gradient(circle, rgba(233,78,27,0.08) 1px, transparent 1px);
      background-size: 20px 20px;
    }

    .btn-primary {
      background-color: var(--primary-orange);
      color: white;
      font-weight: 700;
      border-radius: var(--radius-button);
      padding: 0.75rem 2rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.15);
      border: 2px solid transparent;
      letter-spacing: 0.5px;
    }

    .btn-primary:hover {
      background-color: var(--secondary-yellow);
      color: #121212;
      box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
      transform: scale(1.03);
    }

    .card-hard {
      background: white;
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-hard);
      border: 1px solid var(--border-light);
      transition: all 0.25s ease;
    }

    .card-hard:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
    }

    .nav-link {
      color: #E0E0E0;
      font-weight: 600;
      padding: 0.5rem 1rem;
      border-radius: 0.4rem;
      transition: 0.2s;
      position: relative;
    }

    .nav-link:hover {
      color: var(--secondary-yellow);
    }

    .active-nav {
      color: var(--secondary-yellow) !important;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 2px;
    }

    .faq-question.active-faq {
      color: var(--primary-orange);
      background-color: #F4F4F0;
    }

    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.8rem !important;
        line-height: 1.2;
      }
      .asymmetric-grid {
        grid-template-columns: 1fr !important;
      }
    }

    .data-badge {
      background: white;
      border-radius: 1.5rem;
      padding: 1.8rem 1rem;
      box-shadow: var(--shadow-hard);
      border: 1px dashed rgba(233,78,27,0.5);
      text-align: center;
      transition: 0.2s;
    }
    .data-badge:hover {
      box-shadow: var(--shadow-hover);
    }
    .data-number {
      font-family: 'Courier New', 'Impact', monospace;
      font-weight: 900;
      color: var(--secondary-yellow);
      font-size: 3rem;
      line-height: 1;
      text-shadow: 2px 2px 0px #E94E1B;
    }