:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080d1a;
  color: #f7f9ff;
  font-synthesis: none;
  --muted: #b8c3d8;
  --link: #a3bcff;
}
* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100svh; margin: 0; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; }
.backdrop { position: fixed; z-index: -1; inset: 0; background: #0a1225 url("assets/mosaico.webp") center 47% / cover no-repeat; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,#060a15e8 0%,#070c1855 31%,#080d1a55 56%,#060a15ed 100%),radial-gradient(ellipse at 50% 52%,#080d20aa 3%,#080d1a33 65%,#05081588 100%); }
.site-header { width: 100%; padding: 30px clamp(24px,5vw,76px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: block; width: clamp(155px,17vw,216px); height: auto; }
a { color: var(--link); text-underline-offset: 4px; }
a:hover { color: #fff; }
.support { color: #f2f5ff; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #d0dcff45; background: #080f20b3; padding: 10px 15px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; }
.support:hover { border-color: #a4baff; background: #14224a; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linejoin: round; stroke-linecap: round; flex: none; }
main { display: grid; place-items: center; padding: 28px 20px 40px; }
.panel { width: min(100%,432px); padding: 37px 38px 32px; border-radius: 18px; border: 1px solid #9cb3f13b; background: linear-gradient(150deg,#0f172bea,#090f1bf5 70%); box-shadow: 0 32px 85px #02050ebf, inset 0 1px #d2e0ff10; backdrop-filter: blur(16px); }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #a7beff; font-size: 10px; letter-spacing: .19em; font-weight: 750; }
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #7298ff; box-shadow: 0 0 12px #4f78ffab; }
h1 { margin: 13px 0 7px; font-size: clamp(35px,5vw,45px); line-height: 1.07; letter-spacing: -.049em; }
.intro { margin: 0 0 27px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.field { margin-bottom: 17px; }
label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 8px; }
input { width: 100%; min-height: 50px; border: 1px solid #778cb659; border-radius: 8px; background: #182237; color: #f8faff; padding: 11px 13px; font: inherit; font-size: 16px; }
input::placeholder { color: #9aa9c4; opacity: 1; }
input:focus { outline: 2px solid #83a5ff; outline-offset: 1px; }
.password { position: relative; }
.password input { padding-right: 54px; }
button { font: inherit; cursor: pointer; }
.toggle { position: absolute; inset: 3px 4px 3px auto; display: grid; place-items: center; width: 44px; border: 0; border-radius: 6px; background: transparent; color: #adbad2; }
.toggle:hover { color: white; background: #ffffff10; }
.eye-slash { display: none; }
.toggle[aria-pressed="true"] .eye-slash { display: block; }
.form-links { display: flex; justify-content: flex-end; margin: 1px 0 20px; font-size: 13px; }
.submit { position: relative; width: 100%; min-height: 51px; border: 1px solid #7292ff; border-radius: 8px; background: linear-gradient(100deg,#2855e7,#1743d4); box-shadow: 0 5px 20px #1740e244; color: white; font-size: 15px; font-weight: 750; transition: background-color .2s,filter .2s; }
.submit:hover { filter: brightness(1.18); }
.submit svg { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
:where(a,button):focus-visible { outline: 2px solid #a4beff; outline-offset: 4px; }
.subscribe { margin-top: 24px; padding-top: 21px; border-top: 1px solid #a5b7e128; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.65; }
.subscribe a { margin-left: 3px; font-weight: 700; }
footer { padding: 8px 20px 23px; text-align: center; color: #b2bdd4; font-size: 11px; letter-spacing: .025em; }
footer span { margin: 0 5px; }
@media (max-width: 500px) {
  .site-header { padding: 19px 18px; }
  .support { padding: 9px; font-size: 11px; gap: 5px; }
  .support svg { width: 15px; height: 15px; }
  main { padding: 22px 16px 31px; }
  .panel { padding: 30px 24px 25px; }
  .backdrop { background-position: 48% center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media (max-width: 360px) {
  .logo { width: 135px; }
  .support, .subscribe a { white-space: nowrap; }
  .panel { padding: 23px 19px 20px; }
  main { padding-block: 14px 23px; }
}
.trial-link { display: grid; place-items: center; min-height: 46px; margin-top: 12px; border: 1px solid #7c9ef266; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; color: #c9d7ff; }
.trial-link:hover { background: #27427777; border-color: #a4baff; }