/* assets/styles/home.css */
    /* Smooth dark mode transitions */
    body, nav, section, footer, .feature-card, .glass, .btn-primary, .btn-secondary {
      transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out, border-color 0.5s ease-in-out;
    }

    /* Responsive typography */
    body { font-family: 'Nunito', sans-serif; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.7; }
    h1 { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.2; }
    h2 { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.3; }
    h3 { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
    h4, h5, h6 { font-family: 'Raleway', sans-serif; font-weight: 600; font-size: clamp(1.125rem, 2vw, 1.25rem); }
    nav span, footer span { font-family: 'Viga', sans-serif; }
    button, a, input, textarea { font-family: 'Quicksand', sans-serif; font-weight: 500; letter-spacing: 0.02em; font-size: clamp(0.95rem, 1vw, 1.1rem); }

    /* Utility - Keeping original gray gradient */
    .gradient-text { 
      background: linear-gradient(90deg, #6B7280 0%, #9CA3AF 100%); 
      -webkit-background-clip: text; 
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .btn-primary { 
      background: linear-gradient(90deg, #9CA3AF 0%, #6B7280 100%); 
      color: #fff; 
      font-weight: 600;
      transition: all 0.3s ease;
    }
    .btn-primary:hover { 
      transform: translateY(-2px); 
      box-shadow: 0 6px 20px rgba(107,114,128,0.3);
    }
    .btn-secondary { 
      background: #F3F4F6; 
      border: 1px solid #D1D5DB; 
      color: #374151;
      transition: all 0.3s ease;
    }
    .btn-secondary:hover { 
      background: #E5E7EB; 
      transform: translateY(-2px); 
    }
    .feature-card { 
      background: linear-gradient(145deg,#F3F4F6,#E5E7EB); 
      border: 1px solid #D1D5DB;
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }
    .feature-card:hover { 
      transform: translateY(-5px); 
      box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    }
    
    /* Stats counter animation */
    .stat-number {
      font-variant-numeric: tabular-nums;
    }

    /* Glass morphism effect */
    .glass {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Dark mode overrides - Keeping original dark mode colors */
    .dark body { background-color: #111827; color: #F9FAFB; }
    .dark .glass { 
      background: rgba(31,41,55,0.8); 
      border-color: rgba(255,255,255,0.05); 
    }
    .dark .feature-card { 
      background: linear-gradient(145deg,#1F2937,#111827); 
      border-color: rgba(255,255,255,0.1); 
    }
    .dark .btn-secondary { 
      background: #1F2937; 
      border-color: #374151; 
      color: #E5E7EB; 
    }
    .dark .btn-secondary:hover { 
      background: #374151; 
    }

    /* Scroll reveal */
    .reveal { opacity: 0; transform: translateY(30px); }
    .animate-fadeUp { 
      opacity: 1 !important; 
      transform: translateY(0) !important; 
      transition: opacity 0.8s ease, transform 0.8s ease; 
    }
    
    /* Hero illustration with original gray colors */
    .hero-illustration {
      background: radial-gradient(circle at 30% 50%, rgba(107, 114, 128, 0.15) 0%, transparent 50%),
                  radial-gradient(circle at 70% 30%, rgba(156, 163, 175, 0.1) 0%, transparent 50%);
    }
    
    /* Icon backgrounds using original gray palette */
    .icon-bg {
      background: linear-gradient(145deg, #E5E7EB, #F3F4F6);
    }
    .dark .icon-bg {
      background: linear-gradient(145deg, #374151, #1F2937);
    }

    /* Modal styles */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal-content {
      background: white;
      border-radius: 1rem;
      padding: 0;
      max-width: 600px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      transform: scale(0.9);
      opacity: 0;
      transition: all 0.3s ease;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .dark .modal-content {
      background: #1F2937;
      color: #F9FAFB;
    }

    .modal-overlay.active .modal-content {
      transform: scale(1);
      opacity: 1;
    }

    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: #6B7280;
      transition: color 0.3s ease;
      z-index: 10;
    }

    .modal-close:hover {
      color: #374151;
    }

    .dark .modal-close {
      color: #9CA3AF;
    }

    .dark .modal-close:hover {
      color: #E5E7EB;
    }

    /* Multi-step form styles */
    .modal-header {
      padding: 2rem 2rem 1rem;
      border-bottom: 1px solid #E5E7EB;
    }

    .dark .modal-header {
      border-color: #374151;
    }

    .modal-body {
      padding: 1.5rem 2rem 2rem;
    }

    .step-indicator {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2rem;
      position: relative;
    }

    .step-indicator::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: #E5E7EB;
      transform: translateY(-50%);
      z-index: 1;
    }

    .dark .step-indicator::before {
      background: #374151;
    }

    .step {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: #F3F4F6;
      border: 2px solid #E5E7EB;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: #6B7280;
      position: relative;
      z-index: 2;
      transition: all 0.3s ease;
    }

    .dark .step {
      background: #374151;
      border-color: #4B5563;
      color: #9CA3AF;
    }

    .step.active {
      background: linear-gradient(90deg, #9CA3AF 0%, #6B7280 100%);
      border-color: #6B7280;
      color: white;
    }

    .step.completed {
      background: #10B981;
      border-color: #10B981;
      color: white;
    }

    .step-label {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: #6B7280;
      white-space: nowrap;
    }

    .dark .step-label {
      color: #9CA3AF;
    }

    .step.active .step-label {
      color: #374151;
      font-weight: 600;
    }

    .dark .step.active .step-label {
      color: #F9FAFB;
    }

    .form-step {
      display: none;
    }

    .form-step.active {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
      color: #374151;
    }

    .dark .form-label {
      color: #E5E7EB;
    }

    .form-input {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #D1D5DB;
      border-radius: 0.5rem;
      background: white;
      transition: all 0.3s ease;
    }

    .dark .form-input {
      background: #374151;
      border-color: #4B5563;
      color: #F9FAFB;
    }

    .form-input:focus {
      outline: none;
      border-color: #6B7280;
      box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
    }

    .dark .form-input:focus {
      border-color: #9CA3AF;
      box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
    }

    .form-select {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid #D1D5DB;
      border-radius: 0.5rem;
      background: white;
      appearance: none;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
      background-position: right 0.5rem center;
      background-repeat: no-repeat;
      background-size: 1.5em 1.5em;
    }

    .dark .form-select {
      background: #374151;
      border-color: #4B5563;
      color: #F9FAFB;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    }

    .form-checkbox {
      width: 1rem;
      height: 1rem;
      border: 1px solid #D1D5DB;
      border-radius: 0.25rem;
      background: white;
    }

    .dark .form-checkbox {
      background: #374151;
      border-color: #4B5563;
    }

    .form-radio {
      width: 1rem;
      height: 1rem;
      border: 1px solid #D1D5DB;
      border-radius: 50%;
      background: white;
    }

    .dark .form-radio {
      background: #374151;
      border-color: #4B5563;
    }

    .form-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
    }

    .btn-outline {
      background: transparent;
      border: 1px solid #D1D5DB;
      color: #374151;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .dark .btn-outline {
      border-color: #4B5563;
      color: #E5E7EB;
    }

    .btn-outline:hover {
      background: #F9FAFB;
    }

    .dark .btn-outline:hover {
      background: #374151;
    }

    .plan-option {
      border: 2px solid #E5E7EB;
      border-radius: 0.75rem;
      padding: 1.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 1rem;
    }

    .dark .plan-option {
      border-color: #374151;
    }

    .plan-option:hover {
      border-color: #9CA3AF;
    }

    .plan-option.selected {
      border-color: #6B7280;
      background: #F9FAFB;
    }

    .dark .plan-option.selected {
      border-color: #9CA3AF;
      background: #374151;
    }

    .plan-name {
      font-weight: 600;
      font-size: 1.125rem;
      margin-bottom: 0.5rem;
    }

    .plan-price {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .plan-features {
      list-style: none;
      padding: 0;
      margin: 1rem 0 0;
    }

    .plan-features li {
      display: flex;
      align-items: center;
      margin-bottom: 0.5rem;
      font-size: 0.875rem;
    }

    .plan-features li i {
      color: #10B981;
      margin-right: 0.5rem;
    }

    .success-icon {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      background: #10B981;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      color: white;
      font-size: 1.5rem;
    }

    /* Login button specific styles */
    .login-btn {
      background: transparent;
      border: 1px solid #6B7280;
      color: #6B7280;
      transition: all 0.3s ease;
    }

    .login-btn:hover {
      background: #6B7280;
      color: white;
      transform: translateY(-2px);
    }

    .dark .login-btn {
      border-color: #9CA3AF;
      color: #9CA3AF;
    }

    .dark .login-btn:hover {
      background: #9CA3AF;
      color: #1F2937;
    }