/* Mobile Optimization CSS for Property Defect Detection Website v1.0.128 */

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
  /* General mobile improvements */
  body {
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Prevent horizontal scrolling globally */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure all elements respect container width */
  * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  
  /* Prevent text overflow */
  p, h1, h2, h3, h4, h5, h6, span, div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Additional mobile fixes for defect scanner page */
  .demo-section {
    margin-top: 1rem !important;
    padding: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Ensure all demo section content is properly constrained */
  .demo-section * {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix step cards layout */
  .demo-steps-cards {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .demo-step-card {
    min-width: auto !important;
    max-width: 90% !important;
    flex: 1 1 auto !important;
    padding: 0.8rem 0.6rem !important;
    margin: 0 auto 0.5rem auto !important;
    width: 90% !important;
  }

  /* Hide dots on mobile */
  .demo-step-dots {
    display: none !important;
  }

  /* Fix demo card */
  .demo-card {
    max-width: 85% !important;
    margin: 0 auto 1.5rem auto !important;
    padding: 1rem 0.6rem !important;
    width: 85% !important;
  }

  /* Fix upload row */
  #demo-upload-row {
    flex-direction: column !important;
    gap: 0.8rem !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Fix buttons */
  .demo-analyze-btn,
  #demo-upload-label,
  button[style*="background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%)"] {
    width: 100% !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
    max-width: 100% !important;
  }

  /* Fix image containers */
  #example-photo-container,
  #demo-preview-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 1rem auto !important;
  }

  #example-photo,
  #demo-preview {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
  }

  /* Fix canvas */
  #detection-canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
  }

  /* Fix form elements */
  form {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix all buttons */
  button {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Fix labels */
  label {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Fix any remaining overflow issues */
  .demo-section > * {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Ensure text doesn't overflow */
  .demo-title,
  .demo-subtitle,
  .demo-card * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* Fix any inline styles that might cause overflow */
  [style*="width"] {
    max-width: 100% !important;
  }

  [style*="min-width"] {
    min-width: auto !important;
  }

  /* Force all elements to respect container */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix floating action button positioning */
  .mobile-menu-toggle {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 100000 !important;
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }

  /* Ensure no elements extend beyond viewport */
  body > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Fix any remaining overflow issues with specific elements */
  .demo-section section,
  .demo-section div,
  .demo-section form {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Override any inline styles that might cause overflow */
  [style*="width:400px"],
  [style*="width: 400px"],
  [style*="min-width:160px"],
  [style*="min-width: 160px"],
  [style*="max-width:400px"],
  [style*="max-width: 400px"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
  }

  /* Fix any elements with fixed positioning that might cause overflow */
  [style*="position: fixed"]:not(#hcai-chatbot-btn):not(#hcai-chatbot-window),
  [style*="position:fixed"]:not(#hcai-chatbot-btn):not(#hcai-chatbot-window) {
    max-width: 100vw !important;
    right: 10px !important;
    left: auto !important;
  }

  /* Ensure all text elements wrap properly */
  [style*="white-space"],
  [style*="white-space: nowrap"] {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Specific fix for demo section container */
  section[style*="background:#181a2a"][style*="border-radius:22px"][style*="box-shadow:0 4px 32px #7b5cff11"][style*="margin-top:2.5em"][style*="margin-bottom:2.5em"][style*="padding:2.5em 1.5em"][style*="max-width:1200px"][style*="width:100%"] {
    margin: 1rem auto !important;
    padding: 0.8rem !important;
    max-width: 85% !important;
    width: 85% !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(123, 92, 255, 0.1) !important;
    overflow-x: hidden !important;
  }

  /* Fix any remaining container issues */
  .demo-section > div {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Mobile Navigation Styles */
  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 100000 !important;
    width: 50px !important;
    height: 50px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(123, 92, 255, 0.9) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 50px !important;
    min-height: 50px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    box-shadow: 0 2px 10px rgba(123, 92, 255, 0.3) !important;
    text-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }

  .mobile-menu-toggle span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background: #fff !important;
    margin: 3px 0 !important;
    transition: 0.3s !important;
    border-radius: 2px !important;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px) !important;
  }

  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px) !important;
  }

  .mobile-nav {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(10, 12, 26, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    transition: left 0.3s ease !important;
    padding: 1.5rem !important;
    overflow-y: auto !important;
  }

  .mobile-nav.active {
    left: 0 !important;
  }

  /* Mobile Navigation Close Button */
  .mobile-nav-close {
    position: absolute !important;
    top: 0.8rem !important;
    right: 0.8rem !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 0.4rem !important;
    border-radius: 50% !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 100000 !important;
    background: rgba(123, 92, 255, 0.1) !important;
    border: 1px solid rgba(123, 92, 255, 0.3) !important;
  }

  .mobile-nav-close:hover {
    background: rgba(123, 92, 255, 0.2) !important;
    color: #7b5cff !important;
    transform: scale(1.1) !important;
  }

  .mobile-nav-close:active {
    transform: scale(0.95) !important;
  }

  /* Mobile Navigation Header */
  .mobile-nav-header {
    position: relative !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    padding-top: 2.5rem !important;
  }

  .mobile-nav-title {
    color: #fff !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.3rem 0 !important;
  }

  .mobile-nav-subtitle {
    color: #bcb8d3 !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
  }

  /* Mobile Navigation Section */
  .mobile-nav-section {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  .mobile-nav-section-title {
    color: #7b5cff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.8rem !important;
    text-align: center !important;
  }

  .mobile-nav-divider {
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(123, 92, 255, 0.3) 50%, transparent 100%) !important;
    margin: 1rem 0 !important;
  }

  .mobile-nav-footer {
    margin-top: auto !important;
    text-align: center !important;
    padding-top: 1.5rem !important;
  }

  .mobile-nav-footer-text {
    color: #bcb8d3 !important;
    font-size: 0.7rem !important;
    margin: 0 !important;
  }

  .mobile-nav a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.8rem 0 !important;
    margin: 0.3rem 0 !important;
    text-align: center !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(123, 92, 255, 0.2) !important;
    transition: color 0.3s ease !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .mobile-nav a:hover {
    color: #7b5cff !important;
    background: rgba(123, 92, 255, 0.1) !important;
  }

  .mobile-nav a:active {
    color: #7b5cff !important;
    background: rgba(123, 92, 255, 0.2) !important;
  }

  /* Ensure all links in mobile nav are properly styled */
  .mobile-nav .nav-link {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.8rem 0 !important;
    margin: 0.3rem 0 !important;
    text-align: center !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(123, 92, 255, 0.2) !important;
    transition: color 0.3s ease !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .mobile-nav .nav-link:hover {
    color: #7b5cff !important;
    background: rgba(123, 92, 255, 0.1) !important;
  }

  .mobile-nav .nav-link:active {
    color: #7b5cff !important;
    background: rgba(123, 92, 255, 0.2) !important;
  }

  /* Additional mobile nav link styling for better formatting */
  .mobile-nav-link {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0.8rem 0 !important;
    margin: 0.3rem 0 !important;
    text-align: center !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(123, 92, 255, 0.2) !important;
    transition: color 0.3s ease !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .mobile-nav-link:hover {
    color: #7b5cff !important;
    background: rgba(123, 92, 255, 0.1) !important;
  }

  .mobile-nav-link:active {
    color: #7b5cff !important;
    background: rgba(123, 92, 255, 0.2) !important;
  }

  /* Ensure mobile nav section has proper spacing */
  .mobile-nav-section {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }

  /* Ensure mobile nav section title is properly styled */
  .mobile-nav-section-title {
    color: #7b5cff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.8rem !important;
    text-align: center !important;
    padding: 0.4rem 0 !important;
  }

  /* Test page specific styles */
  .test-section {
    padding: 2rem 1rem !important;
    margin-top: 80px !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .test-instructions {
    background: #181a2a !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    border: 1px solid rgba(123, 92, 255, 0.2) !important;
  }

  .test-instructions h2 {
    color: #fff !important;
    font-size: 1.3rem !important;
    margin-bottom: 1rem !important;
  }

  .test-instructions ol {
    color: #bcb8d3 !important;
    line-height: 1.6 !important;
  }

  .test-instructions ul {
    margin: 0.5rem 0 1rem 1rem !important;
  }

  .test-notes {
    background: #23244a !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    border: 1px solid rgba(123, 92, 255, 0.2) !important;
  }

  .test-notes h3 {
    color: #fff !important;
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }

  .test-notes ul {
    color: #bcb8d3 !important;
    line-height: 1.5 !important;
  }

  .test-links {
    text-align: center !important;
    margin: 2rem 0 !important;
  }

  .test-links .btn {
    margin: 0.5rem !important;
    display: inline-block !important;
  }

  .mobile-nav-actions {
    margin-top: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    width: 100% !important;
  }

  .mobile-nav-btn {
    background: linear-gradient(90deg, #7b5cff 0%, #4f8cff 100%) !important;
    color: #fff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    transition: transform 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(123, 92, 255, 0.3) !important;
  }

  .mobile-nav-btn:hover {
    transform: translateY(-2px) !important;
  }

  .mobile-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(10, 12, 26, 0.5) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .mobile-nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide desktop navigation on mobile */
  .nav-center {
    display: none !important;
  }

  .header-right .nav-btn-group {
    display: none !important;
  }

  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: flex !important;
  }

  /* AI Defect Scanner Page Mobile Optimizations */
  .demo-section {
    margin-top: 1rem !important;
    padding: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .demo-title {
    font-size: 2rem !important;
    margin-bottom: 0.8rem !important;
    text-align: center !important;
  }

  .demo-subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  .demo-steps-cards {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .demo-step-card {
    min-width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 1rem 0.8rem !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .demo-step-dots {
    display: none !important;
  }

  .demo-card {
    max-width: 90% !important;
    margin: 0 auto 1.5rem auto !important;
    padding: 1.2rem 0.8rem !important;
    width: 90% !important;
  }

  .demo-upload-label {
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
  }

  #demo-upload-row {
    flex-direction: column !important;
    gap: 0.8rem !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .demo-analyze-btn {
    width: 100% !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
    max-width: 100% !important;
  }

  /* Enhanced Mobile Formatting for AI Defect Scanner Sections */
  
  /* Main demo section container */
  body .demo-section,
  body section[style*="background:#181a2a"][style*="border-radius:22px"][style*="box-shadow:0 4px 32px #7b5cff11"][style*="margin-top:2.5em"][style*="margin-bottom:2.5em"][style*="padding:2.5em 1.5em"][style*="max-width:1200px"][style*="width:100%"] {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding: 1.5rem 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(123, 92, 255, 0.15) !important;
  }

  /* Demo title */
  body .demo-title,
  body div[style*="font-size:2.5rem"][style*="font-weight:900"][style*="background:linear-gradient(90deg, #fff 0%, #7b5cff 100%)"][style*="-webkit-background-clip: text"][style*="-webkit-text-fill-color: transparent"][style*="background-clip: text"][style*="text-fill-color: transparent"][style*="margin-bottom:1rem"][style*="text-align:center"] {
    font-size: 1.8rem !important;
    margin-bottom: 0.8rem !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  /* Demo subtitle */
  body .demo-subtitle,
  body div[style*="color:#bcb8d3"][style*="font-size:1.15rem"][style*="margin-bottom:2.5rem"][style*="text-align:center"] {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
    line-height: 1.4 !important;
    padding: 0 0.5rem !important;
  }

  /* Step cards container */
  body .demo-steps-cards,
  body div[style*="display:flex"][style*="justify-content:center"][style*="align-items:stretch"][style*="gap:1.1rem"][style*="margin-bottom:2.7rem"][style*="flex-wrap:wrap"][style*="position:relative"] {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.5rem !important;
  }

  /* Individual step cards */
  body .demo-step-card,
  body div[style*="background:#181a2a"][style*="padding:1.1rem 0.7rem 1.0rem 0.7rem"][style*="border-radius:18px"][style*="box-shadow:0 8px 32px rgba(60,60,120,0.13)"][style*="text-align:center"][style*="min-width:160px"][style*="max-width:210px"][style*="flex:1 1 160px"][style*="position:relative"] {
    min-width: auto !important;
    max-width: 85% !important;
    flex: 1 1 auto !important;
    padding: 0.6rem 0.4rem !important;
    margin: 0 auto 0.5rem auto !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(60, 60, 120, 0.1) !important;
  }

  /* Step card icons */
  body div[style*="font-size:2.1rem"][style*="margin-bottom:0.7rem"] {
    font-size: 1.8rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Step card titles */
  body div[style*="font-weight:800"][style*="font-size:1.08rem"][style*="color:#fff"][style*="margin-bottom:0.3rem"] {
    font-size: 1rem !important;
    margin-bottom: 0.3rem !important;
    font-weight: 700 !important;
  }

  /* Step card descriptions */
  body div[style*="color:#bcb8d3"][style*="font-size:0.93rem"] {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  /* Step dots (hide on mobile) */
  body div[style*="align-self:center"][style*="display:flex"][style*="flex-direction:row"][style*="justify-content:center"][style*="align-items:center"] {
    display: none !important;
  }

  /* Main demo card */
  body div[style*="max-width:520px"][style*="margin:0 auto 2rem auto"][style*="padding:2.5rem 2rem 2.2rem 2rem"] {
    max-width: 85% !important;
    padding: 1rem 0.6rem !important;
    margin: 0 auto 1.5rem auto !important;
    border-radius: 12px !important;
  }

  /* Upload title */
  body div[style*="font-weight:800"][style*="font-size:1.18rem"][style*="color:#fff"][style*="margin-bottom:1.2rem"][style*="text-align:center"] {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Uploads indicator */
  body div[style*="display:none"][style*="background:#23244a"][style*="border-radius:12px"][style*="padding:1rem"][style*="margin-bottom:1.5rem"][style*="text-align:center"][style*="border:2px solid #7b5cff"] {
    padding: 0.8rem !important;
    margin-bottom: 1rem !important;
    border-radius: 8px !important;
  }

  body div[style*="color:#7b5cff"][style*="font-weight:700"][style*="font-size:1.1rem"][style*="margin-bottom:0.3rem"] {
    font-size: 1rem !important;
  }

  body div[style*="color:#fff"][style*="font-weight:800"][style*="font-size:1.5rem"] {
    font-size: 1.3rem !important;
  }

  body div[style*="color:#bcb8d3"][style*="font-size:0.9rem"][style*="margin-top:0.3rem"] {
    font-size: 0.8rem !important;
  }

  /* Example photo container */
  body div[style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"][style*="max-width:320px"][style*="margin:0 auto 1.1rem auto"] {
    max-width: 100% !important;
    margin: 0 auto 1rem auto !important;
    padding: 0 0.5rem !important;
  }

  /* Example photo */
  body img[style*="max-width:98%"][style*="max-height:260px"][style*="object-fit:contain"][style*="border-radius:12px"][style*="box-shadow:0 4px 18px #7b5cff22"][style*="margin-bottom:0.5rem"] {
    max-width: 100% !important;
    max-height: 200px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(123, 92, 255, 0.2) !important;
  }

  /* Example photo caption */
  body div[style*="color:#bcb8d3"][style*="font-size:0.96rem"][style*="text-align:center"] {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin-top: 0.5rem !important;
  }

  /* Preview container */
  body div[style*="display:none"][style*="flex-direction:column"][style*="align-items:center"][style*="max-width:400px"][style*="margin:0 auto 1.1rem auto"][style*="position:relative"][style*="width:400px"][style*="height:300px"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 1rem auto !important;
  }

  /* Preview image */
  body img[style*="display:block"][style*="width:400px"][style*="height:300px"][style*="object-fit:cover"][style*="border-radius:12px"][style*="box-shadow:0 4px 18px #7b5cff22"][style*="margin-bottom:0.5rem"][style*="position:relative"][style*="z-index:1"] {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(123, 92, 255, 0.2) !important;
  }

  /* Detection canvas */
  body canvas[style*="position:absolute"][style*="left:0"][style*="top:0"][style*="z-index:2"][style*="width:400px"][style*="height:300px"][style*="pointer-events:none"][style*="display:none"] {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
  }

  /* Form */
  body form[style*="margin:0"][style*="padding:0"][style*="border:none"][style*="background:none"] {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Upload row */
  body div[style*="display: flex"][style*="align-items: center"][style*="gap: 1.2rem"][style*="justify-content: center"][style*="width: 100%"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    gap: 0.8rem !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Upload label */
  body label[style*="font-weight: 700"][style*="display: flex"][style*="align-items: center"][style*="justify-content: center"][style*="gap: 0.7em"][style*="box-sizing: border-box"] {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* Camera button */
  body button[style*="background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%)"][style*="box-shadow: 0 4px 20px rgba(67, 233, 123, 0.3)"] {
    width: 100% !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    border-radius: 8px !important;
  }

  /* Auth message - REMOVED CONFLICTING RULES */

  /* Training consent container */
  body div[style*="margin-top: 1.5rem"][style*="padding: 1rem"][style*="background: #23244a"][style*="border-radius: 12px"][style*="border: 2px solid #7b5cff44"][style*="text-align: center"] {
    margin-top: 1rem !important;
    padding: 0.8rem !important;
    border-radius: 8px !important;
  }

  body div[style*="display: flex"][style*="align-items: flex-start"][style*="gap: 0.8rem"][style*="justify-content: center"] {
    gap: 0.6rem !important;
    align-items: flex-start !important;
  }

  body input[style*="margin-top: 0.2rem"][style*="transform: scale(1.2)"][style*="accent-color: #7b5cff"] {
    transform: scale(1.1) !important;
    margin-top: 0.1rem !important;
  }

  body div[style*="flex: 1"][style*="text-align: center"] {
    text-align: left !important;
  }

  body div[style*="color: #fff"][style*="font-weight: 700"][style*="font-size: 0.95rem"][style*="margin-bottom: 0.3rem"] {
    font-size: 0.9rem !important;
    margin-bottom: 0.2rem !important;
  }

  body div[style*="color: #bcb8d3"][style*="font-size: 0.9rem"][style*="line-height: 1.4"] {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }

  body span[style*="color: #7b5cff"][style*="font-weight: 600"] {
    font-weight: 600 !important;
  }

  /* Demo result */
  body div[style*="display:none"] {
    margin-top: 1rem !important;
    padding: 0.8rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
  }

  /* Download report button */
  body button[style*="display:none"][style*="margin:1.5rem auto 0 auto"] {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    margin: 1rem auto 0 auto !important;
    border-radius: 8px !important;
  }

  /* Request review button */
  body button[style*="display:none"][style*="margin:1rem auto 0 auto"][style*="background:linear-gradient(90deg, #ff6b35 0%, #f7931e 100%)"][style*="box-shadow:0 4px 20px rgba(255, 107, 53, 0.3)"] {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    margin: 0.8rem auto 0 auto !important;
    border-radius: 8px !important;
  }

  /* Retry button */
  body button[style*="display:none"][style*="margin:1rem auto 0 auto"][style*="background:linear-gradient(90deg, #ff6b6b 0%, #ff8e8e 100%)"][style*="box-shadow:0 4px 20px rgba(255, 107, 107, 0.3)"] {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    margin: 0.8rem auto 0 auto !important;
    border-radius: 8px !important;
  }

  /* Feedback widget */
  body div[style*="display:none"][style*="max-width: 480px"][style*="margin: 2.5em auto 0 auto"][style*="background: #181a2a"][style*="border-radius: 18px"][style*="box-shadow: 0 4px 24px #7b5cff22"][style*="padding: 2em 1.5em"][style*="color: #fff"][style*="text-align: left"] {
    max-width: 100% !important;
    margin: 1.5rem auto 0 auto !important;
    padding: 1.5rem 1rem !important;
    border-radius: 12px !important;
  }

  body h3[style*="font-size: 1.18em"][style*="font-weight: 800"][style*="margin-bottom: 1.1em"][style*="color: #fff"] {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
  }

  body div[style*="display: flex"][style*="gap: 1.5em"][style*="align-items: center"][style*="margin-bottom: 1.2em"] {
    flex-direction: column !important;
    gap: 0.8rem !important;
    align-items: stretch !important;
  }

  body button[style*="background: linear-gradient(90deg, #43e97b 0%, #7b5cff 100%)"][style*="color: #fff"][style*="border: none"][style*="border-radius: 10px"][style*="font-size: 1.2em"][style*="padding: 0.6em 1.5em"][style*="font-weight: 700"][style*="cursor: pointer"][style*="box-shadow"] {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    border-radius: 8px !important;
  }

  body button[style*="background: linear-gradient(90deg, #ff4d4d 0%, #ff6b6b 100%)"][style*="color: #fff"][style*="border: none"][style*="border-radius: 10px"][style*="font-size: 1.2em"][style*="padding: 0.6em 1.5em"][style*="font-weight: 700"][style*="cursor: pointer"][style*="box-shadow"] {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    border-radius: 8px !important;
  }

  body div[style*="display: none"][style*="margin-bottom: 1.2em"] {
    margin-bottom: 1rem !important;
  }

  body label[style*="font-size: 1em"][style*="color: #bcb8d3"][style*="margin-bottom: 0.5em"][style*="display: block"] {
    font-size: 0.9rem !important;
    margin-bottom: 0.4rem !important;
  }

  body textarea[style*="width: 100%"][style*="border-radius: 10px"][style*="border: 1.5px solid #7b5cff44"][style*="background: #23244a"][style*="color: #fff"][style*="font-size: 1em"][style*="padding: 0.7em"][style*="margin-bottom: 0.7em"] {
    padding: 0.8rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    min-height: 80px !important;
  }

  body div[style*="color:#ff4d4d"][style*="font-size:0.98em"][style*="margin-bottom:0.7em"][style*="display:none"] {
    font-size: 0.85rem !important;
  }

  body button[style*="background: linear-gradient(90deg, #7b5cff 0%, #4f8cff 100%)"][style*="color: #fff"][style*="border: none"][style*="border-radius: 10px"][style*="font-size: 1em"][style*="padding: 0.6em 1.5em"][style*="font-weight: 700"][style*="cursor: pointer"][style*="box-shadow"] {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    border-radius: 8px !important;
  }

  body div[style*="display: none"][style*="color: #43e97b"][style*="font-weight: 700"][style*="font-size: 1.08em"][style*="margin-top: 1em"] {
    font-size: 1rem !important;
    margin-top: 0.8rem !important;
  }

  /* Trust badges */
  body div[style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"][style*="gap:0.7em"][style*="margin-top:1.5em"] {
    margin-top: 1rem !important;
    gap: 0.5rem !important;
  }

  body div[style*="display:flex"][style*="gap:1.5em"][style*="align-items:center"][style*="justify-content:center"] {
    gap: 1rem !important;
    flex-wrap: wrap !important;
  }

  body div[style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"] {
    min-width: 60px !important;
  }

  body span[style*="font-size:1.7em"] {
    font-size: 1.5rem !important;
  }

  body span[style*="color:#bcb8d3"][style*="font-size:0.93em"] {
    font-size: 0.8rem !important;
  }

  body div[style*="display:flex"][style*="align-items:center"][style*="gap:0.6em"][style*="margin-top:0.7em"] {
    margin-top: 0.5rem !important;
    gap: 0.4rem !important;
  }

  body img[style*="height:1.7em"][style*="vertical-align:middle"] {
    height: 1.4rem !important;
  }

  body span[style*="color:#bcb8d3"][style*="font-size:1.01em"][style*="font-weight:700"] {
    font-size: 0.9rem !important;
  }

  /* General button improvements */
  body button[style*="background:linear-gradient"],
  body .demo-analyze-btn,
  body .download-btn {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    border-radius: 8px !important;
    margin-bottom: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Spacing improvements */
  body div[style*="margin-bottom"] {
    margin-bottom: 1rem !important;
  }

  /* General section improvements */
  body .demo-section * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body .demo-section > div {
    margin-bottom: 1rem !important;
  }

  body .demo-section > div:last-child {
    margin-bottom: 0 !important;
  }

  /* Remove line breaks in subtitle on mobile */
  body .demo-subtitle br {
    display: none !important;
  }

  /* Specific chatbot fixes to prevent elongation */
  #hcai-chatbot-btn {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    border-radius: 50% !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 10000 !important;
    background: #7b5cff !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(123, 92, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: 60px !important;
  }

  #hcai-chatbot-btn svg {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }

  #hcai-chatbot-window {
    position: fixed !important;
    bottom: 90px !important;
    right: 20px !important;
    width: 320px !important;
    max-width: calc(100vw - 40px) !important;
    height: 400px !important;
    max-height: calc(100vh - 120px) !important;
    z-index: 10001 !important;
    background: #181a2a !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #7b5cff44 !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #hcai-chatbot-window.open {
    display: flex !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  body .demo-section,
  body section[style*="background:#181a2a"][style*="border-radius:22px"][style*="box-shadow:0 4px 32px #7b5cff11"][style*="margin-top:2.5em"][style*="margin-bottom:2.5em"][style*="padding:2.5em 1.5em"][style*="max-width:1200px"][style*="width:100%"] {
    padding: 1rem 0.8rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  body .demo-title,
  body div[style*="font-size:2.5rem"][style*="font-weight:900"][style*="background:linear-gradient(90deg, #fff 0%, #7b5cff 100%)"][style*="-webkit-background-clip: text"][style*="-webkit-text-fill-color: transparent"][style*="background-clip: text"][style*="text-fill-color: transparent"][style*="margin-bottom:1rem"][style*="text-align:center"] {
    font-size: 1.6rem !important;
    margin-bottom: 0.6rem !important;
  }

  body .demo-subtitle,
  body div[style*="color:#bcb8d3"][style*="font-size:1.15rem"][style*="margin-bottom:2.5rem"][style*="text-align:center"] {
    font-size: 0.9rem !important;
    margin-bottom: 1.2rem !important;
  }

  body .demo-card,
  body div[style*="max-width:520px"][style*="margin:0 auto 2rem auto"][style*="padding:2.5rem 2rem 2.2rem 2rem"] {
    padding: 1.2rem 0.8rem !important;
    margin: 0 auto 1.2rem auto !important;
  }

  body .demo-analyze-btn,
  body button[style*="background:linear-gradient"],
  body .download-btn {
    padding: 0.9rem 1.2rem !important;
    font-size: 0.95rem !important;
    min-height: 44px !important;
  }

  body .defect-card,
  body .feedback-card {
    padding: 1rem 0.8rem !important;
    margin-bottom: 1rem !important;
  }

  body .feedback-btn {
    padding: 0.8rem 1.2rem !important;
    font-size: 0.9rem !important;
    min-height: 44px !important;
  }

  body #review-modal[style] > div,
  body #success-modal[style] > div {
    padding: 1.5rem 1rem !important;
    margin: 1rem !important;
    max-width: calc(100% - 2rem) !important;
    width: calc(100% - 2rem) !important;
  }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  body .demo-section,
  body section[style*="background:#181a2a"][style*="border-radius:22px"][style*="box-shadow:0 4px 32px #7b5cff11"][style*="margin-top:2.5em"][style*="margin-bottom:2.5em"][style*="padding:2.5em 1.5em"][style*="max-width:1200px"][style*="width:100%"] {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding: 1rem 1rem !important;
  }

  body .demo-title,
  body div[style*="font-size:2.5rem"][style*="font-weight:900"][style*="background:linear-gradient(90deg, #fff 0%, #7b5cff 100%)"][style*="-webkit-background-clip: text"][style*="-webkit-text-fill-color: transparent"][style*="background-clip: text"][style*="text-fill-color: transparent"][style*="margin-bottom:1rem"][style*="text-align:center"] {
    font-size: 1.4rem !important;
    margin-bottom: 0.5rem !important;
  }

  body .demo-subtitle,
  body div[style*="color:#bcb8d3"][style*="font-size:1.15rem"][style*="margin-bottom:2.5rem"][style*="text-align:center"] {
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
  }

  body .demo-steps-cards,
  body div[style*="display:flex"][style*="justify-content:center"][style*="align-items:stretch"][style*="gap:1.1rem"][style*="margin-bottom:2.7rem"][style*="flex-wrap:wrap"][style*="position:relative"] {
    flex-direction: row !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
  }

  body .demo-step-card,
  body div[style*="background:#181a2a"][style*="padding:1.1rem 0.7rem 1.0rem 0.7rem"][style*="border-radius:18px"][style*="box-shadow:0 8px 32px rgba(60,60,120,0.13)"][style*="text-align:center"][style*="min-width:160px"][style*="max-width:210px"][style*="flex:1 1 160px"][style*="position:relative"] {
    padding: 0.8rem 0.5rem !important;
    min-width: auto !important;
    flex: 1 1 auto !important;
  }

  body .demo-step-dots,
  body div[style*="align-self:center"][style*="display:flex"][style*="flex-direction:row"][style*="justify-content:center"][style*="align-items:center"] {
    display: none !important;
  }
}

/* Standardized content spacing for all pages */
.hero-section,
.pricing-section,
.testimonials-section,
.ai-service-section,
.contact-section,
.blog-section,
.account-section,
.login-section,
.signup-section,
.admin-section,
.cms-section {
  margin-top: 80px !important;
  padding: 2rem 1rem !important;
}

/* AI Service page specific mobile optimization */
.ai-service-section {
  margin-top: 40px !important;
  padding: 1rem !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* Pricing page specific mobile optimization */
.pricing-section {
  margin-top: 60px !important;
  padding: 2rem 1rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.pricing-title {
  font-size: 2.2rem !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
  color: #fff !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  padding: 0 0.5rem !important;
}

.pricing-subtitle {
  color: #bcb8d3 !important;
  font-size: 1.1rem !important;
  text-align: center !important;
  max-width: 100% !important;
  margin-bottom: 2.5rem !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  padding: 0 1rem !important;
}

.pricing-cards {
  display: flex !important;
  gap: 1.5rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
  width: 100% !important;
  align-items: stretch !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding: 0 0.5rem !important;
}

  .pricing-card {
    background: #181a2a !important;
    border-radius: 20px !important;
    padding: 1.5rem 1.2rem !important;
    text-align: center !important;
    box-shadow: 0 8px 32px rgba(123,92,255,0.15) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 2px solid #7b5cff !important;
    position: relative !important;
    min-width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 550px !important;
  }

.pricing-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(123,92,255,0.05) 0%, rgba(79,140,255,0.05) 100%) !important;
  border-radius: 18px !important;
  pointer-events: none !important;
}

.plan-title {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #7b5cff !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  position: relative !important;
  z-index: 1 !important;
}

.plan-price {
  font-size: 2.3rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin-bottom: 0.3rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  position: relative !important;
  z-index: 1 !important;
}

.plan-price small {
  font-size: 1rem !important;
  color: #bcb8d3 !important;
  font-weight: 600 !important;
}

.plan-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 !important;
  text-align: left !important;
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
}

.plan-features li {
  padding: 0.4rem 0 !important;
  color: #e0e3f5 !important;
  font-size: 0.95rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  position: relative !important;
  padding-left: 1.8rem !important;
  line-height: 1.3 !important;
  margin-bottom: 0.3rem !important;
}

.plan-features li:before {
  content: "✓" !important;
  color: #4f8cff !important;
  position: absolute !important;
  left: 0 !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
}

.plan-btn {
  width: 100% !important;
  max-width: 250px !important;
  margin: 1.5rem auto 0 auto !important;
  padding: 0.9rem 1.8rem !important;
  background: linear-gradient(90deg, #7b5cff 0%, #4f8cff 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(123,92,255,0.3) !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
}

.plan-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(123,92,255,0.4) !important;
}

.plan-sub {
  color: #43e97b !important;
  font-size: 0.9rem !important;
  font-style: italic !important;
  font-weight: 500 !important;
  margin: 0.2rem 0 0.5rem 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.3em !important;
}

.plan-sub span {
  font-size: 1.05rem !important;
}

.plan-login-msg {
  margin-top: 1rem !important;
  font-size: 0.9rem !important;
  color: #ff4d4d !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Cost comparison section mobile optimization */
.cost-comparison-section {
  margin-top: 4rem !important;
  padding: 2.5rem 1rem !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  background: linear-gradient(90deg, #181a2a 60%, #23244a 100%) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(123,92,255,0.1) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.cost-comparison-title {
  font-size: 1.8rem !important;
  text-align: center !important;
  margin-bottom: 2.5rem !important;
  color: #fff !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  padding: 0 0.5rem !important;
}

.cost-comparison-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  align-items: center !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
  padding: 0 0.5rem !important;
}

.cost-comparison-card {
  background: #23244a !important;
  border-radius: 16px !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 2px solid rgba(123,92,255,0.3) !important;
  position: relative !important;
  box-shadow: 0 4px 16px rgba(123,92,255,0.1) !important;
  min-width: auto !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.cost-comparison-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(123,92,255,0.05) 0%, rgba(79,140,255,0.05) 100%) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
}

.cost-label {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
}

.cost-price {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
}

.ai-card .cost-price {
  color: #43e97b !important;
}

.human-card .cost-price {
  color: #ff6b6b !important;
}

.cost-desc {
  font-size: 1rem !important;
  color: #bcb8d3 !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
  padding: 0 0.5rem !important;
}

.cost-comparison-vs {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #7b5cff !important;
  margin: 1rem 0 !important;
  text-align: center !important;
  background: rgba(123,92,255,0.1) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 20px !important;
  border: 2px solid rgba(123,92,255,0.3) !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.cost-comparison-savings {
  text-align: center !important;
  margin-top: 2.5rem !important;
  font-size: 1.2rem !important;
  color: #fff !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  padding: 0 1rem !important;
}

.savings-highlight {
  color: #43e97b !important;
  font-weight: 900 !important;
  font-size: 1.25em !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Contact page specific mobile optimization */
.contact-hero {
  margin-top: 40px !important;
  padding: 1.5rem 1rem !important;
  overflow-x: hidden !important;
  width: calc(100% - 2rem) !important;
  max-width: calc(100vw - 2rem) !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #0a0c1a 0%, #181a2a 100%) !important;
  border-radius: 16px !important;
  margin: 40px 1rem 1rem 1rem !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}

.contact-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at 30% 20%, rgba(123, 92, 255, 0.1) 0%, transparent 50%) !important,
              radial-gradient(circle at 70% 80%, rgba(79, 140, 255, 0.1) 0%, transparent 50%) !important;
  pointer-events: none !important;
  border-radius: 16px !important;
}

.contact-hero-content {
  text-align: center !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 0.5rem !important;
}

.contact-hero-title {
  font-size: 1.8rem !important;
  color: #fff !important;
  margin-bottom: 0.8rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  line-height: 1.2 !important;
}

.contact-hero-subtitle {
  font-size: 0.95rem !important;
  color: #bcb8d3 !important;
  line-height: 1.4 !important;
  margin-bottom: 1.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.contact-sections {
  padding: 1.5rem 1rem !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.contact-form-section {
  margin-bottom: 2rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 1.5rem !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #181a2a 0%, #1a1d2e 100%) !important;
  border: 1px solid rgba(123, 92, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.contact-form-title {
  font-size: 1.4rem !important;
  color: #fff !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.form-group {
  margin-bottom: 1.2rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.form-label {
  display: block !important;
  margin-bottom: 0.4rem !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.form-input,
.form-select,
.form-textarea {
  width: 100% !important;
  padding: 0.7rem !important;
  border: 1px solid rgba(123, 92, 255, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(15, 15, 35, 0.8) !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none !important;
  border-color: #7b5cff !important;
  box-shadow: 0 0 0 2px rgba(123, 92, 255, 0.2) !important;
  background: rgba(15, 15, 35, 0.9) !important;
}

.form-textarea {
  min-height: 100px !important;
  resize: vertical !important;
}

.submit-btn {
  width: 100% !important;
  max-width: 180px !important;
  margin: 0 auto !important;
  display: block !important;
  padding: 0.7rem 1.2rem !important;
  background: linear-gradient(135deg, #7b5cff 0%, #4f8cff 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(123, 92, 255, 0.3) !important;
}

.submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(123, 92, 255, 0.4) !important;
}

.submit-btn:active {
  transform: translateY(0) !important;
}

.contact-info-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.contact-card {
  background: #181a2a !important;
  border-radius: 14px !important;
  padding: 1.2rem !important;
  text-align: center !important;
  box-shadow: 0 4px 16px rgba(60,60,120,0.1) !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.contact-card-title {
  font-size: 1.1rem !important;
  color: #fff !important;
  margin-bottom: 0.8rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
}

.contact-card-icon {
  font-size: 1.3rem !important;
}

.contact-card-content {
  font-size: 0.85rem !important;
  color: #bcb8d3 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.8rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.contact-link {
  color: #7b5cff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* FAQ section mobile optimization */
.faq-section {
  padding: 1.5rem 1rem !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: calc(100vw - 3rem) !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #181a2a 0%, #1a1d2e 100%) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(123, 92, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.faq-container {
  max-width: 100% !important;
  padding: 0 0.5rem !important;
  box-sizing: border-box !important;
}

.faq-title {
  font-size: 1.6rem !important;
  margin-bottom: 1.5rem !important;
  text-align: center !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  letter-spacing: 0.5px !important;
}

.faq-item {
  margin-bottom: 1rem !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(123, 92, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.faq-item:hover {
  background: rgba(123, 92, 255, 0.05) !important;
  border-color: rgba(123, 92, 255, 0.2) !important;
  box-shadow: 0 8px 24px rgba(123, 92, 255, 0.15) !important;
  transform: translateY(-2px) !important;
}

.faq-question {
  padding: 1rem !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.faq-question::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(123, 92, 255, 0.1) 0%, rgba(79, 140, 255, 0.1) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: -1 !important;
}

.faq-question:hover::before {
  opacity: 1 !important;
}

.faq-toggle {
  color: #7b5cff !important;
  font-size: 0.8rem !important;
  transition: transform 0.3s ease !important;
  font-weight: 700 !important;
}

.faq-question.active .faq-toggle {
  transform: rotate(180deg) !important;
  color: #4f8cff !important;
}

.faq-answer {
  padding: 0 1rem 1rem 1rem !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(15, 15, 35, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-top: 1px solid rgba(123, 92, 255, 0.1) !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.faq-answer.active {
  padding: 0 1rem 1rem 1rem !important;
  max-height: 200px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Testimonials page specific mobile optimization */
.testimonials-section {
  margin-top: -70px !important;
  padding: 2rem 1rem !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.testimonials-hero {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 2rem 1rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

.hero-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.hero-image {
  width: 180px !important;
  height: 180px !important;
  margin-bottom: 1rem !important;
  border-radius: 12px !important;
}

.hero-text-block {
  max-width: 100% !important;
  width: 100% !important;
  padding: 1.5rem 1rem !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.testimonials-title {
  font-size: 2rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.testimonials-intro {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.testimonials-scroll-row {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 1rem 0.5rem !important;
  margin: 0 0 1.5rem 0 !important;
  box-sizing: border-box !important;
}

.testimonials-scroll-inner {
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Keep the original animation */
  animation: scrollTestimonials 20s linear infinite !important;
  will-change: transform !important;
}

/* Ensure the scroll animation works on mobile */
@keyframes scrollTestimonials {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.testimonial-card {
  min-width: 280px !important;
  max-width: 300px !important;
  width: 100% !important;
  padding: 1.5rem 1rem !important;
  border-radius: 12px !important;
  height: auto !important;
  min-height: 280px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.testimonial-name {
  font-size: 1rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.2rem !important;
}

.testimonial-role {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.8rem !important;
}

.testimonial-text {
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.testimonial-stars {
  font-size: 1.1rem !important;
  margin: 0.5rem 0 0 0 !important;
}

.cta-section {
  max-width: 100% !important;
  width: 100% !important;
  padding: 1rem !important;
  margin: 1rem 0 2rem 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Add space between testimonials content and footer */
.account-main {
  margin-bottom: 4rem !important;
}

.cta-title {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
  margin-bottom: 0.8rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.cta-btn {
  font-size: 1rem !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 8px !important;
  max-width: 100% !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* Blog page specific mobile optimization */
.blog-container {
  margin-top: 80px !important;
  padding: 2rem 1rem !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

.blog-header {
  text-align: center !important;
  margin-bottom: 2rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.blog-title {
  font-size: 2rem !important;
  color: #fff !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.blog-subtitle {
  font-size: 1rem !important;
  color: #bcb8d3 !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.blog-filters {
  margin-bottom: 2rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.search-box {
  position: relative !important;
  margin-bottom: 1rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.search-icon {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #bcb8d3 !important;
  font-size: 1rem !important;
}

.search-input {
  width: 100% !important;
  padding: 0.75rem 1rem 0.75rem 2.5rem !important;
  border: 1px solid #23244a !important;
  border-radius: 8px !important;
  background: #181a2a !important;
  color: #fff !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.category-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.category-btn {
  padding: 0.5rem 1rem !important;
  border: 1px solid #23244a !important;
  border-radius: 20px !important;
  background: #181a2a !important;
  color: #bcb8d3 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: nowrap !important;
}

.category-btn.active {
  background: #7b5cff !important;
  color: #fff !important;
  border-color: #7b5cff !important;
}

.blog-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.blog-post {
  background: #181a2a !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(60,60,120,0.1) !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.blog-post-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.blog-post-excerpt {
  font-size: 0.9rem !important;
  color: #bcb8d3 !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.blog-post-meta {
  font-size: 0.8rem !important;
  color: #7b5cff !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 2rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.pagination-btn {
  padding: 0.5rem 1rem !important;
  border: 1px solid #23244a !important;
  border-radius: 8px !important;
  background: #181a2a !important;
  color: #bcb8d3 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.pagination-btn.active {
  background: #7b5cff !important;
  color: #fff !important;
  border-color: #7b5cff !important;
}

.ai-service-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.ai-service-section .hero-card {
  background: #181a2a !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px #7b5cff22 !important;
  padding: 2rem 1.5rem !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto 2rem auto !important;
  color: #fff !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ai-service-section .hero-title-text {
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.ai-service-section .hero-subtitle {
  font-size: 1rem !important;
  text-align: center !important;
  color: #bcb8d3 !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.ai-service-section .features-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 2rem auto 3rem auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ai-service-section .feature-card {
  background: #181a2a !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  text-align: center !important;
  box-shadow: 0 4px 16px rgba(60,60,120,0.1) !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ai-service-section .feature-icon {
  font-size: 2rem !important;
  margin-bottom: 1rem !important;
}

.ai-service-section .feature-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.ai-service-section .feature-description {
  font-size: 0.9rem !important;
  color: #bcb8d3 !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.ai-service-section .ai-showcase-container {
  margin-top: 2rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ai-service-section .ai-showcase-title {
  font-size: 1.5rem !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
  color: #fff !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.ai-service-section .how-it-works-visual-demo {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 2rem 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ai-service-section .how-it-works-visual-demo img {
  max-width: 280px !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px #7b5cff22 !important;
  box-sizing: border-box !important;
}

.ai-service-section .ai-showcase-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  margin-top: 2rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ai-service-section .ai-showcase-step {
  background: #181a2a !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  text-align: center !important;
  box-shadow: 0 4px 16px rgba(60,60,120,0.1) !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ai-service-section .ai-showcase-step h3 {
  font-size: 1.2rem !important;
  color: #fff !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.ai-service-section .ai-showcase-description {
  font-size: 0.9rem !important;
  color: #bcb8d3 !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Hero section mobile - Standardized */
.hero-section {
  padding: 2rem 1rem !important;
  margin-top: 80px !important;
}

.hero-title-text {
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
}

.hero-subtitle {
  font-size: 1rem !important;
}

.hero-btn-row {
  flex-direction: column !important;
  gap: 1rem !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-btn-row .btn,
.hero-btn-row .get-started-btn,
.hero-btn-row .hero-outline-btn {
  width: 100% !important;
  max-width: 280px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Center the "Try It Now" button in How It Works section */
.how-it-works-cta .get-started-btn {
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
}

/* Center the "Read More Testimonials" button */
.testimonials-list + .get-started-btn,
.testimonials-list .get-started-btn,
.testimonials-cta-btn {
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
}

/* Upload area mobile optimization */
.upload-area {
  padding: 2rem 1rem !important;
}

.upload-label {
  font-size: 1rem !important;
}

.file-input-wrapper {
  margin: 1rem 0 !important;
}

.file-input {
  width: 100% !important;
  max-width: 300px !important;
}

/* Results container mobile */
.results-container {
  padding: 1rem !important;
}

.defect-card {
  margin: 1rem 0 !important;
  padding: 1rem !important;
}

.defect-title {
  font-size: 1.1rem !important;
}

.defect-confidence {
  font-size: 0.9rem !important;
}

/* Account section mobile */
.account-container {
  padding: 1rem !important;
}

.account-card {
  margin: 1rem 0 !important;
  padding: 1.5rem !important;
}

/* Pricing cards mobile - more compact */
.pricing-card {
  margin: 1rem 0 !important;
  padding: 1.2rem 1rem !important;
  min-height: 550px !important;
}

.plan-title {
  font-size: 1.2rem !important;
  margin-bottom: 0.4rem !important;
  line-height: 1.2 !important;
}

.plan-price {
  font-size: 2rem !important;
  margin-bottom: 0.3rem !important;
  line-height: 1.1 !important;
}

.plan-price small {
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
}

.plan-features {
  margin: 0.8rem 0 !important;
}

.plan-features li {
  padding: 0.25rem 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0.2rem !important;
  padding-left: 1.5rem !important;
}

.plan-btn {
  margin: 1.5rem auto 0 auto !important;
  padding: 0.7rem 1.5rem !important;
  font-size: 0.9rem !important;
}

.plan-desc {
  margin-top: 0.6rem !important;
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
  max-width: 200px !important;
}

.features-bottom {
  margin-top: 1rem !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.button-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 0.8rem !important;
}

/* Footer mobile optimization */
.footer-container {
  padding: 2rem 1rem !important;
}

.footer-main {
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  padding: 2rem 0 1.5rem 0 !important;
}

/* Footer logo section centering */
.footer-logo-section {
  text-align: center !important;
}

.footer-logo-section .logo-text {
  text-align: center !important;
}

.footer-logo-section p {
  text-align: center !important;
}

/* Footer logo centering */
.footer-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.footer-logo .logo-text {
  text-align: center !important;
}

/* Footer description centering */
.footer-description {
  text-align: center !important;
}

/* Footer social buttons centering */
.footer-social {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
}

.footer-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Footer sections centering */
.footer-section {
  text-align: center !important;
}

/* Footer titles centering */
.footer-title {
  text-align: center !important;
}

/* Footer links centering */
.footer-links {
  text-align: center !important;
}

.footer-links li {
  text-align: center !important;
}

.footer-links a {
  text-align: center !important;
}

/* Footer bottom content centering */
.footer-bottom {
  text-align: center !important;
}

.footer-bottom-content {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

.footer-copyright {
  text-align: center !important;
}

.footer-copyright p {
  text-align: center !important;
}

.footer-certifications {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.cert-badge {
  text-align: center !important;
}

/* Modal mobile optimization */
.modal {
  padding: 1rem !important;
}

.modal-content {
  width: 95% !important;
  max-width: 500px !important;
  margin: 2rem auto !important;
}
}

/* Smaller mobile devices */
@media (max-width: 480px) {
  .hero-title-text {
    font-size: 1.5rem !important;
  }
  
  .hero-subtitle {
    font-size: 0.9rem !important;
  }
  
  /* AI Service page specific mobile optimization for smaller screens */
  .ai-service-section .hero-title-text {
    font-size: 1.5rem !important;
  }
  
  .ai-service-section .hero-subtitle {
    font-size: 0.9rem !important;
  }
  
  .ai-service-section .hero-card {
    padding: 1.5rem 1rem !important;
  }
  
  .ai-service-section .feature-card {
    padding: 1.2rem !important;
  }
  
  .ai-service-section .feature-title {
    font-size: 1.1rem !important;
  }
  
  .ai-service-section .feature-description {
    font-size: 0.85rem !important;
  }
  
  .ai-service-section .ai-showcase-title {
    font-size: 1.3rem !important;
  }
  
  .ai-service-section .how-it-works-visual-demo img {
    max-width: 240px !important;
  }
  
  .ai-service-section .ai-showcase-step {
    padding: 1.2rem !important;
  }
  
  .ai-service-section .ai-showcase-step h3 {
    font-size: 1.1rem !important;
  }
  
  .ai-service-section .ai-showcase-description {
    font-size: 0.85rem !important;
  }
  
  /* Pricing page smaller screen optimization */
  .pricing-title {
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  .pricing-subtitle {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
    padding: 0 1rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  .pricing-card {
    padding: 0.8rem 0.5rem !important;
    border-radius: 14px !important;
    min-width: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 450px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  
  .plan-title {
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .plan-price {
    font-size: 1.6rem !important;
    margin-bottom: 0.2rem !important;
  }
  
  .plan-price small {
    font-size: 0.75rem !important;
  }
  
  .plan-features {
    margin: 0.3rem 0 !important;
    flex: 1 1 auto !important;
  }
  
  .plan-features li {
    padding: 0.15rem 0 !important;
    font-size: 0.75rem !important;
    padding-left: 1.1rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.1rem !important;
  }
  
  .plan-features li:before {
    font-size: 0.9rem !important;
  }
  
  .plan-btn {
    max-width: 160px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    margin: 1.5rem auto 0 auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }
  
  .plan-sub {
    color: #43e97b !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
    font-weight: 500 !important;
    margin: 0.1rem 0 0.3rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3em !important;
  }
  
  .plan-sub span {
    font-size: 1rem !important;
  }
  
  .plan-login-msg {
    font-size: 0.85rem !important;
    margin-top: 0.8rem !important;
  }
  
  /* Cost comparison smaller screen optimization */
  .cost-comparison-section {
    margin-top: 3rem !important;
    padding: 2rem 0.8rem !important;
    border-radius: 20px !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  .cost-comparison-title {
    font-size: 1.5rem !important;
    margin-bottom: 2rem !important;
    padding: 0 0.5rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  .cost-comparison-card {
    padding: 1.5rem 1rem !important;
    border-radius: 14px !important;
    min-width: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }
  
  .cost-label {
    font-size: 1.2rem !important;
    margin-bottom: 0.8rem !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .cost-price {
    font-size: 2rem !important;
    margin-bottom: 0.8rem !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .cost-desc {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 0 0.3rem !important;
  }
  
  .cost-comparison-vs {
    font-size: 1.2rem !important;
    margin: 0.8rem 0 !important;
    padding: 0.4rem 0.8rem !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .cost-comparison-savings {
    margin-top: 2rem !important;
    font-size: 1.1rem !important;
    padding: 0 0.8rem !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .savings-highlight {
    font-size: 1.2rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Contact page smaller screen optimization */
  .contact-hero {
    padding: 1rem 0.5rem !important;
    margin: 40px 0.5rem 0.5rem 0.5rem !important;
    border-radius: 12px !important;
    width: calc(100% - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    left: 0 !important;
    right: 0 !important;
  }
  

  
  .contact-hero-title {
    font-size: 1.6rem !important;
    margin-bottom: 0.6rem !important;
  }
  
  .contact-hero-subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 1rem !important;
  }
  
  .contact-sections {
    padding: 1rem 0.5rem !important;
  }
  
  .contact-form-section {
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    background: linear-gradient(135deg, #181a2a 0%, #1a1d2e 100%) !important;
    border: 1px solid rgba(123, 92, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
  }
  
  .contact-form-title {
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  }
  
  .form-group {
    margin-bottom: 1rem !important;
  }
  
  .form-label {
    font-size: 0.9rem !important;
    margin-bottom: 0.3rem !important;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    padding: 0.6rem !important;
    font-size: 0.9rem !important;
    border: 1px solid rgba(123, 92, 255, 0.3) !important;
    background: rgba(15, 15, 35, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
  }
  
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none !important;
    border-color: #7b5cff !important;
    box-shadow: 0 0 0 2px rgba(123, 92, 255, 0.2) !important;
    background: rgba(15, 15, 35, 0.9) !important;
  }
  
  .form-textarea {
    min-height: 80px !important;
  }
  
  .submit-btn {
    max-width: 160px !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
    background: linear-gradient(135deg, #7b5cff 0%, #4f8cff 100%) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(123, 92, 255, 0.3) !important;
  }
  
  .submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(123, 92, 255, 0.4) !important;
  }
  
  .submit-btn:active {
    transform: translateY(0) !important;
  }
  
  .contact-info-section {
    gap: 1rem !important;
  }
  
  .contact-card {
    padding: 1rem !important;
  }
  
  .contact-card-title {
    font-size: 1rem !important;
    margin-bottom: 0.6rem !important;
  }
  
  .contact-card-content {
    font-size: 0.8rem !important;
    margin-bottom: 0.6rem !important;
  }
  
  .contact-link {
    font-size: 0.85rem !important;
  }
  
                .faq-section {
                padding: 1rem !important;
                margin: 0 auto 3rem auto !important;
                max-width: calc(100vw - 3rem) !important;
                background: linear-gradient(135deg, #181a2a 0%, #1a1d2e 100%) !important;
                border-radius: 12px !important;
                border: 1px solid rgba(123, 92, 255, 0.2) !important;
                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
              }
  
  .faq-title {
    font-size: 1.4rem !important;
    margin-bottom: 1rem !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.3px !important;
  }
  
  .faq-item {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(123, 92, 255, 0.1) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .faq-item:hover {
    background: rgba(123, 92, 255, 0.05) !important;
    border-color: rgba(123, 92, 255, 0.2) !important;
    box-shadow: 0 6px 20px rgba(123, 92, 255, 0.15) !important;
    transform: translateY(-1px) !important;
  }
  
  .faq-question {
    padding: 0.8rem !important;
    font-size: 0.9rem !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .faq-question::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(123, 92, 255, 0.1) 0%, rgba(79, 140, 255, 0.1) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: -1 !important;
  }
  
  .faq-question:hover::before {
    opacity: 1 !important;
  }
  
  .faq-toggle {
    color: #7b5cff !important;
    font-size: 0.7rem !important;
    transition: transform 0.3s ease !important;
    font-weight: 700 !important;
  }
  
  .faq-question.active .faq-toggle {
    transform: rotate(180deg) !important;
    color: #4f8cff !important;
  }
  
  .faq-answer {
    padding: 0 0.8rem 0.8rem 0.8rem !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(15, 15, 35, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(123, 92, 255, 0.1) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  .faq-answer.active {
    padding: 0 0.8rem 0.8rem 0.8rem !important;
    max-height: 150px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Testimonials page smaller screen optimization */
  .testimonials-title {
    font-size: 1.8rem !important;
  }
  
  .testimonials-intro {
    font-size: 0.9rem !important;
  }
  
  .testimonial-card {
    min-width: 240px !important;
    width: 240px !important;
    padding: 1.2rem !important;
  }
  
  .testimonial-name {
    font-size: 1rem !important;
  }
  
  .testimonial-text {
    font-size: 0.85rem !important;
  }
  
  /* Blog page smaller screen optimization */
  .blog-title {
    font-size: 1.8rem !important;
  }
  
  .blog-subtitle {
    font-size: 0.9rem !important;
  }
  
  .blog-post {
    padding: 1.2rem !important;
  }
  
  .blog-post-title {
    font-size: 1.1rem !important;
  }
  
  .blog-post-excerpt {
    font-size: 0.85rem !important;
  }
  
  /* Account page smaller screen optimization */
  .account-title {
    font-size: 1.3rem !important;
  }
  
  .account-subtitle {
    font-size: 0.9rem !important;
  }
  
  .account-card {
    padding: 1.2rem !important;
  }
  
  .analysis-card {
    padding: 0.8rem !important;
  }
  
  .analysis-title {
    font-size: 1rem !important;
  }
  
  .analysis-date {
    font-size: 0.8rem !important;
  }
  
  .analysis-status {
    font-size: 0.75rem !important;
  }
  
  .analysis-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
  }
  
  .modal {
    padding: 1.5rem !important;
  }
  
  .modal-title {
    font-size: 1.2rem !important;
  }
  
  .modal-btn {
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
  }
  
  .file-input {
    width: 100% !important;
  }
  
  .account-card {
    padding: 1rem !important;
  }
  
  .pricing-card {
    padding: 1rem !important;
  }
  
  .modal-content {
    width: 98% !important;
    margin: 1rem auto !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn, .nav-link, .upload-area {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Active state feedback */
  .btn:active, .nav-link:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
  
  /* Smooth scrolling for touch */
  .scroll-container {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    padding: 1.5rem 1rem !important;
  }
  
  .hero-title-text {
    font-size: 1.6rem !important;
  }
  
  .upload-area {
    padding: 1rem !important;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo, .logo-hex {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
}

/* Focus states for accessibility */
@media (max-width: 768px) {
  .btn:focus, .nav-link:focus, .upload-area:focus {
    outline: 2px solid #7b5cff !important;
    outline-offset: 2px !important;
  }
  
  /* Ensure text remains readable */
  .defect-confidence, .plan-sub {
    font-size: 0.85rem !important;
  }
  
  /* Card spacing */
  .defect-card, .pricing-card, .account-card {
    margin-bottom: 1rem !important;
  }
}

/* Mobile loading states */
.mobile-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #7b5cff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.mobile-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border: 2px solid transparent;
  border-top: 2px solid #7b5cff;
  border-radius: 50%;
  animation: spin 0.5s linear infinite reverse;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile-only utilities */
.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
  
  .desktop-only {
    display: none !important;
  }
}



/* Mobile upload hints */
.mobile-upload-hint {
  display: none;
  text-align: center;
  color: #bcb8d3;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .mobile-upload-hint {
    display: block;
  }
}

/* Mobile button styles */
.mobile-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
  min-width: 44px;
}

.mobile-btn.primary {
  background: linear-gradient(90deg, #7b5cff 0%, #4f8cff 100%);
  color: #fff;
}

.mobile-btn.secondary {
  background: transparent;
  color: #7b5cff;
  border: 2px solid #7b5cff;
}

.mobile-btn:active {
  transform: scale(0.98);
}

/* Mobile form enhancements */
.mobile-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-form input,
.mobile-form textarea,
.mobile-form select {
  padding: 0.75rem;
  border: 1px solid #23244a;
  border-radius: 8px;
  background: #181a2a;
  color: #fff;
  font-size: 1rem;
  min-height: 44px;
}

.mobile-form input:focus,
.mobile-form textarea:focus,
.mobile-form select:focus {
  outline: none;
  border-color: #7b5cff;
  box-shadow: 0 0 0 2px #7b5cff44;
} 

/* Account page specific mobile optimization */
.account-section {
  margin-top: 80px !important;
  padding: 1rem !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

.account-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.account-card {
  background: #181a2a !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(60,60,120,0.1) !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.account-title {
  font-size: 1.5rem !important;
  color: #fff !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.account-subtitle {
  font-size: 1rem !important;
  color: #bcb8d3 !important;
  line-height: 1.5 !important;
  margin-bottom: 2rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.analysis-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.analysis-card {
  background: #23244a !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.analysis-title {
  font-size: 1.1rem !important;
  color: #fff !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.analysis-date {
  font-size: 0.9rem !important;
  color: #7b5cff !important;
  margin-bottom: 0.5rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.analysis-status {
  font-size: 0.8rem !important;
  color: #bcb8d3 !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.analysis-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.analysis-btn {
  padding: 0.5rem 1rem !important;
  border: 1px solid #23244a !important;
  border-radius: 8px !important;
  background: #181a2a !important;
  color: #bcb8d3 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: nowrap !important;
}

.analysis-btn:hover {
  background: #7b5cff !important;
  color: #fff !important;
  border-color: #7b5cff !important;
}

/* Modal mobile optimization */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  background: rgba(10,12,26,0.95) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10001 !important;
  padding: 1rem !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.modal {
  background: #181a2a !important;
  border-radius: 18px !important;
  padding: 2rem !important;
  max-width: 400px !important;
  width: 90% !important;
  box-shadow: 0 8px 32px rgba(60,60,120,0.3) !important;
  text-align: center !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.modal-title {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

.modal-btn-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  margin-top: 1.5rem !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.modal-btn {
  padding: 0.75rem 1.5rem !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: nowrap !important;
}

.modal-btn:not(.cancel-btn) {
  background: linear-gradient(90deg, #7b5cff 0%, #4f8cff 100%) !important;
  color: #fff !important;
}

.modal-btn.cancel-btn {
  background: #23244a !important;
  color: #bcb8d3 !important;
} 

  .pricing-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 500px !important;
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
    min-width: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .pricing-card-inner {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 1rem !important;
    height: 100% !important;
  }
  
  .features-top {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 1rem !important;
  }
  
  .plan-features {
    flex: 1 1 auto !important;
    margin: 0.8rem 0 !important;
    padding: 0 !important;
  }
  
  .plan-features li {
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
    padding: 0.4rem 0 !important;
    font-size: 0.9rem !important;
    padding-left: 1.5rem !important;
  }
  
  .plan-btn {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 200px !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.95rem !important;
    margin: 1.5rem auto 0 auto !important;
  } 

/* Cost Comparison Section Mobile Optimization */
@media (max-width: 768px) {
  .cost-comparison-section {
    position: relative !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 2rem 1rem !important;
    margin: 2rem auto !important;
  }
  
  .cost-comparison-title {
    padding: 0 0.5rem !important;
    color: #fff !important;
    font-weight: 800 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
  
  .cost-comparison-row {
    padding: 0 0.5rem !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  .cost-comparison-card {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.2rem 1rem !important;
  }
  
  .cost-label, .cost-price, .cost-desc {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .cost-desc {
    padding: 0 0.5rem !important;
    font-size: 0.9rem !important;
  }
  
  .cost-comparison-vs {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 1.2rem !important;
    margin: 0 0.5rem !important;
  }
  
  .cost-comparison-savings {
    padding: 0 1rem !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .savings-highlight {
    font-size: 1.25em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 480px) {
  .cost-comparison-section {
    padding: 2rem 0.8rem !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  .cost-comparison-title {
    padding: 0 0.5rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    font-size: 1.4rem !important;
  }
  
  .cost-comparison-card {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    padding: 1rem 0.8rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .cost-label, .cost-price {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .cost-desc {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 0 0.3rem !important;
    font-size: 0.85rem !important;
  }
  
  .cost-comparison-vs {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 1.1rem !important;
    margin: 0 0.3rem !important;
  }
  
  .cost-comparison-savings {
    padding: 0 0.8rem !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 1rem !important;
  }
  
  .savings-highlight {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 1.2em !important;
  }
} 

/* Center the "Read More Testimonials" button */
.testimonials-list + .get-started-btn,
.testimonials-list .get-started-btn,
.testimonials-cta-btn {
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
}

/* Center testimonials content on mobile */
.testimonials-header {
  text-align: center !important;
  margin: 0 auto !important;
}

.testimonials-list {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}

.testimonial-card {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

.testimonial-text {
  text-align: center !important;
}

.testimonial-name {
  text-align: center !important;
}

.testimonial-stars {
  text-align: center !important;
  margin: 0 auto !important;
}

/* EXTREMELY AGGRESSIVE MOBILE OVERRIDES - MAXIMUM SPECIFICITY */
@media (max-width: 768px) {
  /* Force all demo section elements to be mobile-friendly with maximum specificity */
  body .demo-section,
  body .demo-section[style] {
    margin-top: 1rem !important;
    padding: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    background: #181a2a !important;
    box-shadow: 0 4px 32px #7b5cff11 !important;
  }

  /* Force three-step cards to stack vertically */
  body .demo-steps-cards,
  body .demo-steps-cards[style] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
    flex-wrap: nowrap !important;
    position: relative !important;
  }

  /* Force each step card to be full width */
  body .demo-step-card,
  body .demo-step-card[style] {
    min-width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 1rem 0.8rem !important;
    background: #181a2a !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(60,60,120,0.13) !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Hide the dots between steps */
  body .demo-step-dots,
  body .demo-step-dots[style] {
    display: none !important;
  }

  /* Force demo card to be mobile-friendly */
  body .demo-card,
  body .demo-card[style] {
    max-width: 100% !important;
    padding: 1.5rem 1rem !important;
    margin: 0 auto 1.5rem auto !important;
    background: #181a2a !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(60,60,120,0.13) !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Force upload row to stack vertically */
  body #demo-upload-row,
  body #demo-upload-row[style] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.8rem !important;
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  /* Force all buttons to be full width */
  body .demo-analyze-btn,
  body .demo-analyze-btn[style],
  body #demo-upload-label,
  body #demo-upload-label[style],
  body #demo-camera-btn,
  body #demo-camera-btn[style],
  body #demo-analyze,
  body #demo-analyze[style] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem 0 !important;
    padding: 0.8rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  /* Force example photo container to be mobile-friendly */
  body #example-photo-container,
  body #example-photo-container[style] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 100% !important;
    margin: 0 auto 1.1rem auto !important;
  }

  /* Force example photo to be responsive */
  body #example-photo,
  body #example-photo[style] {
    max-width: 100% !important;
    max-height: 200px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px #7b5cff22 !important;
    margin-bottom: 0.5rem !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Force example photo caption to be mobile-friendly */
  body #example-photo-caption,
  body #example-photo-caption[style] {
    color: #bcb8d3 !important;
    font-size: 0.9rem !important;
    text-align: center !important;
  }

  /* Force training consent container to be mobile-friendly */
  body #training-consent-container,
  body #training-consent-container[style] {
    margin-top: 1rem !important;
    padding: 0.8rem !important;
    background: #23244a !important;
    border-radius: 12px !important;
    border: 2px solid #7b5cff44 !important;
    text-align: center !important;
  }

  /* Force training consent div to stack vertically */
  body #training-consent-container div,
  body #training-consent-container[style] div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Force training consent checkbox to be centered */
  body #training-consent,
  body #training-consent[style] {
    margin: 0 auto !important;
    transform: scale(1.2) !important;
    accent-color: #7b5cff !important;
  }

  /* Force auth message to be mobile-friendly */
  body #auth-message,
  body #auth-message[style] {
    margin: 0.8rem 0 !important;
    padding: 0.7rem !important;
    background: #ff3b3b22 !important;
    border: 2px solid #ff3b3b !important;
    border-radius: 10px !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
  }

  /* Force auth message links to be inline */
  body #auth-message a,
  body #auth-message[style] a {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #7b5cff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* Mobile-specific auth message child elements */
  body #auth-message div:first-child,
  body #auth-message[style] div:first-child {
    color: #ff3b3b !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    margin-bottom: 0.2rem !important;
    white-space: normal !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
  }

  body #auth-message div:last-child,
  body #auth-message[style] div:last-child {
    color: #bcb8d3 !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
  }

  /* Force demo title to be mobile-friendly */
  body .demo-title,
  body .demo-title[style] {
    font-size: 1.8rem !important;
    margin-bottom: 0.8rem !important;
    text-align: center !important;
    font-weight: 900 !important;
    background: linear-gradient(90deg, #fff 0%, #7b5cff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
  }

  /* Force demo subtitle to be mobile-friendly */
  body .demo-subtitle,
  body .demo-subtitle[style] {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    line-height: 1.4 !important;
    color: #bcb8d3 !important;
  }

  /* Force demo subtitle line breaks to be hidden */
  body .demo-subtitle br,
  body .demo-subtitle[style] br {
    display: none !important;
  }

  /* Force all spans with specific styles to be mobile-friendly */
  body span[style*="font-size:2.1rem"],
  body span[style*="font-size:1.7em"] {
    font-size: 1.5rem !important;
  }

  body span[style*="font-weight:800"][style*="font-size:1.08rem"][style*="color:#fff"],
  body span[style*="font-weight:800"][style*="font-size:1.08rem"] {
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: #fff !important;
    margin-bottom: 0.3rem !important;
  }

  body span[style*="color:#bcb8d3"][style*="font-size:0.93rem"],
  body span[style*="color:#bcb8d3"][style*="font-size:0.93em"] {
    color: #bcb8d3 !important;
    font-size: 0.9rem !important;
  }

  /* Force all divs with flex styles to be mobile-friendly */
  body div[style*="display:flex"][style*="justify-content:center"][style*="align-items:stretch"][style*="gap:1.1rem"][style*="margin-bottom:2.7rem"][style*="flex-wrap:wrap"][style*="position:relative"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
    flex-wrap: nowrap !important;
    position: relative !important;
  }

  body div[style*="display:flex"][style*="gap:1.5em"][style*="align-items:center"][style*="justify-content:center"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  body div[style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"][style*="gap:0.7em"][style*="margin-top:1.5em"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
  }

  body div[style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body div[style*="display:flex"][style*="align-items:center"][style*="gap:0.6em"][style*="margin-top:0.7em"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
  }

  /* Force all images to be mobile-friendly */
  body img[style*="height:1.7em"][style*="vertical-align:middle"] {
    height: 1.2em !important;
    vertical-align: middle !important;
  }

  /* Force all spans with specific colors and sizes to be mobile-friendly */
  body span[style*="color:#bcb8d3"][style*="font-size:1.01em"][style*="font-weight:700"] {
    color: #bcb8d3 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  /* Force all buttons with gradient backgrounds to be mobile-friendly */
  body button[style*="background:linear-gradient"],
  body button[style*="background: linear-gradient"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem 0 !important;
    padding: 0.8rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  /* Force all divs with margin-bottom to be consistent */
  body div[style*="margin-bottom"] {
    margin-bottom: 1rem !important;
  }

  /* Force all elements in demo section to respect mobile layout */
  body .demo-section * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Force all demo section divs to be properly sized */
  body .demo-section > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .demo-section > div:last-child {
    margin-bottom: 0 !important;
  }

  /* Extra small screens with maximum specificity */
  @media (max-width: 480px) {
    body .demo-section,
    body .demo-section[style] {
      margin: 0.5rem !important;
      padding: 1rem 0.8rem !important;
    }

    body .demo-title,
    body .demo-title[style] {
      font-size: 1.5rem !important;
    }

    body .demo-subtitle,
    body .demo-subtitle[style] {
      font-size: 0.9rem !important;
    }

    body .demo-card,
    body .demo-card[style] {
      padding: 1rem 0.8rem !important;
    }

    body .demo-analyze-btn,
    body .demo-analyze-btn[style],
    body #demo-upload-label,
    body #demo-upload-label[style] {
      padding: 0.7rem 1rem !important;
      font-size: 0.9rem !important;
    }
  }

  /* Landscape orientation with maximum specificity */
  @media (max-width: 768px) and (orientation: landscape) {
    body .demo-section,
    body .demo-section[style] {
      margin-top: 0.5rem !important;
      padding: 1rem !important;
    }

    body .demo-title,
    body .demo-title[style] {
      font-size: 1.4rem !important;
      margin-bottom: 0.5rem !important;
    }

    body .demo-subtitle,
    body .demo-subtitle[style] {
      font-size: 0.9rem !important;
      margin-bottom: 1rem !important;
    }

    body .demo-steps-cards,
    body .demo-steps-cards[style] {
      flex-direction: row !important;
      gap: 0.5rem !important;
    }

    body .demo-step-card,
    body .demo-step-card[style] {
      min-width: 120px !important;
      padding: 0.5rem !important;
    }

    body .demo-step-dots,
    body .demo-step-dots[style] {
      display: none !important;
    }
  }
}

/* ULTIMATE MOBILE OVERRIDES - MAXIMUM SPECIFICITY AND AGGRESSIVENESS */
@media (max-width: 768px) {
  /* Override ALL inline styles with maximum specificity */
  body section[style*="background:#181a2a"][style*="border-radius:22px"][style*="box-shadow:0 4px 32px #7b5cff11"][style*="margin-top:2.5em"][style*="margin-bottom:2.5em"][style*="padding:2.5em 1.5em"][style*="max-width:1200px"][style*="width:100%"] {
    margin: 1rem auto !important;
    padding: 0.8rem !important;
    max-width: 85% !important;
    width: 85% !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(123, 92, 255, 0.1) !important;
  }

  body div[style*="display:flex"][style*="justify-content:center"][style*="align-items:stretch"][style*="gap:1.1rem"][style*="margin-bottom:2.7rem"][style*="flex-wrap:wrap"][style*="position:relative"] {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body div[style*="background:#181a2a"][style*="padding:1.1rem 0.7rem 1.0rem 0.7rem"][style*="border-radius:18px"][style*="box-shadow:0 8px 32px rgba(60,60,120,0.13)"][style*="text-align:center"][style*="min-width:160px"][style*="max-width:210px"][style*="flex:1 1 160px"][style*="position:relative"] {
    min-width: auto !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 1rem 0.8rem !important;
    margin: 0 !important;
  }

  body div[style*="font-size:2.1rem"][style*="margin-bottom:0.7rem"] {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  body div[style*="font-weight:800"][style*="font-size:1.08rem"][style*="color:#fff"][style*="margin-bottom:0.3rem"] {
    font-size: 1rem !important;
    margin-bottom: 0.3rem !important;
  }

  body div[style*="color:#bcb8d3"][style*="font-size:0.93rem"] {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  body div[style*="align-self:center"][style*="display:flex"][style*="flex-direction:row"][style*="justify-content:center"][style*="align-items:center"] {
    display: none !important;
  }

  body div[style*="max-width:520px"][style*="margin:0 auto 2rem auto"][style*="padding:2.5rem 2rem 2.2rem 2rem"] {
    max-width: 100% !important;
    margin: 0 auto 1.5rem auto !important;
    padding: 1.5rem 1rem !important;
  }

  body div[style*="font-weight:800"][style*="font-size:1.18rem"][style*="color:#fff"][style*="margin-bottom:1.2rem"][style*="text-align:center"] {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
  }

  body div[style*="display:none"][style*="background:#23244a"][style*="border-radius:12px"][style*="padding:1rem"][style*="margin-bottom:1.5rem"][style*="text-align:center"][style*="border:2px solid #7b5cff"] {
    margin-bottom: 1rem !important;
    padding: 0.8rem !important;
  }

  body div[style*="color:#7b5cff"][style*="font-weight:700"][style*="font-size:1.1rem"][style*="margin-bottom:0.3rem"] {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
  }

  body div[style*="color:#fff"][style*="font-weight:800"][style*="font-size:1.5rem"] {
    font-size: 1.3rem !important;
  }

  body div[style*="color:#bcb8d3"][style*="font-size:0.9rem"][style*="margin-top:0.3rem"] {
    font-size: 0.85rem !important;
    margin-top: 0.2rem !important;
  }

  body div[style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"][style*="max-width:320px"][style*="margin:0 auto 1.1rem auto"] {
    max-width: 100% !important;
    margin: 0 auto 1rem auto !important;
  }

  body img[style*="max-width:98%"][style*="max-height:260px"][style*="object-fit:contain"][style*="border-radius:12px"][style*="box-shadow:0 4px 18px #7b5cff22"][style*="margin-bottom:0.5rem"] {
    max-width: 100% !important;
    max-height: 200px !important;
    margin-bottom: 0.5rem !important;
  }

  body div[style*="color:#bcb8d3"][style*="font-size:0.96rem"][style*="text-align:center"] {
    font-size: 0.9rem !important;
  }

  body div[style*="display:none"][style*="flex-direction:column"][style*="align-items:center"][style*="max-width:400px"][style*="margin:0 auto 1.1rem auto"][style*="position:relative"][style*="width:400px"][style*="height:300px"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 1rem auto !important;
  }

  body img[style*="display:block"][style*="width:400px"][style*="height:300px"][style*="object-fit:cover"][style*="border-radius:12px"][style*="box-shadow:0 4px 18px #7b5cff22"][style*="margin-bottom:0.5rem"][style*="position:relative"][style*="z-index:1"] {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    margin-bottom: 0.5rem !important;
  }

  body canvas[style*="position:absolute"][style*="left:0"][style*="top:0"][style*="z-index:2"][style*="width:400px"][style*="height:300px"][style*="pointer-events:none"][style*="display:none"] {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
  }

  body form[style*="margin:0"][style*="padding:0"][style*="border:none"][style*="background:none"] {
    width: 100% !important;
  }

  body div[style*="display: flex"][style*="align-items: center"][style*="gap: 1.2rem"][style*="justify-content: center"][style*="width: 100%"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    gap: 0.8rem !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body label[style*="font-weight: 700"][style*="display: flex"][style*="align-items: center"][style*="justify-content: center"][style*="gap: 0.7em"][style*="box-sizing: border-box"] {
    width: 100% !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
  }

  body button[style*="background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%)"][style*="box-shadow: 0 4px 20px rgba(67, 233, 123, 0.3)"] {
    width: 100% !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
    margin-bottom: 0.8rem !important;
  }

  /* Auth message - REMOVED CONFLICTING RULES */

  body div[style*="margin-top: 1.5rem"][style*="padding: 1rem"][style*="background: #23244a"][style*="border-radius: 12px"][style*="border: 2px solid #7b5cff44"][style*="text-align: center"] {
    margin-top: 1rem !important;
    padding: 0.8rem !important;
  }

  body div[style*="display: flex"][style*="align-items: flex-start"][style*="gap: 0.8rem"][style*="justify-content: center"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }

  body input[style*="margin-top: 0.2rem"][style*="transform: scale(1.2)"][style*="accent-color: #7b5cff"] {
    margin-top: 0.1rem !important;
    transform: scale(1.1) !important;
  }

  body div[style*="flex: 1"][style*="text-align: center"] {
    text-align: center !important;
    width: 100% !important;
  }

  body div[style*="color: #fff"][style*="font-weight: 700"][style*="font-size: 0.95rem"][style*="margin-bottom: 0.3rem"] {
    font-size: 0.9rem !important;
    margin-bottom: 0.2rem !important;
  }

  body div[style*="color: #bcb8d3"][style*="font-size: 0.9rem"][style*="line-height: 1.4"] {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  body span[style*="color: #7b5cff"][style*="font-weight: 600"] {
    font-weight: 600 !important;
  }

  body div[style*="display:none"] {
    display: none !important;
  }

  /* REMOVED: These rules were forcing buttons to display when they should be hidden */
  /* The JavaScript logic should control button visibility, not CSS */

  body div[style*="display:none"][style*="max-width: 480px"][style*="margin: 2.5em auto 0 auto"][style*="background: #181a2a"][style*="border-radius: 18px"][style*="box-shadow: 0 4px 24px #7b5cff22"][style*="padding: 2em 1.5em"][style*="color: #fff"][style*="text-align: left"] {
    max-width: 100% !important;
    margin: 1.5em auto 0 auto !important;
    padding: 1.5em 1em !important;
  }

  body h3[style*="font-size: 1.18em"][style*="font-weight: 800"][style*="margin-bottom: 1.1em"][style*="color: #fff"] {
    font-size: 1.1em !important;
    margin-bottom: 1em !important;
  }

  body div[style*="display: flex"][style*="gap: 1.5em"][style*="align-items: center"][style*="margin-bottom: 1.2em"] {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
  }

  body button[style*="background: linear-gradient(90deg, #43e97b 0%, #7b5cff 100%)"][style*="color: #fff"][style*="border: none"][style*="border-radius: 10px"][style*="font-size: 1.2em"][style*="padding: 0.6em 1.5em"][style*="font-weight: 700"][style*="cursor: pointer"][style*="box-shadow"] {
    width: 100% !important;
    font-size: 1.1em !important;
    padding: 0.8em 1.2em !important;
  }

  body button[style*="background: linear-gradient(90deg, #ff4d4d 0%, #ff6b6b 100%)"][style*="color: #fff"][style*="border: none"][style*="border-radius: 10px"][style*="font-size: 1.2em"][style*="padding: 0.6em 1.5em"][style*="font-weight: 700"][style*="cursor: pointer"][style*="box-shadow"] {
    width: 100% !important;
    font-size: 1.1em !important;
    padding: 0.8em 1.2em !important;
  }

  body div[style*="display: none"][style*="margin-bottom: 1.2em"] {
    display: none !important;
  }

  body label[style*="font-size: 1em"][style*="color: #bcb8d3"][style*="margin-bottom: 0.5em"][style*="display: block"] {
    font-size: 0.95em !important;
    margin-bottom: 0.4em !important;
  }

  body textarea[style*="width: 100%"][style*="border-radius: 10px"][style*="border: 1.5px solid #7b5cff44"][style*="background: #23244a"][style*="color: #fff"][style*="font-size: 1em"][style*="padding: 0.7em"][style*="margin-bottom: 0.7em"] {
    font-size: 0.95em !important;
    padding: 0.6em !important;
    margin-bottom: 0.6em !important;
  }

  body div[style*="color:#ff4d4d"][style*="font-size:0.98em"][style*="margin-bottom:0.7em"][style*="display:none"] {
    font-size: 0.9em !important;
    margin-bottom: 0.6em !important;
  }

  body button[style*="background: linear-gradient(90deg, #7b5cff 0%, #4f8cff 100%)"][style*="color: #fff"][style*="border: none"][style*="border-radius: 10px"][style*="font-size: 1em"][style*="padding: 0.6em 1.5em"][style*="font-weight: 700"][style*="cursor: pointer"][style*="box-shadow"] {
    width: 100% !important;
    font-size: 0.95em !important;
    padding: 0.8em 1.2em !important;
  }

  body div[style*="display: none"][style*="color: #43e97b"][style*="font-weight: 700"][style*="font-size: 1.08em"][style*="margin-top: 1em"] {
    font-size: 1em !important;
    margin-top: 0.8em !important;
  }

  body div[style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"][style*="gap:0.7em"][style*="margin-top:1.5em"] {
    flex-direction: column !important;
    gap: 0.5em !important;
    margin-top: 1em !important;
  }

  body div[style*="display:flex"][style*="gap:1.5em"][style*="align-items:center"][style*="justify-content:center"] {
    flex-direction: column !important;
    gap: 1em !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Trust badges - keep horizontal on mobile */
  body div[style*="display:flex"][style*="flex-direction:row"][style*="align-items:center"][style*="gap:1.5em"][style*="margin-top:1.5em"][style*="justify-content:center"] {
    flex-direction: row !important;
    gap: 1em !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 1em !important;
  }

  body div[style*="display:flex"][style*="flex-direction:column"][style*="align-items:center"] {
    flex-direction: column !important;
    align-items: center !important;
  }

  body span[style*="font-size:1.7em"] {
    font-size: 1.5em !important;
  }

  body span[style*="color:#bcb8d3"][style*="font-size:0.93em"] {
    font-size: 0.85em !important;
  }

  body div[style*="display:flex"][style*="align-items:center"][style*="gap:0.6em"][style*="margin-top:0.7em"] {
    flex-direction: column !important;
    gap: 0.4em !important;
    margin-top: 0.5em !important;
    align-items: center !important;
  }

  body img[style*="height:1.7em"][style*="vertical-align:middle"] {
    height: 1.5em !important;
  }

  body span[style*="color:#bcb8d3"][style*="font-size:1.01em"][style*="font-weight:700"] {
    font-size: 0.9em !important;
  }

  /* Force all elements to be mobile-friendly */
  body * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure proper spacing */
  body div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Override any remaining desktop styles */
  body .demo-section,
  body .demo-steps-cards,
  body .demo-step-card,
  body .demo-card,
  body #demo-upload-row,
  body .demo-analyze-btn,
  body #example-photo-container,
  body #example-photo,
  body #demo-preview-container,
  body .demo-image-preview,
  body #detection-canvas,
  body #uploads-indicator,
  body #training-consent-container,
  body #training-consent,
  body .demo-result,
  body .defect-card,
  body .download-btn,
  body #request-review-btn,
  body #retry-btn,
  body .feedback-card,
  body .feedback-btn,
  body #feedback-comment,
  body #feedback-submit {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Button styling - let JavaScript control visibility */
  body #download-report-btn,
  body #request-review-btn,
  body #retry-btn {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    margin: 1rem auto 0 auto !important;
    border-radius: 8px !important;
  }

  /* Override display property to let JavaScript control visibility */
  body #download-report-btn[style*="display:none"],
  body #request-review-btn[style*="display:none"],
  body #retry-btn[style*="display:none"] {
    display: none !important;
  }

  /* Download report button specific styling */
  body #download-report-btn {
    margin: 1.5rem auto 0 auto !important;
  }

  /* Request review button specific styling */
  body #request-review-btn {
    background: linear-gradient(90deg, #ff6b35 0%, #f7931e 100%) !important;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3) !important;
    margin: 1rem auto 0 auto !important;
  }

  /* Retry button specific styling */
  body #retry-btn {
    background: linear-gradient(90deg, #ff6b6b 0%, #ff8e8e 100%) !important;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3) !important;
    margin: 1rem auto 0 auto !important;
  }

  /* Start New Analysis button specific styling */
  body #start-new-analysis-btn {
    display: block !important;
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    margin: 1rem auto 0 auto !important;
    border-radius: 8px !important;
    background: linear-gradient(90deg, #7b5cff 0%, #4f8cff 100%) !important;
    box-shadow: 0 4px 20px rgba(123, 92, 255, 0.3) !important;
  }

  /* General button styling for when they become visible */
  /* REMOVED: This rule was forcing buttons to be visible when they should be hidden */
}

body div[style*="display:flex"][style*="gap:1.5em"][style*="align-items:center"][style*="justify-content:center"] {
  flex-direction: column !important;
  gap: 1em !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Trust badges - keep horizontal on mobile */
body div[style*="display:flex"][style*="flex-direction:row"][style*="align-items:center"][style*="gap:1.5em"][style*="margin-top:1.5em"][style*="justify-content:center"] {
  flex-direction: row !important;
  gap: 1em !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 1em !important;
}
/* Account page: mobile-only layout improvements */
@media (max-width: 600px) {
  /* Remove left indent so content lines up nicely */
  .profile-details { padding-left: 0 !important; }

  /* Stack label/value vertically to avoid cramped rows */
  .profile-row {
    flex-direction: column !important;
    gap: 0.25rem !important;
    align-items: flex-start !important;
  }
  .profile-row b {
    min-width: 0 !important;
    text-align: left !important;
    margin-right: 0 !important;
  }

  /* Stack action buttons and make them full width */
  .profile-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
    margin-top: 1rem !important;
  }
  .profile-action-btn,
  .upgrade-btn,
  .stylish-refresh-btn,
  .stylish-clear-btn,
  .account-actions-card .logout-btn,
  .account-actions-card .delete-btn {
    width: 100% !important;
  }
  .profile-action-btn {
    font-size: 0.95rem !important;
    padding: 0.7rem 1rem !important;
    white-space: nowrap !important;
  }

  /* Actions row at footer of page */
  .account-actions-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }

  /* Membership/security rows wrap nicely */
  .membership-details,
  .security-details,
  .analysis-actions,
  .notification-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }

  /* Analysis history buttons: stack and full width */
  .analysis-btn-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .analysis-btn {
    width: 100% !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;
  }
  /* Give each history item some breathing room on mobile */
  .analysis-history-item {
    padding: 1rem !important;
    background: #23244a !important;
    border-radius: 12px !important;
  }
}

/* iOS Safari: center consent checkbox and text */
@supports (-webkit-touch-callout: none) {
  #training-consent-container { text-align: center !important; }
  #training-consent-container > div { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.6rem !important; }
  #training-consent { margin: 0 !important; width: 22px !important; height: 22px !important; -webkit-appearance: checkbox !important; appearance: checkbox !important; }
}

/* Consent checkbox absolute-centering fallback */
#training-consent-container { position: relative; }
#training-consent { position: relative; left: 50%; transform: translateX(-50%); }
/* v1.0.129a */