@font-face {
     font-family: 'Onest';
     src: url('../fonts/onest/Onest-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Onest';
     src: url('../fonts/onest/Onest-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Onest';
     src: url('../fonts/onest/Onest-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }

 :root {
     --primary-color: #0aec33;
     --dark-blue: #012641;
     --light-gray: #f2f2f2;
     --deep-black: #0f0f0f;
     --soft-gray: #eaeaea;
     --text-black: #0f0f0f;
     --text-muted: #6b7280;
     --font-family: 'Onest', sans-serif;
     --card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     --input-radius: 12px;
     --card-radius: 16px;
     --error-color: #ef4444;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: var(--font-family);
     background-color: #ffffff;
     color: var(--text-black);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 1rem;
     background-image: radial-gradient(var(--soft-gray) 1px, transparent 1px);
     background-size: 20px 20px;
 }

 /* --- 2. LAYOUT --- */
 .container {
     width: 100%;
     max-width: 512px;
     margin: 0 auto;
 }

 .header-bar {
     width: 100%;
     max-width: 512px;
     display: flex;
     justify-content: flex-end;
     margin-bottom: 1rem;
 }

 /* --- 3. MAIN CARD --- */
 .main-card {
     background-color: #fff;
     border-radius: var(--card-radius);
     box-shadow: var(--card-shadow);
     border: 3px solid var(--primary-color);
     overflow: hidden;
     border: 1px solid #f3f4f6;
     transition: height 0.3s ease;
 }

 .card-header {
     padding: 1.5rem 1.5rem 0.5rem 1.5rem;
     text-align: center;
 }

 .main-logo {
     display: block;
     margin: 0 auto 1rem auto;
     height: 40px;
     width: auto;
     object-fit: contain;
 }

 .card-header h1 {
     font-size: 1.875rem;
     font-weight: 800;
     color: var(--dark-blue);
     margin-bottom: 0.5rem;
     line-height: 1.2;
 }

 .card-header p {
     color: var(--text-muted);
     font-size: 0.875rem;
     transition: opacity 0.2s;
 }

 /* --- 4. FORM ELEMENTS --- */
 .form-content {
     padding: 1.5rem;
     padding-top: 1rem;
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
 }

 .input-group {
     margin-bottom: 0.5rem;
     position: relative;
 }

 .label-text {
     display: block;
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 0.25rem;
     margin-left: 0.25rem;
     transition: opacity 0.2s;
 }

 .input-wrapper {
     position: relative;
 }

 .input-icon {
     position: absolute;
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: #9ca3af;
     z-index: 2;
 }

 .custom-input {
     width: 100%;
     background-color: var(--light-gray);
     border: 2px solid transparent;
     padding: 0.75rem 1rem 0.75rem 2.5rem;
     border-radius: var(--input-radius);
     font-size: 1.125rem;
     font-weight: 600;
     transition: all 0.3s ease;
     font-family: var(--font-family);
 }

 .custom-input:focus {
     background-color: #fff;
     border-color: var(--primary-color);
     outline: none;
     box-shadow: 0 0 0 4px rgba(10, 236, 51, 0.1);
 }

 .custom-input.error {
     border-color: var(--error-color);
 }

 /* Mobile Input Specifics */
 .country-code {
     position: absolute;
     left: 2.6rem;
     top: 50%;
     transform: translateY(-50%);
     font-weight: 700;
     color: #9ca3af;
     pointer-events: none;
     z-index: 2;
 }

 .custom-input.mobile-pad {
     padding-left: 5.2rem;
 }

 /* --- 5. LANGUAGE SELECT --- */
 .form-select {
     padding: 8px 12px;
     border-radius: 8px;
     border: 2px solid var(--soft-gray);
     background-color: #fff;
     font-family: var(--font-family);
     font-weight: 600;
     color: var(--dark-blue);
     cursor: pointer;
     outline: none;
     appearance: none;
     background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
     background-repeat: no-repeat;
     background-position: right .7em top 50%;
     background-size: .65em auto;
     padding-right: 2.5em;
     min-width: 160px;
 }

 /* --- 6. AUTOCOMPLETE --- */
 .city-autocomplete-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: white;
     border: 1px solid #ddd;
     border-top: none;
     border-radius: 0 0 12px 12px;
     z-index: 100;
     max-height: 200px;
     overflow-y: auto;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     display: none;
 }

 .city-autocomplete-item {
     padding: 10px 15px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 10px;
     border-bottom: 1px solid #f0f0f0;
 }

 .city-autocomplete-item:hover {
     background-color: #f9f9f9;
 }

 .city-info {
     display: flex;
     flex-direction: column;
 }

 .city-name {
     font-weight: 600;
     font-size: 0.9rem;
 }

 .state-name {
     font-size: 0.75rem;
     color: #888;
 }

 /* --- 7. COMPANY GRID --- */
 .company-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 0.75rem;
 }

 .brand-checkbox {
     display: none;
 }

 .brand-card {
     height: 6rem;
     border: 2px solid var(--soft-gray);
     border-radius: var(--input-radius);
     background-color: #fff;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .brand-card:hover {
     border-color: #ccc;
     transform: translateY(-2px);
 }

 .brand-checkbox:checked+.brand-card {
     border-color: var(--primary-color);
     background-color: #f0fdf4;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }

 .check-icon {
     display: none;
     color: var(--primary-color);
     position: absolute;
     top: 5px;
     right: 5px;
     background: white;
     border-radius: 50%;
 }

 .brand-checkbox:checked+.brand-card .check-icon {
     display: block;
 }

 .brand-logo {
     max-width: 60%;
     max-height: 60%;
     object-fit: contain;
 }

 /* --- 8. BUTTONS --- */
 .btn-submit {
     width: 100%;
     background-color: var(--primary-color);
     color: var(--dark-blue);
     font-weight: 800;
     font-size: 1.25rem;
     padding: 1rem;
     border: none;
     border-radius: var(--input-radius);
     cursor: pointer;
     transition: transform 0.2s;
     box-shadow: 0 4px 14px 0 rgba(10, 236, 51, 0.39);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     font-family: var(--font-family);
     margin-top: 0.5rem;
 }

 .btn-submit:hover {
     transform: scale(1.02);
     filter: brightness(105%);
 }

 .btn-submit:disabled {
     opacity: 0.7;
     cursor: not-allowed;
 }

 .legal-text {
     text-align: center;
     font-size: 0.75rem;
     color: #9ca3af;
     margin-top: 1rem;
 }

 .page-footer {
     margin-top: 2rem;
     margin-bottom: 2rem;
     text-align: center;
 }

 .trust-badges {
     display: flex;
     justify-content: center;
     gap: 1rem;
     font-size: 0.875rem;
     color: var(--text-muted);
 }

 .trust-item {
     display: flex;
     align-items: center;
     gap: 0.25rem;
 }

 .trust-item svg {
         width: 20px;
    height: 20px;
    fill: var(--primary-color);
 }

 /* Success Message */
 #successMessage {
     display: none;
     padding: 150px 2rem 150px 2rem;
     text-align: center;
     animation: fadeIn 0.5s;
 }

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

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Responsive */
 @media (max-width: 480px) {
     .container {
         padding: 0;
     }

     .card-header h1 {
         font-size: 1.5rem;
     }

     .main-logo {
         height: 35px;
     }
 }