/* ========================================
   MODERN MOBILE DESIGN SYSTEM
   Less box-heavy, more varied layouts
   ======================================== */

@media (max-width: 991px) {
  /* Remove heavy box shadows on mobile */
  .mission-card,
  .value-card,
  .feature-card,
  .article-card,
  .founder-card,
  .contact-info,
  .ai-card {
    box-shadow: none !important;
    border: 1px solid #e9ecef !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 1.25rem 0 !important;
    margin-bottom: 1.5rem !important;
  }

  /* Mission/Value Cards - Minimal with left accent */
  .mission-card,
  .value-card {
    border-left: 3px solid #1E2875 !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e9ecef !important;
    padding-left: 1rem !important;
    padding-right: 0 !important;
    background: transparent !important;
  }

  .mission-card .icon,
  .value-card .icon {
    font-size: 1.75rem !important;
    color: #1E2875 !important;
    margin-bottom: 0.75rem !important;
  }

  .mission-card h3,
  .value-card h3 {
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
  }

  .mission-card p,
  .value-card p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #495057 !important;
    margin-bottom: 0 !important;
  }

  /* Founder Card - Subtle background, no heavy border */
  .founder-card {
    background: #f8f9fa !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1.5rem !important;
    margin: 1rem 0 !important;
  }

  .founder-title h3 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .founder-content {
    font-size: 0.875rem !important;
    line-height: 1.7 !important;
  }

  /* Contact Info - Minimal list style */
  .contact-info {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .contact-info .info-item {
    border-bottom: 1px solid #e9ecef !important;
    padding: 1rem 0 !important;
    margin-bottom: 0 !important;
  }

  .contact-info .info-item:last-child {
    border-bottom: none !important;
  }

  .contact-info .info-item .icon {
    color: #1E2875 !important;
    font-size: 1.1rem !important;
  }

  /* Stats Section - Clean grid, no boxes */
  .stats-section {
    background: #1E2875 !important;
  }

  .stat-item {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 !important;
    text-align: center !important;
  }

  .stat-item .number {
    font-size: 2rem !important;
    color: #bfa76a !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
  }

  .stat-item .label {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* Article Cards - Minimal with image focus */
  .article-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
  }

  .article-card .article-image {
    border-radius: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  .article-card .article-content {
    padding: 0 !important;
  }

  .article-card .article-title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
  }

  /* Feature Cards (Home page) - Modern semi-transparent design */
  .hero-cards .feature-card,
  .hero-cards .feature-card.consultation,
  .hero-cards .feature-card.premium {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: auto !important;
    transition: all 0.3s ease !important;
  }

  .hero-cards .feature-card:hover,
  .hero-cards .feature-card.consultation:hover,
  .hero-cards .feature-card.premium:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  }

  .hero-cards .feature-card .icon-wrapper,
  .hero-cards .feature-card.consultation .icon-wrapper,
  .hero-cards .feature-card.premium .icon-wrapper {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border-radius: 12px !important;
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
  }

  .hero-cards .feature-card:hover .icon-wrapper,
  .hero-cards .feature-card.consultation:hover .icon-wrapper,
  .hero-cards .feature-card.premium:hover .icon-wrapper {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1) !important;
  }

  .hero-cards .feature-card .icon-wrapper i,
  .hero-cards .feature-card.consultation .icon-wrapper i,
  .hero-cards .feature-card.premium .icon-wrapper i {
    color: #ffffff !important;
    font-size: 1.75rem !important;
  }

  .hero-cards .feature-card h3,
  .hero-cards .feature-card.consultation h3,
  .hero-cards .feature-card.premium h3 {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  .hero-cards .feature-card .description,
  .hero-cards .feature-card.consultation .description,
  .hero-cards .feature-card.premium .description {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }

  .hero-cards .feature-card .btn,
  .hero-cards .feature-card.consultation .btn,
  .hero-cards .feature-card.premium .btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
    min-height: 44px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
  }

  .hero-cards .feature-card .btn:hover,
  .hero-cards .feature-card.consultation .btn:hover,
  .hero-cards .feature-card.premium .btn:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
  }

  .hero-cards .feature-card .btn:active,
  .hero-cards .feature-card.consultation .btn:active,
  .hero-cards .feature-card.premium .btn:active {
    transform: translateY(0) !important;
  }

  /* Ensure images are visible */
  img,
  .article-image img,
  .article-card img,
  .hero-section img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
  }

  .article-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Ensure hero section background image is visible on mobile */
  .hero-section {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    z-index: 1;
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  .hero-cards {
    position: relative;
    z-index: 3;
  }

  /* AI Cards - Subtle background */
  .ai-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.25rem !important;
  }

  /* Hide Latest Market News section on mobile */
  /* Target the column that contains the news card in Market Intelligence section */
  #ai-market-intelligence .row.g-4 > .col-lg-6:first-child,
  .ai-section .row.g-4 > .col-lg-6:first-child {
    display: none !important;
  }

  /* Make the second column (Market Drivers) full width on mobile */
  #ai-market-intelligence .row.g-4 > .col-lg-6:last-child,
  .ai-section .row.g-4 > .col-lg-6:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Section Titles - More space, less heavy */
  .section-title {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 2px solid #1E2875 !important;
    display: inline-block !important;
  }

  .section-subtitle {
    font-size: 0.9rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 2rem !important;
    color: #6c757d !important;
  }

  /* Remove hover effects on mobile */
  .mission-card:hover,
  .value-card:hover,
  .article-card:hover,
  .feature-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 768px) {
  /* Even more minimal on smaller tablets */
  .mission-card,
  .value-card {
    padding-left: 0.875rem !important;
    border-left-width: 2px !important;
  }

  .section-title {
    font-size: 1.5rem !important;
    border-bottom-width: 1px !important;
  }

  .stat-item .number {
    font-size: 1.75rem !important;
  }
}

@media (max-width: 480px) {
  /* Ultra-minimal on mobile */
  .mission-card,
  .value-card {
    padding: 1rem 0 1rem 0.75rem !important;
    border-left-width: 2px !important;
    margin-bottom: 1.25rem !important;
  }

  /* Feature cards keep their modern semi-transparent style on mobile */
  .hero-cards .feature-card,
  .hero-cards .feature-card.consultation,
  .hero-cards .feature-card.premium {
    padding: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .hero-cards .feature-card .icon-wrapper,
  .hero-cards .feature-card.consultation .icon-wrapper,
  .hero-cards .feature-card.premium .icon-wrapper {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 0.875rem !important;
    background: rgba(255, 255, 255, 0.2) !important;
  }

  .hero-cards .feature-card .icon-wrapper i,
  .hero-cards .feature-card.consultation .icon-wrapper i,
  .hero-cards .feature-card.premium .icon-wrapper i {
    font-size: 1.5rem !important;
    color: #ffffff !important;
  }

  .hero-cards .feature-card h3,
  .hero-cards .feature-card.consultation h3,
  .hero-cards .feature-card.premium h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.625rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  }

  .hero-cards .feature-card .description,
  .hero-cards .feature-card.consultation .description,
  .hero-cards .feature-card.premium .description {
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  }

  .hero-cards .feature-card .btn,
  .hero-cards .feature-card.consultation .btn,
  .hero-cards .feature-card.premium .btn {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
  }

  .mission-card .icon,
  .value-card .icon {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .mission-card h3,
  .value-card h3 {
    font-size: 1.05rem !important;
  }

  .mission-card p,
  .value-card p {
    font-size: 0.8rem !important;
  }

  .founder-card {
    padding: 1.25rem !important;
    margin: 0.75rem 0 !important;
  }

  .section-title {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
  }

  .section-subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 1.5rem !important;
  }

  .stat-item .number {
    font-size: 1.5rem !important;
    color: #bfa76a !important;
  }

  .stat-item .label {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .contact-info .info-item {
    padding: 0.875rem 0 !important;
  }

  /* Reduce section padding */
  .about-section {
    padding: 25px 0 !important;
  }

  .founder-section {
    padding: 25px 0 !important;
  }

  .stats-section {
    padding: 25px 0 !important;
  }

  /* Ensure Latest Market News is hidden on small mobile too */
  #ai-market-intelligence .row.g-4 > .col-lg-6:first-child,
  .ai-section .row.g-4 > .col-lg-6:first-child {
    display: none !important;
  }

  #ai-market-intelligence .row.g-4 > .col-lg-6:last-child,
  .ai-section .row.g-4 > .col-lg-6:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}