/* =========================================
       1. THE FINANCIAL FORTRESS PALETTE
       ========================================= */
    :root{
      --bg: #f3f4f6;           /* Clean Light Grey */
      --surface: #ffffff;      /* Pure White */
      --navy: #0f172a;         /* Deep Navy (Trust) */
      --header-blue: #4f46e5;  /* The specific blue from your screenshot */
      --blue-muted: #334155;   /* Softer text */
      --orange: #ea580c;       /* Action Orange */
      --green: #16a34a;        /* Profit Green */
      --red: #dc2626;          /* Risk Red */
      --border: #e2e8f0;       /* Subtle borders */
    }
    
    /* Base Reset */
    body{ margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg) !important; color: var(--navy) !important; line-height: 1.5; }
    
    /* Layout Utilities */
    .wrap{ max-width: 1100px; margin: 0 auto; padding: 20px; }
    .section-white { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 0; width: 100%; }
    
    /* DARK SECTION UTILITIES */
    .section-dark { background: var(--navy); color: white; padding: 80px 0; width: 100%; }
    .section-dark h2 { color: white !important; }
    .section-dark p { color: #94a3b8 !important; }

    /* =========================================
       2. HEADER STYLES
       ========================================= */
    header{ padding: 20px 0; margin-bottom: 40px; display: flex; align-items: center; }
    .logo{ font-weight: 900; font-size: 22px; color: var(--navy); letter-spacing: -0.5px; display:flex; align-items:center; gap:8px; font-style: italic;}
    .logo-icon{ color: var(--orange); } 

    /* =========================================
       3. HERO SECTION STYLES
       ========================================= */
    .hero-grid{ display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; text-align: center; }
    

    h1{ font-size: clamp(32px, 5vw, 48px); line-height: 1.1; margin: 0 0 20px; color: var(--navy); letter-spacing: -0.02em; font-weight: 800; }
    p.lead{ font-size: 18px; color: var(--blue-muted); margin: 0 0 30px; /*max-width: 480px; */}

    /* Buttons */
    .btn-primary{ 
        display: inline-flex; align-items: center; justify-content: center; 
        background: var(--orange); color: white; font-weight: 700; font-size: 18px; 
        padding: 16px 32px; border-radius: 8px; text-decoration: none; 
        transition: transform 0.1s; box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
    }
    .btn-primary:active{ transform: translateY(1px); }
    
    .trust-triggers{ margin-top: 16px; font-size: 13px; color: var(--blue-muted); display: flex; gap: 15px; align-items: center; font-weight: 500; justify-content: center;}
    .check{ color: var(--green); font-weight: bold; margin-right: 4px; }

    /* Dashboard Mockup Visual */
    .dashboard-mockup{
        background: #f1f5f9; border: 1px solid var(--border); border-radius: 12px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        overflow: hidden; display: flex; min-height: 350px;
        transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); transition: transform 0.3s;
    }
    .dashboard-mockup:hover{ transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }

    /* Hero Footer Features */
    .features-strip{ margin-top: 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; border-top: 1px solid var(--border); padding-top: 40px; margin-bottom: 60px;}
    .feature-item{ display: flex; gap: 12px; align-items: flex-start; }
    .icon-box{ width: 40px; height: 40px; background: #e0f2fe; color: #0284c7; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
    .feat-text strong{ display: block; color: var(--navy); font-size: 16px; margin-bottom: 4px; }
    .feat-text span{ font-size: 14px; color: var(--blue-muted); }

    /* =========================================
       4. BELOW THE FOLD (Why Switch)
       ========================================= */
    .why-switch-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 40px; }
    .pillar-card{ background: #f8fafc; padding: 30px; border-radius: 12px; border: 1px solid var(--border); display: flex; flex-direction: column; }
    .pillar-icon{ width: 50px; height: 50px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 20px; }
    .pillar-card h3{ font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; margin-top: 0; }

    /* =========================================
       5. DARK FEATURES SECTION
       ========================================= */
    .dark-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-top: 50px; }
    .dark-card{ background: rgba(255,255,255,0.05); padding: 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); transition: background 0.2s; }
    .dark-card:hover{ background: rgba(255,255,255,0.08); }
    .dark-card h3{ color: white; font-size: 18px; margin-bottom: 8px; font-weight: 700; }
    .dark-card p{ font-size: 14px; line-height: 1.6; margin: 0; }
    .dark-icon{ color: var(--orange); margin-bottom: 15px; }

    /* =========================================
       6. FAQ STYLES
       ========================================= */
    .faq-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-top: 40px; text-align: left; }
    .faq-item h4{ font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
    .faq-item p{ color: var(--blue-muted); font-size: 15px; line-height: 1.6; }

 /* =========================================
       7. FORM
    ========================================= */


.signup-container-modal {
  margin: 0 auto;
  width: 100%;
}

.form-control {
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 96%;
}

.signup-container-modal .form-group label {
  margin-bottom: 0px !important;
}

.signup-container-modal .form-row {
  margin-bottom: 0.5rem;
  margin-left: 0px;
  margin-right: 0px;
}

.signup-container-modal .form-row .error {
  font-size: 0.8em;
  color: var(--bg);
}

.signup-container-modal button.btn-primary {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
  color: #fff !important;
  background-color: var(--orange);
  border-color: var(--orange);
  width: 100%;
  margin: 0.8rem 0;
}

.signup-container-modal button.btn-primary:hover {
  background-color: var(--orange);
}

.modal-body .signup-container-modal button.btn-primary {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
  color: #fff !important;
  background-color: var(--green);
  border-color: var(--green);
  width: 100%;
  margin: 0.8rem 0;
}

.modal-body .signup-container-modal button.btn-primary:hover {
  background-color: var(--orange);
  border-color: var(--orange);
}

.signup-container-modal .form-group .form-control {
  height: auto !important;
  padding: 0.3rem;
  font-size: 1rem;
  line-height: 1.3;
  border-radius: 0.3rem;
}

.input-group #idPhone-error {
  display: block;
  width: 100%;
}

#idPhone-error {
  display: block;
  width: 100%;
}

.input-group-prepend {
  display: flex;
}

.modal-body .g-recaptcha {
  margin-left: 0;
}


    /* FOOTER */
    footer{ background: var(--bg); padding: 40px 0; text-align: center; font-size: 13px; color: #94a3b8; border-top: 1px solid var(--border); }
    footer a{ color: var(--blue-muted) !important; text-decoration: none; margin: 0 10px; font-weight: 500; }
    .modal { color: var(--navy) !important;}
    .modal-body h4{ font-size: 18px; font-weight: 700; color: var(--navy) !important; margin-bottom: 10px; }
    .modal-body a{ color: var(--blue-muted) !important; font-size: 15px; }

    @media (min-width: 900px){
        .hero-grid{ grid-template-columns: 1fr 1fr; gap: 60px; text-align: start;}
        .hero-copy{ text-align: left; }
        .trust-triggers{ margin-top: 16px; font-size: 13px; color: var(--blue-muted); display: flex; gap: 15px; align-items: center; font-weight: 500; justify-content: start;}
        .hero-visual{ order: 2; } 
    }