/* ========== RESET & BASE ========== */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: linear-gradient(135deg, #f8faf9 0%, #e8f3ef 100%);
       color: #1a2f2a;
       line-height: 1.6;
       min-height: 100vh;
       display: flex;
       flex-direction: column;
   }

   /* ========== HEADER ========== */
   .assessment-header {
       background: #f9f9f9;
       padding: 0;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
       position: sticky;
       top: 0;
       z-index: 1000;
   }

   .header-inner {
       max-width: 1400px;
       margin: 0 auto;
       padding: 16px 48px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 48px;
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 0;
       flex-shrink: 0;
   }

   .brand-logo {
       height: 60px;
       width: auto;
   }

   .header-nav {
       display: flex;
       gap: 48px;
       align-items: center;
       flex: 1;
       justify-content: center;
   }

   .nav-link {
       color: #16a085;
       text-decoration: none;
       font-size: 16px;
       font-weight: 600;
       transition: all 0.3s ease;
       position: relative;
       padding-bottom: 8px;
   }

   .nav-link:hover {
       color: #0f7a66;
       border-bottom: 3px solid #2c3e50;
   }

   .header-cta {
       background: #16a085;
       color: #ffffff;
       padding: 12px 28px;
       border-radius: 6px;
       text-decoration: none;
       font-weight: 600;
       font-size: 15px;
       transition: all 0.3s ease;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       white-space: nowrap;
       flex-shrink: 0;
   }

   .header-cta:hover {
       background: #0f7a66;
       transform: translateY(-1px);
   }

   /* ========== MAIN CONTENT ========== */
   .assessment-main {
       flex: 1;
       max-width: 1280px;
       margin: 0 auto;
       padding: 80px 48px;
       width: 100%;
   }

   .content-wrapper {
       text-align: center;
       margin-bottom: 64px;
   }

   .badge {
       display: inline-block;
       background: rgba(30, 57, 50, 0.08);
       color: #1e3932;
       padding: 8px 20px;
       border-radius: 50px;
       font-size: 12px;
       font-weight: 600;
       letter-spacing: 1px;
       text-transform: uppercase;
       margin-bottom: 24px;
   }

   .main-title {
       font-size: 48px;
       font-weight: 800;
       margin-bottom: 20px;
       color: #0a1512;
       line-height: 1.2;
       background: linear-gradient(135deg, #0a1512 0%, #1e3932 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .main-subtitle {
       font-size: 18px;
       color: #5a6f68;
       max-width: 680px;
       margin: 0 auto 24px;
       line-height: 1.7;
   }

   .stats-row {
       display: flex;
       justify-content: center;
       gap: 48px;
       margin-top: 40px;
   }

   .stat-item {
       text-align: center;
   }

   .stat-number {
       font-size: 32px;
       font-weight: 700;
       color: #1e3932;
       display: block;
   }

   .stat-label {
       font-size: 13px;
       color: #7a8f88;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-top: 4px;
   }

   /* ========== CARDS ========== */
   .assessment-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 32px;
       margin-top: 48px;
       width: 100%;
   }

   .assessment-card {
       background: #ffffff;
       border-radius: 20px;
       padding: 40px;
       text-align: left;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
       border: 2px solid transparent;
       display: flex;
       flex-direction: column;
   }

   .assessment-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 4px;
       background: linear-gradient(90deg, #1e3932, #16a085);
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .assessment-card.active {
       text-decoration: none;
       color: inherit;
       cursor: pointer;
   }

   .assessment-card.active:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
       border-color: #1e3932;
   }

   .assessment-card.active:hover::before {
       opacity: 1;
   }

   .card-icon {
       width: 56px;
       height: 56px;
       background: linear-gradient(135deg, #1e3932 0%, #16a085 100%);
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
       margin-bottom: 24px;
       box-shadow: 0 4px 16px rgba(22, 160, 133, 0.2);
   }

   .assessment-card h2 {
       font-size: 24px;
       margin-bottom: 16px;
       color: #0a1512;
       font-weight: 700;
   }

   .assessment-card p {
       font-size: 15px;
       color: #5a6f68;
       line-height: 1.7;
       margin-bottom: 24px;
   }

   .card-features {
       list-style: none;
       margin: 24px 0;
   }

   .card-features li {
       font-size: 14px;
       color: #5a6f68;
       padding: 8px 0;
       padding-left: 28px;
       position: relative;
   }

   .card-features li::before {
       content: '✓';
       position: absolute;
       left: 0;
       color: #1e3932;
       font-weight: 700;
   }

   .card-action {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-weight: 600;
       color: #1e3932;
       font-size: 15px;
       margin-top: 16px;
       transition: gap 0.3s ease;
   }

   .assessment-card.active:hover .card-action {
       gap: 12px;
   }

   .assessment-card.disabled {
       background: linear-gradient(135deg, #f7f9f8 0%, #f0f4f2 100%);
       opacity: 0.7;
       cursor: not-allowed;
   }

   .assessment-card.disabled .card-icon {
       background: #d0dcd7;
   }

   .assessment-card.disabled h2,
   .assessment-card.disabled p {
       color: #9aaca6;
   }

   .card-action.muted {
       color: #9aaca6;
   }


   /* ========== QUICK SCAN DIFFERENTIATION ========== */

   /* Targets the Trader and Investor Quick Scan cards */
   .assessment-card[href*="-quick"]:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 48px rgba(185, 28, 28, 0.15);
       /* Subtle Red Shadow */
       border-color: #B91C1C !important;
       /* Professional Alert Red */
   }

   /* Changes the top decorative bar to red on hover */
   .assessment-card[href*="-quick"]:hover::before {
       background: linear-gradient(90deg, #B91C1C, #EF4444) !important;
       opacity: 1;
   }

   /* Changes the "Start Quick Scan" text and arrow color on hover */
   .assessment-card[href*="-quick"]:hover .card-action {
       color: #B91C1C;
   }



   /* ========== FOOTER ========== */
   .assessment-footer {
       background: linear-gradient(135deg, #0f1f1b 0%, #1a2f2a 100%);
       color: rgba(255, 255, 255, 0.7);
       padding: 60px 48px 32px;
       margin-top: auto;
   }

   .footer-content {
       max-width: 1400px;
       margin: 0 auto;
   }

   .footer-grid {
       display: grid;
       grid-template-columns: 2fr 1fr 1fr;
       gap: 80px;
       margin-bottom: 48px;
   }

   .footer-brand {
       display: flex;
       flex-direction: column;
       gap: 24px;
   }

   .footer-brand .brand-name {
       font-size: 28px;
       font-weight: 800;
       letter-spacing: 1px;
       color: #ffffff;
   }

   .footer-description {
       font-size: 15px;
       line-height: 1.7;
       color: rgba(255, 255, 255, 0.6);
       max-width: 380px;
   }

   .footer-section h3 {
       font-size: 15px;
       font-weight: 700;
       margin-bottom: 20px;
       color: #ffffff;
   }

   .footer-links {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .footer-links a {
       color: rgba(255, 255, 255, 0.6);
       text-decoration: none;
       font-size: 14px;
       transition: all 0.3s ease;
       display: inline-block;
   }

   .footer-links a:hover {
       color: #16a085;
       transform: translateX(4px);
   }

   .contact-info {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .contact-item {
       color: rgba(255, 255, 255, 0.6);
       font-size: 14px;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .contact-item a {
       color: rgba(255, 255, 255, 0.6);
       text-decoration: none;
       transition: color 0.3s ease;
   }

   .contact-item a:hover {
       color: #16a085;
   }

   .social-links {
       display: flex;
       gap: 12px;
       margin-top: 24px;
   }

   .social-link {
       width: 44px;
       height: 44px;
       background: rgba(255, 255, 255, 0.08);
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }

   .social-link img {
       width: 20px;
       height: 20px;
       filter: brightness(0) invert(0.7);
       transition: filter 0.3s ease;
   }

   .social-link:hover {
       background: rgba(22, 160, 133, 0.2);
       transform: translateY(-2px);
   }

   .social-link:hover img {
       filter: brightness(0) invert(1);
   }

   .footer-bottom {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       padding-top: 32px;
       text-align: center;
       font-size: 14px;
       color: rgba(255, 255, 255, 0.5);
   }

   .badge-mini {
       align-self: flex-start;
       display: inline-block;
       padding: 4px 12px;
       background: rgba(0, 160, 133, 0.1);
       color: #16a085;
       font-size: 11px;
       font-weight: 800;
       text-transform: uppercase;
       border-radius: 4px;
       margin-bottom: 12px;
       letter-spacing: 0.5px;
       border: 1px solid rgba(22, 160, 133, 0.2);
   }


   /* ========== RESPONSIVE ========== */

   /* Tablet & Small Desktop (Switches to stacked cards) */
   @media (max-width: 1024px) {
       .assessment-main {
           padding: 40px 20px;
           /* Ensures the container never exceeds the screen width */
           width: 100vw;
           max-width: 100%;
           overflow-x: hidden;
       }

       .assessment-grid {
           grid-template-columns: 1fr !important;
           /* Centers the stacked cards */
           max-width: 500px;
           margin: 0 auto;
           gap: 24px;
       }
   }

   /* Mobile Devices */
   @media (max-width: 640px) {
       .header-inner {
           padding: 12px 16px;
           gap: 12px;
       }

       .brand-logo {
           height: 40px;
       }

       .main-title {
           font-size: 24px;
           /* Forces long text to wrap instead of pushing the page wide */
           white-space: normal;
           overflow-wrap: break-word;
       }

       .main-subtitle {
           font-size: 14px;
           padding: 0 10px;
       }

       .assessment-card {
           padding: 24px;
           /* Prevents the card from having a fixed width larger than the phone */
           width: auto;
           min-width: 0;
           margin: 0 10px;
       }

       .assessment-card h2 {
           font-size: 18px;
           word-wrap: break-word;
       }

       .card-features li {
           font-size: 13px;
           /* Ensures list items wrap correctly */
           white-space: normal;
       }
   }

   /* Fix for horizontal scroll issues */
   html,
   body {
       max-width: 100%;
       overflow-x: hidden;
       position: relative;
   }




   /* ========== HIDE NAV ON INDEX (MOBILE ONLY) ========== */

   /* Targets phones and tablets */
   @media (max-width: 1024px) {
       .header-nav {
           display: none !important;
       }

       /* Hides common mobile menu buttons */
       .mobile-nav-toggle,
       .hamburger-menu,
       .menu-btn {
           display: none !important;
       }

       .header-inner {
           justify-content: space-between;
           gap: 20px;
           padding: 12px 16px;
       }

       .header-cta {
           padding: 8px 14px;
           font-size: 11px;
       }
   }

   /* Desktop: Ensures nav is visible and centered */
   @media (min-width: 1025px) {
       .header-nav {
           display: flex !important;
           gap: 48px;
           align-items: center;
           flex: 1;
           justify-content: center;
       }
   }