:root {
      --brand-pink: #d72a58;
      --brand-purple: #932390;
      --brand-green: #8ec83d;
      --brand-blue: #0777bc;
      --brand-yellow: #f19707;
      --brand-orange: #f25925;
      --dark: #0F172A;
      --gray-700: #334155;
      --gray-500: #64748b;
      --gray-300: #cbd5e1;
      --white: #ffffff;
    }

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

    body {
      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.6;
      color: var(--gray-700);
      /* background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-pink) 50%, var(--brand-orange) 100%); */
      min-height: 100vh;
      overflow-x: hidden;
      padding: 0;
      margin: 0;
    }

    h1, h2, h3 {
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
    }

    .page-wrapper {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
    }

    @media (max-width: 767.98px) {
      .page-wrapper {
        padding: 1rem;
        align-items: flex-start;
      }
    }

    .signup-container {
      background: var(--white);
      border-radius: 30px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
      max-width: 1100px;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
      animation: slideUp 0.6s ease;
      position: relative;
    }

    @media (max-width: 968px) {
      .signup-container {
        grid-template-columns: 1fr;
        border-radius: 24px;
      }
    }

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

    /* Left Side - Branding */
    .branding-side {
      /* background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-pink) 100%); */
      background: linear-gradient(135deg, var(--brand-blue) 0%, royalblue 100%);
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      color: white;
      position: relative;
      overflow: hidden;
      gap: 20px;
    }

    @media (max-width: 968px) {
      .branding-side {
        padding: 2.5rem 2rem;
        text-align: center;
      }
    }

    @media (max-width: 480px) {
      .branding-side {
        padding: 2rem 1.5rem;
      }
    }

    /* Decorative circles */
    .branding-side::before {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255,255,255,0.15), transparent);
      border-radius: 50%;
      top: -100px;
      right: -100px;
    }

    .branding-side::after {
      content: '';
      position: absolute;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(142,200,61,0.2), transparent);
      border-radius: 50%;
      bottom: -50px;
      left: -50px;
    }

    .logo-section {
      position: relative;
      z-index: 1;
      margin-bottom: 2rem;
    }

    .logo {
      max-width: 160px;
      height: auto;
    }

    @media (max-width: 968px) {
      .logo {
        max-width: 140px;
        margin: 0 auto;
        display: block;
      }
    }

    .branding-content {
      position: relative;
      z-index: 1;
    }

    .branding-content h1 {
      font-size: 2.25rem;
      font-weight: 800;
      margin-bottom: 1rem;
      line-height: 1.2;
    }

    @media (max-width: 968px) {
      .branding-content h1 {
        font-size: 2rem;
      }
    }

    @media (max-width: 480px) {
      .branding-content h1 {
        font-size: 1.75rem;
      }
    }

    .branding-content p {
      font-size: 1rem;
      opacity: 0.95;
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }

    .features-list {
      list-style: none;
      margin-top: 1.5rem;
    }

    @media (max-width: 968px) {
      .features-list {
        text-align: left;
        max-width: 400px;
        margin: 1.5rem auto 0;
      }
    }

    .features-list li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.875rem;
      font-size: 0.95rem;
      opacity: 0.95;
    }

    .features-list li::before {
      content: '✓';
      width: 28px;
      height: 28px;
      background: var(--brand-green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      flex-shrink: 0;
      font-size: 0.875rem;
    }

    /* Right Side - Form */
    .form-side {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-height: 100%;
      overflow-y: auto;
    }

    @media (max-width: 968px) {
      .form-side {
        padding: 2.5rem 2rem;
      }
    }

    @media (max-width: 480px) {
      .form-side {
        padding: 2rem 1.5rem;
      }
    }

    .form-header {
      margin-bottom: 2rem;
    }

    @media (max-width: 480px) {
      .form-header {
        margin-bottom: 1.5rem;
      }
    }

    .form-header h2 {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 0.5rem;
      line-height: 1.3;
    }

    @media (max-width: 480px) {
      .form-header h2 {
        font-size: 1.5rem;
      }
    }

    .form-header p {
      color: var(--gray-500);
      font-size: 0.95rem;
    }

    .free-badge {
      display: inline-block;
      background: linear-gradient(135deg, var(--brand-purple), #7a1e7a);
      color: white;
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 700;
      margin-left: 0.5rem;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 12px rgba(142,200,61,0.3);
    }

    .signup-form {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    @media (max-width: 640px) {
      .form-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
      }
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .form-group.full-width {
      grid-column: 1 / -1;
    }

    .form-group label {
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--dark);
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .required {
      color: var(--brand-pink);
    }

    .form-group input,
    .form-group select {
      padding: 0.875rem 1rem;
      border: 2px solid var(--gray-300);
      border-radius: 12px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.95rem;
      color: var(--dark);
      transition: all 0.2s ease;
      background: var(--white);
      width: 100%;
    }

    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--brand-blue);
      box-shadow: 0 0 0 4px rgba(147, 35, 144, 0.1);
    }

    .form-group input::placeholder {
      color: var(--gray-500);
    }

    .form-group select {
      appearance: none;
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
      background-repeat: no-repeat;
      background-position: right 1rem center;
      padding-right: 2.5rem;
      cursor: pointer;
    }

    .submit-button {
      background: linear-gradient(135deg, var(--brand-yellow), var(--brand-orange));
      color: white;
      padding: 1rem 2rem;
      border: none;
      border-radius: 12px;
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 0.5rem;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(142,200,61,0.3);
    }

    .submit-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s ease;
    }

    .submit-button:hover::before {
      left: 100%;
    }

    .submit-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(142,200,61,0.4);
    }

    .submit-button:active {
      transform: translateY(0);
    }

    .submit-button:disabled {
      opacity: 0.7;
      cursor: not-allowed;
      transform: none;
    }

    .signin-section {
      margin-top: 1.5rem;
      text-align: center;
      padding-top: 1.5rem;
      border-top: 2px solid var(--gray-300);
    }

    .signin-section p {
      color: var(--gray-500);
      font-size: 0.875rem;
      margin-bottom: 0.5rem;
    }

    .signin-link {
      color: var(--brand-blue);
      text-decoration: none;
      font-weight: 600;
      transition: color 0.2s ease;
    }

    .signin-link:hover {
      color: var(--brand-pink);
      text-decoration: underline;
    }

    /* Modal */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      animation: fadeIn 0.3s ease;
      padding: 1rem;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .modal-content {
      background: white;
      padding: 2.5rem;
      border-radius: 24px;
      text-align: center;
      max-width: 500px;
      width: 100%;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      animation: modalSlideUp 0.4s ease;
    }

    @media (max-width: 480px) {
      .modal-content {
        padding: 2rem 1.5rem;
      }
    }

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

    .modal-content .success-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--brand-green), #7ab82f);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      font-size: 3rem;
      box-shadow: 0 10px 25px rgba(142,200,61,0.3);
    }

    @media (max-width: 480px) {
      .modal-content .success-icon {
        width: 70px;
        height: 70px;
        font-size: 2.5rem;
      }
    }

    .modal-content h3 {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 1rem;
    }

    @media (max-width: 480px) {
      .modal-content h3 {
        font-size: 1.5rem;
      }
    }

    .modal-content p {
      color: var(--gray-500);
      font-size: 1rem;
      line-height: 1.6;
    }

    .spinner {
      margin: 2rem auto 0;
      width: 40px;
      height: 40px;
      border: 4px solid var(--gray-300);
      border-top-color: var(--brand-purple);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }