/* ===== BENEFIT CARDS ===== */
    .benefits-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .benefit-card {
      padding: 26px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .benefit-card:hover {
      border-color: rgba(240, 160, 48, 0.3);
      box-shadow: 0 4px 20px rgba(240, 160, 48, 0.06);
    }
    .benefit-icon {
      width: 36px; height: 36px; margin-bottom: 16px;
      border-radius: 8px;
      background: var(--purple-glow);
      display: flex; align-items: center; justify-content: center;
    }
    .benefit-icon svg { width: 18px; height: 18px; color: var(--purple); }
    .benefit-card h3 {
      font-size: 16px; font-weight: 600; color: var(--text-heading);
      margin-bottom: 8px; line-height: 1.35;
    }
    .benefit-card p { font-size: 14px; color: #64748B; line-height: 1.65; }

    .curr-cta-row {
      margin-top: 44px;
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--amber); color: var(--amber-text);
      padding: 14px 28px; border-radius: 8px;
      font-size: 15px; font-weight: 600;
      border: none; cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }
    .btn-primary:hover { background: var(--amber-hover); transform: translateY(-1px); }
    .btn-secondary {
      font-size: 15px; font-weight: 500; color: var(--amber);
      border-bottom: 1px solid transparent;
      background: none; padding: 0;
      transition: border-color 0.2s;
    }
    a.btn-secondary, button.btn-secondary { cursor: pointer; border-top: none; border-left: none; border-right: none; }
    .btn-secondary:hover { border-bottom-color: var(--amber); }

    
/* ===== TESTIMONIALS ===== */
    .testimonial-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .testimonial-card {
      background: #fff; border: 1px solid var(--border); border-radius: 10px;
      padding: 26px; display: flex; flex-direction: column; gap: 18px;
    }
    .quote-mark { width: 26px; height: 26px; color: var(--amber); opacity: 0.55; }
    .testimonial-text {
      font-size: 14.5px; color: #374151; line-height: 1.7; font-style: italic;
      flex-grow: 1;
    }
    .testimonial-author { display: flex; align-items: center; gap: 12px; }
    .author-avatar {
      width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
      background: var(--purple-glow); color: var(--purple);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 13px;
    }
    .author-name { font-size: 14px; font-weight: 600; color: var(--text-heading); }
    .author-role { font-size: 12px; color: #94A3B8; }

    
/* ===== MODAL ===== */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(13, 17, 23, 0.62);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      display: none; align-items: center; justify-content: center;
      padding: 20px;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: #fff; border-radius: 14px;
      width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
      padding: 32px 30px; position: relative;
      box-shadow: 0 24px 64px rgba(0,0,0,0.32);
    }
    .modal-close {
      position: absolute; top: 14px; right: 14px;
      width: 32px; height: 32px; border-radius: 6px;
      background: none; border: none; cursor: pointer;
      font-size: 22px; line-height: 1; color: #94A3B8;
      transition: background 0.2s, color 0.2s;
    }
    .modal-close:hover { background: #F1F5F9; color: #334155; }
    .modal-tabs {
      display: flex; gap: 4px; margin-bottom: 24px;
      border-bottom: 1px solid var(--border);
    }
    .modal-tab {
      flex: 1; background: none; border: none; cursor: pointer;
      padding: 10px 6px 12px; font-size: 12.5px; font-weight: 600;
      color: #94A3B8; border-bottom: 2px solid transparent;
      transition: color 0.2s, border-color 0.2s;
    }
    .modal-tab.active { color: var(--text-heading); border-bottom-color: var(--amber); }
    .modal-panel { display: none; }
    .modal-panel.active { display: block; }
    .modal-panel h3 { font-size: 19px; font-weight: 700; color: var(--text-heading); margin-bottom: 8px; }
    .modal-desc { font-size: 13.5px; color: #64748B; margin-bottom: 22px; line-height: 1.6; }
    .google-btn {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 13px; background: #fff; border: 1px solid var(--border); border-radius: 8px;
      font-size: 14px; font-weight: 600; color: #334155; cursor: pointer;
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    .google-btn:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-color: #CBD5E1; }
    .modal-panel .form-field { margin-bottom: 14px; }
    .modal-panel .form-field label {
      display: block; font-size: 13px; font-weight: 500; color: var(--text-heading); margin-bottom: 6px;
    }
    .modal-panel input, .modal-panel select {
      width: 100%; padding: 12px 14px;
      border: 1px solid var(--border); border-radius: 8px;
      font-size: 14px; font-family: inherit; color: var(--text-heading);
      background: #FAFAFA; outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .modal-panel select { appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
      padding-right: 36px;
    }
    .modal-panel input::placeholder { color: #9CA3AF; }
    .modal-panel input:focus, .modal-panel select:focus {
      border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 160, 48, 0.1);
    }
    .modal-submit {
      width: 100%; padding: 14px; margin-top: 6px;
      background: var(--amber); color: var(--amber-text);
      border: none; border-radius: 8px;
      font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
      transition: background 0.2s;
    }
    .modal-submit:hover { background: var(--amber-hover); }
    .modal-error {
      display: none; font-size: 13px; color: #DA3633; margin-bottom: 14px;
      background: rgba(218,54,51,0.08); border: 1px solid rgba(218,54,51,0.2);
      padding: 10px 12px; border-radius: 6px;
    }
    .modal-error.show { display: block; }
    .modal-state { text-align: center; padding: 8px 0 4px; }
    .modal-state svg { width: 44px; height: 44px; color: var(--green); margin: 0 auto 14px; }
    .modal-state h3 { margin-bottom: 10px; }
    .modal-state p { font-size: 14px; color: #64748B; line-height: 1.6; margin-bottom: 10px; }
    .modal-state .btn-secondary { display: inline-block; margin-top: 6px; font-weight: 600; }
    .spinner {
      width: 30px; height: 30px; margin: 4px auto 16px;
      border: 3px solid #E2E8F0; border-top-color: var(--amber);
      border-radius: 50%; animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }