:root { color-scheme: dark; --blue: #075cbb; --white: #fff; }
* { box-sizing: border-box; }
html { min-width: 280px; background: var(--blue); }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; color: var(--white); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 64px 28px 44px; }
.community { width: 100%; max-width: 760px; text-align: center; }
.brand { position: relative; width: min(100%, 610px); aspect-ratio: 1128 / 455; overflow: hidden; margin: 0 auto 42px; }
.brand img { position: absolute; display: block; width: 111.17%; max-width: none; height: auto; left: -5.58%; top: -91%; filter: grayscale(1) brightness(.7) contrast(3); mix-blend-mode: screen; }
.description { max-width: 660px; margin: 0 auto 34px; font-size: 24px; line-height: 1.5; font-weight: 400; text-wrap: pretty; }
.apply { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 350px; max-width: 100%; min-height: 60px; padding: 15px 24px; border: 0; border-radius: 10px; background: #fff; color: var(--blue); font: 600 22px/1.35 Arial, Helvetica, sans-serif; opacity: 1; -webkit-text-fill-color: var(--blue); }
.apply { text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.apply:hover { background: #edf4ff; }
.apply:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.apply span { white-space: nowrap; }
.whatsapp-icon { width: 30px; height: 30px; flex: 0 0 auto; }
.application-note { max-width: 470px; margin: 22px auto 0; font-size: 18px; line-height: 1.5; }
footer { padding: 16px 24px 30px; text-align: center; font-size: 14px; line-height: 1.6; color: #f2f6ff; }
@media (max-width: 600px) {
  main { padding: 64px 24px 42px; }
  .community { max-width: 390px; }
  .brand { max-width: 340px; margin-bottom: 44px; }
  .description { font-size: 18px; line-height: 1.5; margin-bottom: 32px; }
  .apply { width: 100%; min-height: 56px; font-size: clamp(16px, 4.85vw, 19px); padding-inline: 16px; gap: 10px; }
  .whatsapp-icon { width: 28px; height: 28px; }
  .application-note { max-width: 325px; font-size: 15px; line-height: 1.55; margin-top: 20px; }
  footer { font-size: 12px; line-height: 1.65; padding: 12px 26px 26px; max-width: 390px; align-self: center; }
  footer span { display: block; }
}
@media (max-height: 700px) and (max-width: 600px) { main { padding-top: 36px; padding-bottom: 30px; } .brand { margin-bottom: 30px; } }
