/* roulang page: index */
:root {
        --color-primary: #0F172A;
        --color-accent: #0284C7;
        --color-accent-hover: #0369A1;
        --color-telemetry-green: #10B981;
        --color-telemetry-amber: #F59E0B;
        --radius-box: 10px;
      }
      body {
        margin: 0;
        padding: 0;
        background-color: #F8FAFC;
        color: #1E293B;
        overflow-x: hidden;
      }
      .telematics-grid {
        background-size: 36px 36px;
        background-image: 
          linear-gradient(to right, rgba(2, 132, 199, 0.05) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(2, 132, 199, 0.05) 1px, transparent 1px);
      }
      .ring-progress-circle {
        transition: stroke-dashoffset 1s ease-in-out;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
      }
      .card-industrial {
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .card-industrial:hover {
        border-color: #CBD5E1;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
        transform: translateY(-2px);
      }
      .btn-glow {
        box-shadow: 0 0 15px rgba(2, 132, 199, 0.35);
      }
      .btn-glow:hover {
        box-shadow: 0 0 25px rgba(2, 132, 199, 0.55);
      }
      .faq-content {
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
      }