:root {
          --color-brand-primary: #2b6fb3;
          --color-accent-success: #1fa23a;

          --color-bg-light-blue: #F8FBFF;
          --color-bg-gradient-light: #bfefff;
          --color-bg-gradient-medium: #dff6ff;
          --color-bg-gradient-dark: #f6e6c8;
          --color-bg-white: #fff;

          --color-text-heading-primary: #2b6fb3;
          --color-text-heading-secondary: #374a5a;
          --color-text-label: #3b556a;
          --color-text-secondary: #536a82;
          --color-text-tertiary: #6b7a8a;
          --color-text-white: #fff;

          --color-border-light: #ddd;
          --color-border-medium-blue: #add3e1;
          --color-shadow: rgba(23, 35, 56, 0.12);
          --color-shadow-dark: rgba(0, 0, 0, 0.1);

          --color-password-bg: #ebf6ff;
          --color-password-text: #2b465a;
          --color-button-hover: #138033;
          --color-button-active: #0f6b26;
          --color-focus-outline: rgba(43, 111, 179, 0.25);
          --color-focus-outline-light: rgba(43, 111, 179, 0.18);
          --color-list-hover: #f6f9fb;
          --color-list-active: #eef7ff;

          --card-radius: 1.125rem;
      }

      body {
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(180deg, var(--color-bg-gradient-light) 0%, var(--color-bg-gradient-medium) 40%, var(--color-bg-gradient-dark) 100%);
          background-image: url('../img/background-sea.png');
          background-position: center;
          background-size: cover;
          font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif
      }

      h4 {
          margin-bottom: 1.5rem;
          color: var(--color-text-heading-primary);
      }

      h5 {
          font-size: 1.2rem;
          margin-bottom: 1rem;
          color: var(--color-text-heading-secondary);
      }

      a {
          color: var(--color-brand-primary);
          text-decoration: none;
          font-weight: 600
      }

      .signup-card {
          max-width: 980px;
          width: 100%;

          overflow: hidden;
          box-shadow: 0 0.375rem 1.875rem var(--color-shadow);
          display: flex;
          flex-direction: column;
          background: var(--color-bg-white)
      }

      .left-panel {
          padding: 1.75rem 1.5rem;
      }

      .right-panel {
          background: var(--color-bg-light-blue);
          padding: 1.75rem 1.5rem;
          border-top: solid 1px var(--color-border-medium-blue);
      }

      .brand {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: .6rem;
          margin-bottom: 1.5rem
      }

      .brand .logo {
          height: 33px;
      }


      .form-panel {
          background-color: var(--color-bg-light-blue);
          border: solid 1px var(--color-border-medium-blue);
          padding: 0.75rem 1.25rem;
          border-radius: 8px;
      }

      .form-label {
          font-size: .9rem;
          color: var(--color-text-label)
      }

      .form-control {
          border-radius: 0.125rem;
      }

      .form-row {
          margin-bottom: 1rem;
      }

      .password-field {
          position: relative;
      }

      .password-requirements {
          display: none;
          position: absolute;
          left: 0;
          bottom: calc(100% - 10px);
          background: var(--color-password-bg);
          border: 1px solid var(--color-border-light);
          padding: .5rem .75rem .5rem 2rem;
          border-radius: 8px;
          width: 290px;
          font-size: 1rem;
          color: var(--color-password-text);
          box-shadow: 1px 1px 6px var(--color-shadow-dark);
          z-index: 60;
      }

      .password-requirements::before {
          content: '';
          position: absolute;
          bottom: -6px;
          left: 14px;
          width: 10px;
          height: 10px;
          background: var(--color-password-bg);
          transform: rotate(45deg);
          border-right: 1px solid var(--color-border-light);
          border-bottom: 1px solid var(--color-border-light);
      }

      .password-field input:focus+.password-requirements {
          display: block;
      }

      .terms {
          font-size: .85rem;
          color: var(--color-text-tertiary)
      }

      .form-switch .form-check-label {
          margin-left: 0.75rem;
      }


      .form-switch .form-check-input:checked {
          background-color: var(--color-brand-primary);
          border-color: var(--color-brand-primary);
      }

      .form-switch .form-check-input:focus {
          box-shadow: 0 0 0 .25rem var(--color-focus-outline);
      }

      .btn-cta {
          background: var(--color-accent-success);
          border: none;
          color: var(--color-text-white);
          padding: .65rem 1rem;
          border-radius: 4px;
          transition: background-color .12s ease, transform .06s ease;
      }

      .btn-cta:hover,
      .btn-cta:focus {
          background-color: var(--color-button-hover);
          color: var(--color-text-white);
      }

      .btn-cta:active {
          background-color: var(--color-button-hover);
          transform: translateY(1px);
      }

      .features li {
          margin: 0.75rem 0;
          display: flex;
          gap: .75rem;
          align-items: center
      }

      .check {
          font-size: 1.125rem;
          color: var(--color-accent-success);
          flex: 0 0 1.125rem;
          margin-top: 0.1rem;
      }

      .contact {
          margin-top: 1.75rem;
      }

      .contact-items {
          display: flex;
          gap: 1.5rem;
          flex-wrap: wrap;
          margin-top: 0.75rem;
          justify-content: space-between;
      }

      .contact-item {
          display: flex;
          align-items: center;
          gap: .5rem;
          min-width: 150px
      }

      .contact-item a {
          color: var(--color-brand-primary);
          font-weight: 600;
          text-decoration: none;
      }

      /* Taal selector */
      .country-dropdown {
          position: relative;
          display: inline-block;
      }

      .country-selected {
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: .5rem;
          padding: 0.15rem 0.25rem;
          border-radius: 4px;
          font-size: .85rem;
          color: var(--color-text-tertiary);
          background-color: var(--color-bg-white);
          border: 0;
      }

      .country-selected:focus {
          outline: 2px solid var(--color-focus-outline-light);
          outline-offset: 2px;
      }

      .country-flag {
          width: 20px;
          height: auto;
          display: inline-block;
          vertical-align: middle;
      }

      .country-list {
          position: absolute;
          right: 0;
          top: calc(100% + 6px);
          background: var(--color-bg-white);
          border-radius: 6px;
          box-shadow: 0 8px 22px var(--color-shadow);
          padding: .25rem 0;
          min-width: 160px;
          z-index: 50;
          display: none;
          margin: 0;
          list-style: none;
      }

      .country-dropdown:focus-within .country-list {
          display: block;
      }

      .country-item {
          display: flex;
          gap: .6rem;
          align-items: center;
          padding: .45rem .75rem;
          color: var(--color-text-heading-secondary);
          text-decoration: none;
          font-size: .95rem;
      }

      .country-item:hover {
          background: var(--color-list-hover);
      }

      .country-item.selected,
      .country-item.active {
          background: var(--color-list-active);
          font-weight: 600;
      }

      .country-item.selected {
          background: var(--color-list-active);
          font-weight: 600;
      }

      .right-title {
          color: var(--color-brand-primary);
          margin-bottom: .5rem
      }

      .right-lead {
          color: var(--color-text-secondary)
      }

      .rights-note {
          font-size: .95rem;
          color: var(--color-text-heading-secondary);
          font-weight: 600
      }

      .copyright {
          border-top: solid 1px var(--color-border-light);
          padding-top: 1rem;
          font-size: 0.9rem;
      }

      @media(min-width:768px) {
          .signup-card {
              flex-direction: row;
              border-radius: var(--card-radius);
              width: 95%;
          }

          .left-panel {
              padding: 2.25rem 2.5rem;
          }

          .right-panel {
              background: var(--color-bg-light-blue);
              padding: 2.5rem 3rem;
          }

          .left-panel,
          .right-panel {
              flex: 1
          }

          .form-panel {
              background-color: unset;
              border: none;
              padding: 0;
              border-radius: 0;
          }

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