:root {
      --hero: #022437;
      --hero-deep: #022437;
      --green: #53e044;
      --green-dark: #00a859;
      --teal: #087f9e;
      --teal-dark: #006e8b;
      --card: #ffffff;
      --text: #111318;
      --muted: #535961;
      --line: #d9dde1;
      --light-band: #e2e7e9;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      width: 100%;
      min-height: 100%;
      font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
      color: var(--text);
      background: #fff;
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
    }

    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: #fff;
      position: relative;
    }

    /* Upper hero area */
    .hero {
      position: relative;
      min-height: auto;
      background: var(--hero);
      overflow: hidden;
    }

    .hero-inner {
      position: relative;
      padding-bottom: 28px;
      width: min(100%, 1530px);
      min-height: auto;
      margin: 0 auto;
    }

    /* Branded header: NowBridge instead of third-party identity */
    .brand {
      position: absolute;
      top: 66px;
      left: 12px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 0;
      color: #fff;
    }

    .brand img {
      width: 198px;
      height: 56px;
      object-fit: contain;
      object-position: left center;
      filter: none;
      background: transparent;
    }

    .brand-wordmark {
      display: none;
      font-size: 34px;
      font-weight: 700;
      letter-spacing: -1.4px;
    }

    .brand-wordmark span {
      color: #54e444;
    }

    .brand-divider {
      width: 1px;
      height: 34px;
      background: rgba(255,255,255,.35);
      margin-right: 12px;
    }

    .brand-signin {
      font-size: 32px;
      font-weight: 700;
      letter-spacing: -.5px;
      color: #f8fbfc;
    }

    .hero-copy {
      position: absolute;
      left: 131px;
      top: 205px;
      width: 445px;
      z-index: 3;
      color: #fff;
    }

    .hero-copy h1 {
      margin: 0;
      font-size: 26px;
      line-height: 1.18;
      font-weight: 700;
      letter-spacing: -.9px;
    }

    .hero-copy h1 span {
      display: block;
    }

    .hero-copy p {
      margin: 0;
      font-size: 19px;
      line-height: 1.5;
      max-width: 415px;
      color: #e8f1f4;
    }


    .hero-copy .intro-profile {
      font-size: 16px;
      font-weight: 700;
    }

    .opportunity-list {
      margin-top: 32px;
      max-width: 455px;
      color: #e8f1f4;
      font-size: 14px;
      line-height: 1.5;
    }

    .opportunity-list p {
      margin: 0 0 8px;
      font-size: 14px;
      line-height: 1.5;
      color: #e8f1f4;
    }

    .opportunity-list ul {
      margin: 0;
      padding-left: 20px;
    }

    .opportunity-list li {
      margin: 4px 0;
      text-align: justify;
      text-justify: inter-word;
    }

    .brand img {
      width: 100px;
      height: auto;
      max-height: 78px;
      object-fit: contain;
      object-position: left center;
      filter: none;
      background: transparent;
      margin-right: 6px;
    }

    /* Decorative demonstration illustration */
    .illustration {
      position: absolute;
      left: 380px;
      bottom: 0;
      width: 460px;
      height: 500px;
      z-index: 2;
    }

    .illus-ring {
      position: absolute;
      width: 70px;
      height: 70px;
      left: 166px;
      top: 76px;
      border: 14px solid #00aa69;
      border-radius: 50%;
      background: transparent;
    }

    .illus-ring::before {
      content: "";
      position: absolute;
      width: 2px;
      height: 40px;
      left: 29px;
      top: -48px;
      background: #c8dce2;
      transform: rotate(8deg);
      transform-origin: bottom;
    }

    .block {
      position: absolute;
      display: block;
    }

    .b1 { left: 92px; top: 230px; width: 90px; height: 90px; background:#58e34b; }
    .b2 { left: 182px; top: 230px; width: 90px; height: 90px; background:#00a76d; }
    .b3 { left: 272px; top: 230px; width: 90px; height: 90px; background:#64e655; }
    .b4 { left: 92px; top: 320px; width: 90px; height: 90px; background:#00a768; border-radius: 0 0 35px 35px; }
    .b5 { left: 182px; top: 320px; width: 90px; height: 90px; background:#00a36b; }
    .b6 { left: 272px; top: 320px; width: 90px; height: 90px; background:#5be44d; }
    .b7 { left: 182px; top: 410px; width: 90px; height: 90px; background:#c9ced1; }
    .b8 { left: 272px; top: 410px; width: 90px; height: 90px; background:#08985f; border-radius: 0 0 45px 45px; }

    .white-cut-1 {
      position: absolute;
      left: 92px;
      top: 156px;
      width: 90px;
      height: 74px;
      background: #fff;
      border-radius: 90px 90px 0 0;
    }

    .white-cut-2 {
      position: absolute;
      left: 272px;
      top: 156px;
      width: 90px;
      height: 74px;
      background: #fff;
      border-radius: 90px 90px 0 0;
    }

    .dark-cut {
      position: absolute;
      left: 227px;
      top: 190px;
      width: 46px;
      height: 45px;
      background: var(--hero);
      border-radius: 0 0 25px 25px;
    }

    .circle {
      position: absolute;
      left: 107px;
      top: 245px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #00a769;
    }

    .circle2 {
      position: absolute;
      left: 287px;
      top: 245px;
      width: 56px;
      height: 56px;
      border-radius: 0 28px 28px 0;
      background: #00a769;
    }

    .person {
      position: absolute;
      width: 32px;
      height: 70px;
      border-radius: 16px;
      background: #e9edf0;
    }

    .person::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #e4a276;
      left: 9px;
      top: -12px;
    }

    .person.one { left: 150px; top: 200px; transform: rotate(-7deg); background:#dbe5eb; }
    .person.two { left: 320px; top: 236px; transform: rotate(10deg); background:#eceef0; }
    .person.three { left: 200px; top: 352px; transform: rotate(22deg); background:#dbe5eb; }
    .person.four { left: 116px; top: 444px; background:#dfe5e7; width: 40px; height: 56px; }
    .person.five { left: 328px; top: 450px; background:#dfe5e7; width: 34px; height: 50px; }

    .small-board {
      position: absolute;
      left: 324px;
      top: 330px;
      width: 96px;
      height: 92px;
      border: 4px solid #b7c1c5;
    }

    .small-board::before,
    .small-board::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(45deg, transparent 48%, #b7c1c5 49%, #b7c1c5 52%, transparent 53%),
        linear-gradient(-45deg, transparent 48%, #b7c1c5 49%, #b7c1c5 52%, transparent 53%);
    }

    .support {
      position: absolute;
      left: 327px;
      top: 430px;
      width: 92px;
      height: 8px;
      background: #b7c1c5;
    }

    /* Login card */
    .login-card {
      position: absolute;
      top: 200px;
      right: 110px;
      width: 500px;
      min-height: 300px;
      background: var(--card);
      border-radius: 8px;
      border-top: 9px solid var(--green);
      box-shadow: 0 10px 20px rgba(0,0,0,.20);
      padding: 22px 32px 12px;
      z-index: 4;
    }

    .login-card h2 {
      margin: 0 0 22px;
      text-align: center;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: -.5px;
    }

    .field {
      margin-bottom: 16px;
    }

    label {
      display: block;
      margin-bottom: 10px;
      font-size: 13px;
      line-height: 1;
      color: #20252a;
    }

    label::before {
      content: "*";
      color: #e5002b;
      font-weight: 400;
      margin-right: 4px;
    }

    input {
      width: 100%;
      height: 52px;
      border: 1px solid #98a3a9;
      border-radius: 9px;
      padding: 0 17px;
      background: #fff;
      color: #1a1e22;
      font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
      font-size: 13px;
      outline: none;
    }

    input:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 2px rgba(8,127,158,.12);
    }

    button {
      width: 100%;
      height: 52px;
      border: 0;
      border-radius: 9px;
      background: var(--teal);
      color: #fff;
      font: inherit;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover { background: var(--teal-dark); }

    .secondary {
      margin-top: 12px;
      height: 52px;
      background: #fff;
      color: var(--teal);
      border: 1px solid var(--teal);
    }

    .secondary:hover {
      background: #f5fbfd;
      color: var(--teal-dark);
    }

    .help {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #20252a;
    }
    
    .help a {
      color: var(--teal);
      text-decoration: none;
    }

    .help a:hover {
      text-decoration: underline;
    }

    .login-hint {
      margin: -16px 0 26px;
      text-align: center;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.4;
    }

    #loginResponseMessage {
      min-height: 21px;
      margin: 14px 0 0;
      text-align: center;
      font-size: 14px;
      line-height: 1.4;
    }

    .hidden { display:none !important; }

    /* Bottom band / footer */
    .lower-band {
      display: none;
      height: 0;
      border: 0;
      margin: 0;
      padding: 0;
    }

    footer {
      min-height: 70px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      padding: 22px 42px 18px 48px;
    }

    .footer-left {
      display: flex;
      flex-direction: column;
      gap: 13px;
      flex: 1;
      min-width: 0;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      white-space: nowrap;
      width: 100%;
    }

    .footer-brand img {
      width: 95px;
      height: 62px;
      object-fit: contain;
      object-position: left center;
      flex: 0 0 auto;
    }

    .footer-separator {
      width: 1px;
      height: 52px;
      background: #83919a;
      flex: 0 0 1px;
    }

    .footer-slogan {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      margin: 0;
    }

    .footer-links {
      display: flex;
      gap: 37px;
      color: #117d9b;
      font-size: 13px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .footer-made-with {
      margin-top: 10px;
      font-size: 13px;
      color: var(--muted);
      text-align: center;
    }

    .footer-heart {
      font-size: 12px;
    }

    .footer-copyright {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      text-align: center;
    }

    .footer-links a {
      color: #117d9b;
      text-decoration: none;
    }

    .social {
      display: flex;
      align-items: center;
      gap: 34px;
      font-size: 33px;
      font-weight: 700;
      color: #053247;
    }

    .social span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 42px;
    }

    @media (min-width: 1101px) {
      .hero {
        min-height: 730px;
      }

      .hero-inner {
        min-height: 730px;
      }
    }

    @media (min-width: 1101px) {
      .hero-copy h1 {
        font-size: 24px;
      }

      .hero-copy {
        width: 650px;
      }

      .hero-copy p {
        font-size: 27px;
        max-width: 650px;
      }

      .opportunity-list {
        max-width: 650px;
      }

      .hero-copy p {
        font-size: 21px;
      }

      .hero-copy .intro-profile {
        font-size: 21px;
      }

      .opportunity-list,
      .opportunity-list p,
      .opportunity-list li {
        font-size: 18px;
      }

      .opportunity-list li {
        text-align: left;
        text-justify: auto;
      }

      .login-card h2 {
        font-size: 20px;
      }

      label,
      input {
        font-size: 14px;
      }

      button {
        font-size: 16px;
      }

      footer {
        min-height: 70px;
        padding: 20px 42px 10px 48px;
      }

      .footer-brand img {
        width: 110px;
        height: 72px;
      }

      .footer-separator {
        height: 56px;
      }

      .footer-slogan {
        font-size: 24px;
      }

      .footer-links {
        font-size: 16px;
        gap: 30px;
      }

      .footer-made-with,
      .footer-copyright {
        font-size: 15px;
      }
    }

    @media (max-width: 1200px) {
      .login-card {
        width: 48%;
        right: 26px;
      }

      .hero-copy {
        left: 35px;
      }

      .illustration {
        left: 265px;
        transform: scale(.84);
        transform-origin: bottom left;
      }

      .brand {
        left: 28px;
      }
    }

    @media (max-width: 900px) {
      .hero {
        min-height: auto;
      }

      .hero-inner {
        min-height: auto;
        padding: 112px 16px 36px;
      }

      .brand {
        position: absolute;
        top: 20px;
        left: 20px;
      }

      .brand img {
        width: 160px;
        height: 46px;
      }

      .brand-signin {
        font-size: 28px;
        font-weight: 700;
      }

      .hero-copy {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        max-width: 650px;
        margin: 0 auto 28px;
        text-align: center;
      }

      .hero-copy h1 {
        font-size: 28px;
      }

      .illustration {
        display: none;
      }

      .login-card {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 620px);
        margin: 0 auto;
      }

      .lower-band { display: none; }

      footer {
        flex-direction: column;
        align-items: flex-start;
      }

      .social {
        align-self: flex-start;
      }
    }

    @media (max-width: 560px) {
      .hero-inner {
        padding: 100px 12px 22px;
      }

      .brand-divider {
        display: none;
      }

      .brand-signin {
        display: block;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.15;
        max-width: 320px;
      }

      .hero-copy h1 {
        font-size: 25px;
      }

      .login-card {
        padding: 34px 22px 26px;
        border-top-width: 8px;
      }

      .login-card h2 {
        font-size: 20px;
        margin-bottom: 31px;
      }

      .footer-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
      }

      .footer-separator { display:none; }
      .footer-links { gap: 15px 22px; }
      .social { gap: 18px; }
    }


    /* Responsividade reforçada: desktop, notebook, tablet e celular */
    img { max-width: 100%; }

    .hero-inner,
    .hero-copy,
    .login-card,
    footer,
    .footer-left,
    .footer-brand {
      min-width: 0;
    }

    .hero-copy p,
    .opportunity-list,
    .opportunity-list p,
    .opportunity-list li,
    .footer-slogan,
    .footer-links a,
    .help a {
      overflow-wrap: anywhere;
    }

    @media (max-width: 1100px) {
      .hero {
        min-height: auto;
      }

      .brand img {
        margin-right: 1px;
      }

      .hero-inner {
        min-height: auto;
        padding: 112px 28px 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .brand {
        top: 20px;
        left: 28px;
        right: 28px;
        justify-content: center;
      }

      .hero-copy {
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 760px);
        max-width: 760px;
        margin: 0 auto 30px;
        text-align: center;
      }

      .hero-copy p,
      .opportunity-list {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
      }

      .opportunity-list {
        text-align: left;
      }

      .illustration {
        display: none;
      }

      .login-card {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 620px);
        min-height: 0;
        margin: 0 auto;
      }
    }

    @media (max-width: 768px) {
      .hero-inner {
        padding: 96px 18px 30px;
      }

      .brand img {
        margin-right: -15px;
      }

      .brand {
        left: 18px;
        right: 18px;
        gap: 0;
      }

      .brand img {
        width: 135px;
        max-height: 58px;
      }

      .brand-signin {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.15;
      }

      .hero-copy h1 {
        font-size: clamp(22px, 5.5vw, 26px);
        line-height: 1.15;
      }

      .hero-copy p {
        font-size: 16px;
        line-height: 1.4;
        max-width: 100%;
      }

      .hero-copy .intro-profile {
        font-size: 16px;
      }

      .opportunity-list,
      .opportunity-list p {
        font-size: 13.5px;
        line-height: 1.45;
      }

      .opportunity-list ul {
        padding-left: 19px;
      }

      .login-card {
        padding: 28px 24px 22px;
      }

      .login-card h2 {
        font-size: clamp(16px, 4vw, 18px);
        margin-bottom: 26px;
      }

      label,
      input {
        font-size: 13px;
      }

      input,
      button {
        min-height: 50px;
      }

      button {
        font-size: 14px;
      }

      .secondary {
        margin-top: 10px;
        height: 50px;
      }

      .help {
        margin-top: 22px;
        padding-top: 18px;
      }

      footer {
        padding: 24px 20px;
        gap: 20px;
      }

      .footer-slogan {
        font-size: 17px;
      }

      .footer-links {
        gap: 12px 20px;
      }
    }

    @media (max-width: 560px) {
      .hero-inner {
        padding: 84px 12px 22px;
      }

      .brand {
        top: 14px;
        left: 14px;
        right: 14px;
      }

      .brand img {
        width: 125px;
      }

      .brand-divider {
        display: block;
      }

      .brand-signin {
        display: block;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.15;
        max-width: 320px;
      }

      .hero-copy {
        margin-bottom: 22px;
      }

      .hero-copy h1 {
        font-size: clamp(21px, 6.5vw, 24px);
      }

      .hero-copy p {
        font-size: 14px;
        max-width: 100%;
      }

      .hero-copy .intro-profile {
        font-size: 14px;
      }

      .opportunity-list,
      .opportunity-list p {
        font-size: 13px;
      }

      .login-card {
        width: 100%;
        padding: 24px 18px 20px;
        border-radius: 7px;
      }

      .field {
        margin-bottom: 18px;
      }

      label {
        margin-bottom: 9px;
      }

      input {
        padding: 0 14px;
      }

      .help {
        font-size: 12px;
      }

      footer {
        align-items: stretch;
        text-align: center;
        padding: 22px 16px;
      }

      .footer-left,
      .footer-brand {
        width: 100%;
        align-items: center;
      }

      .footer-brand {
        flex-direction: column;
        gap: 8px;
      }

      .footer-brand img {
        width: 86px;
        height: auto;
      }

      .footer-separator {
        display: none;
      }

      .footer-links {
        width: 100%;
        justify-content: center;
        gap: 10px 16px;
        font-size: 12px;
      }
    }

    @media (max-width: 360px) {
      .hero-inner {
        padding-left: 9px;
        padding-right: 9px;
      }

      .login-card {
        padding-left: 14px;
        padding-right: 14px;
      }

      .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 9px;
      }
    }

    .talent-bank-image {
      display: block;
      width: 6cm;
      height: 3cm;
      max-width: 100%;
      margin: 18px auto 0;
      object-fit: cover;
      border-radius: 8px;
    }

    @media (max-width: 560px) {
      .talent-bank-image {
        width: min(100%, 6cm);
        height: auto;
        aspect-ratio: 2 / 1;
      }
    }


    .linkedin-footer {
      position: absolute;
      right: 22px;
      bottom: 18px;
      z-index: 20;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      text-decoration: none;
    }

    .linkedin-footer img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    @media (max-width: 560px) {
      .linkedin-footer {
        right: 14px;
        bottom: 14px;
        width: 36px;
        height: 36px;
      }
    }

    .mfa-card h2 {
        margin-bottom: 16px;
        line-height: 1.3;
    }

    .mfa-copy {
        margin: 0 0 16px;
        font-size: 14px;
        line-height: 1.5;
        color: #20252a;
    }

    .mfa-instruction {
        margin-bottom: 20px;
    }

    .mfa-card .field {
        margin-bottom: 16px;
    }

    @media (max-width: 560px) {
        .mfa-copy {
          font-size: 13px;
        }
    }