/* ============================================================
   MAXRENT — Sign in (light theme)
   ============================================================ */

:root{
  --ink:        #0a1124;
  --muted:      #5c6a86;
  --line:       rgba(10,17,36,.09);
  --line-2:     rgba(10,17,36,.055);

  --bg:         #ffffff;
  --bg-soft:    #f5f7fb;

  --brand:      #1b4df5;
  --brand-2:    #3fd0ff;
  --brand-3:    #2a7bff;
  --brand-deep: #1428d8;
  --brand-ink:  #0f37c9;
  --brand-wash: rgba(27,77,245,.07);

  --danger:     #d2213f;

  --grad:       linear-gradient(100deg, var(--brand-deep) 0%, var(--brand-3) 46%, var(--brand-2) 100%);
  --grad-text:  linear-gradient(100deg, var(--brand-deep) 0%, var(--brand) 38%, #1c96dd 100%);

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 28px;

  --shadow-s: 0 1px 2px rgba(10,17,36,.04), 0 4px 14px rgba(10,17,36,.05);
  --shadow-m: 0 2px 6px rgba(10,17,36,.05), 0 18px 44px -14px rgba(10,17,36,.14);
  --shadow-l: 0 34px 90px -30px rgba(12,32,90,.32);

  --ff: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-d: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Registered so the conic gradient's start angle can be animated */
@property --spin{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@keyframes chase{ to{ --spin:360deg; } }

body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--ink);
  font-family:var(--ff); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,p{ margin:0; }
em{ font-style:normal; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
svg{ width:100%; height:100%; display:block; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Background ─────────────────────────────────────────── */
.aurora{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.aurora__blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.aurora__blob--a{
  width:44vw; height:44vw; top:-14vw; left:-8vw;
  background:radial-gradient(circle at 40% 40%, rgba(63,208,255,.34), transparent 65%);
}
.aurora__blob--b{
  width:40vw; height:40vw; bottom:-16vw; left:10vw;
  background:radial-gradient(circle at 50% 50%, rgba(27,77,245,.24), transparent 65%);
}
.aurora__blob--c{
  width:38vw; height:38vw; top:20vw; right:-10vw;
  background:radial-gradient(circle at 50% 50%, rgba(42,123,255,.16), transparent 65%);
}

/* ── Shell ──────────────────────────────────────────────── */
.shell{
  min-height:100vh;
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:clamp(28px,4vw,64px);
  padding:clamp(28px,4vw,56px) clamp(20px,4vw,64px);
  max-width:1440px; margin-inline:auto;
}

/* ── Brand side ─────────────────────────────────────────── */
.brand__inner{ max-width:540px; }
.wordmark{ width:auto; display:inline-block; object-fit:contain; }
.wordmark--brand{ height:clamp(38px,4.4vw,58px); margin-bottom:26px; }
.wordmark--card{ height:30px; margin:0 auto 20px; }
.wordmark--xs{ height:1.55em; vertical-align:-.4em; display:inline-block; margin-inline:.12em; }

/* Text stand-in used only when a logo file is unavailable */
.wordmark-text{
  font-family:var(--ff-d); font-weight:700; letter-spacing:-.03em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wordmark-text.wordmark--brand{ display:block; font-size:clamp(34px,4vw,52px); }
.wordmark-text.wordmark--card{ display:block; font-size:26px; }
.wordmark-text.wordmark--xs{ font-size:1.05em; vertical-align:baseline; }

.pill{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:550; color:var(--brand-ink);
  background:var(--brand-wash); border:1px solid rgba(27,77,245,.16);
  padding:7px 15px 7px 12px; border-radius:999px;
}
.pill__dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand);
  animation:ping 2.4s infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(27,77,245,.45); }
  70%{ box-shadow:0 0 0 9px rgba(27,77,245,0); }
  100%{ box-shadow:0 0 0 0 rgba(27,77,245,0); }
}

.brand__title{
  margin-top:22px;
  font-family:var(--ff-d); font-weight:600;
  font-size:clamp(34px,4.6vw,60px); line-height:1.03; letter-spacing:-.042em;
}
.brand__sub{
  margin-top:20px; max-width:46ch; color:var(--muted);
  font-size:clamp(16px,1.5vw,18.5px);
}

.feats{
  margin-top:34px; padding-top:28px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px;
}
.feats li{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:500; }
.feats__i{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--brand-wash); position:relative;
}
.feats__i::before{
  content:""; position:absolute; left:6px; top:7px; width:8px; height:4px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}

.brand__powered{
  margin-top:36px; display:flex; align-items:center; gap:.7em;
  font-size:12.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.brand__powered .wordmark--xs{ height:26px; vertical-align:middle; margin:0; }
.brand__powered-link{
  display:inline-flex; align-items:center; border-radius:6px;
  opacity:.82; transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.brand__powered-link:hover{ opacity:1; transform:translateY(-1px); }
.brand__powered-link:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }

/* ── Panel + card ───────────────────────────────────────── */
.panel{ display:flex; flex-direction:column; align-items:center; }
.card{
  position:relative; overflow:hidden;
  width:100%; max-width:452px;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(28px,3.2vw,42px);
  box-shadow:var(--shadow-l);
}
/* Thin blue light chasing around the card edge. The crisp ring is ::before,
   ::after is the same ring blurred to leave a soft trail behind it. */
.card::before,
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1.6px; pointer-events:none;
  background:conic-gradient(from var(--spin),
              transparent 0deg 258deg,
              rgba(63,208,255,.12) 292deg,
              rgba(63,208,255,.55) 322deg,
              var(--brand-2) 343deg,
              var(--brand) 354deg,
              transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:chase 4.6s linear infinite;
}
.card::after{ filter:blur(7px); opacity:.75; }
.card__head{ text-align:center; margin-bottom:28px; }
.card__title{
  font-family:var(--ff-d); font-size:clamp(22px,2.4vw,27px); font-weight:600;
  letter-spacing:-.03em; line-height:1.15;
}
.card__sub{ margin-top:9px; color:var(--muted); font-size:14.5px; }

/* ── Fields ─────────────────────────────────────────────── */
.form{ display:flex; flex-direction:column; gap:18px; }
.field__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.field__label{
  display:block; margin-bottom:8px;
  font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink);
}
.field__row .field__label{ margin-bottom:8px; }
.field__hint{ font-size:12.5px; color:var(--muted); }

.field__wrap{ position:relative; display:flex; align-items:center; }
.field__icon{
  position:absolute; left:15px; width:19px; height:19px;
  color:#9aa5bb; pointer-events:none; transition:color .25s var(--ease);
}
.field__input{
  width:100%; font-family:var(--ff); font-size:15.5px; color:var(--ink);
  padding:14px 16px 14px 46px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.field__input::placeholder{ color:#a6b0c4; }
.field__input:hover{ border-color:rgba(10,17,36,.16); }
.field__input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(27,77,245,.13);
}
.field__wrap:focus-within .field__icon{ color:var(--brand); }
#password{ padding-right:50px; }

.field__peek{
  position:absolute; right:8px; width:34px; height:34px; padding:7px;
  display:grid; place-items:center;
  background:none; border:0; border-radius:9px; cursor:pointer;
  color:#9aa5bb; transition:color .22s, background .22s;
}
.field__peek:hover{ color:var(--brand); background:var(--brand-wash); }
.field__peek:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
.field__slash{ opacity:0; transition:opacity .2s var(--ease); }
.field__peek[aria-pressed="true"] .field__slash{ opacity:1; }

.field__err{
  margin-top:7px; font-size:12.5px; font-weight:500; color:var(--danger);
  min-height:0; display:none;
}
.field__err.is-shown{ display:block; }
.field__input.is-bad, .pin__box.is-bad{
  border-color:rgba(210,33,63,.55);
}
.field__input.is-bad:focus, .pin__box.is-bad:focus{
  box-shadow:0 0 0 4px rgba(210,33,63,.13);
}

/* ── PIN ────────────────────────────────────────────────── */
.pin{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.pin__box{
  width:100%; aspect-ratio:1/1.16; min-width:0; padding:0;
  text-align:center; font-family:var(--ff-d);
  font-size:clamp(19px,2.2vw,23px); font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.pin__box:hover{ border-color:rgba(10,17,36,.16); }
.pin__box:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(27,77,245,.13);
  transform:translateY(-2px);
}
.pin__box.is-set{ border-color:rgba(27,77,245,.4); background:rgba(27,77,245,.03); }

/* ── Row: remember / forgot ─────────────────────────────── */
.form__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-top:2px;
}
.check{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.check input{
  position:absolute; opacity:0; width:1px; height:1px;
}
.check__box{
  width:19px; height:19px; border-radius:6px; flex:0 0 auto;
  border:1px solid var(--line); background:#fff; position:relative;
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.check__box::before{
  content:""; position:absolute; left:5px; top:6px; width:8px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(.4); opacity:0;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.check input:checked + .check__box{ background:var(--brand); border-color:var(--brand); }
.check input:checked + .check__box::before{ opacity:1; transform:rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box{ outline:2px solid var(--brand); outline-offset:2px; }
.check__text{ font-size:14px; color:var(--muted); }

.link{
  font-size:14px; font-weight:550; color:var(--brand-ink);
  border-bottom:1px solid transparent; transition:border-color .22s;
}
.link:hover{ border-color:currentColor; }

/* ── Button ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff); font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  padding:15px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .28s var(--ease), background-position .35s;
}
.btn--block{ width:100%; margin-top:6px; }
.btn--primary{
  color:#fff; background:var(--grad); background-size:180% 100%;
  box-shadow:0 10px 26px -10px rgba(27,77,245,.65);
}
.btn--primary:hover{
  transform:translateY(-2px); background-position:100% 0;
  box-shadow:0 16px 34px -12px rgba(27,77,245,.7);
}
.btn--primary:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--brand-deep); outline-offset:3px; }
.btn__arrow{ width:16px; height:16px; position:relative; display:inline-block; }
.btn__arrow::before{
  content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:translateX(-2px) rotate(45deg); transition:transform .25s var(--ease);
}
.btn:hover .btn__arrow::before{ transform:translateX(2px) rotate(45deg); }

/* ── Notice ─────────────────────────────────────────────── */
.notice{
  margin-top:4px; padding:13px 16px; border-radius:var(--r);
  font-size:13.5px; font-weight:500; color:var(--brand-ink);
  background:var(--brand-wash); border:1px solid rgba(27,77,245,.18);
}

/* ── Card footer ────────────────────────────────────────── */
.card__foot{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;
}
.card__secure{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--muted);
}
.card__secure svg{ width:15px; height:15px; color:var(--brand); flex:0 0 auto; }
.card__help{ font-size:13.5px; color:var(--muted); }

.legal{ margin-top:22px; font-size:12.5px; color:var(--muted); text-align:center; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .shell{
    grid-template-columns:1fr; justify-items:center; gap:40px;
    padding-block:clamp(36px,7vw,64px);
  }
  .brand{ width:100%; max-width:452px; }
  .brand__inner{ max-width:none; }
  .brand__title{ font-size:clamp(30px,6vw,40px); }
  .feats{ grid-template-columns:1fr; gap:12px; }
}

@media (max-width:560px){
  body{ font-size:15.5px; }
  .shell{ padding-inline:18px; }
  .card{ padding:26px 20px; }
  .pin{ gap:7px; }
  .form__row{ flex-direction:row; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}