@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#10231d;
  --text:#33463e;
  --muted:#6e8178;
  --line:rgba(255,255,255,.38);
  --panel:rgba(255,255,255,.92);
  --accent:#16a57c;
  --accent2:#21b796;
  --accentDark:#08745a;
  --sun:#f8b84e;
  --sunDark:#dc9320;
  --focus:rgba(22,165,124,.24);
  --shadow:0 32px 90px rgba(8,38,29,.24);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  overflow-x:hidden;
  color:#fff;
  font-family:var(--font);
  background:#0d211c;
  -webkit-text-size-adjust:100%;
}

.background,
#particles-js{
  position:fixed;
  inset:0;
  overflow:hidden;
}
.background{z-index:-4;background:#0d211c}
#particles-js{z-index:-2;pointer-events:none}
#particles-js canvas{display:block}
#bg-video{
  position:absolute;
  inset:50% auto auto 50%;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  opacity:.54;
  filter:saturate(.95) contrast(1.08) brightness(.72);
}
.overlay{
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 16% 18%,rgba(33,183,150,.32),transparent 26rem),
    radial-gradient(circle at 86% 76%,rgba(248,184,78,.20),transparent 24rem),
    linear-gradient(115deg,rgba(9,29,24,.96) 0%,rgba(15,44,37,.76) 44%,rgba(236,247,243,.78) 100%);
}

.login-page{
  width:100%;
  min-height:0;
  display:grid;
  align-items:center;
  padding:clamp(22px,4vw,56px);
}
.login-hero{
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,440px);
  gap:clamp(28px,6vw,86px);
  align-items:center;
}
.hero-copy{max-width:620px;text-shadow:0 16px 44px rgba(0,0,0,.36)}
.eyebrow{
  display:block;
  margin-bottom:14px;
  color:#f9c765;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
h1{
  margin:0;
  color:#fff;
  font-size:clamp(42px,6vw,76px);
  line-height:.98;
  font-weight:800;
  letter-spacing:0;
}
p{
  max-width:540px;
  margin:22px 0 0;
  color:rgba(244,251,248,.86);
  font-size:clamp(16px,1.8vw,20px);
  line-height:1.7;
  font-weight:500;
}

.login-container{
  display:grid;
  gap:18px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.20);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px);
}
.logo{
  display:flex;
  justify-content:center;
  padding:10px 8px 6px;
}
.logo img{
  width:min(275px,72vw);
  height:auto;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.18));
}
.form-wrapper{
  padding:22px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:8px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 16px 34px rgba(7,35,27,.13);
}
form{display:grid;gap:14px;margin:0}
.input-group{margin:0}
input{
  width:100%;
  min-height:50px;
  padding:12px 15px;
  border:1px solid #c8d6d0;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font:700 16px/1.2 var(--font);
  text-align:left;
  box-shadow:inset 0 1px 1px rgba(17,45,35,.04);
}
input::placeholder{color:var(--muted);font-weight:600}
input:focus{
  outline:3px solid var(--focus);
  border-color:var(--accent);
}
.btn-primary{
  width:100%;
  min-height:50px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,var(--sun),#ffd371);
  color:#17130b;
  font:800 15px/1 var(--font);
  cursor:pointer;
  box-shadow:0 14px 28px rgba(220,147,32,.24);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--sunDark),var(--sun));
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(220,147,32,.30);
}
h5{
  min-height:20px;
  margin:0;
  color:#b42318;
  font-size:14px;
  font-weight:800;
  text-align:center;
}
br{display:none}

.site-footer{
  position:relative;
  z-index:1;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  color:rgba(244,251,248,.78);
  font-size:13px;
  font-weight:600;
  text-align:center;
  background:rgba(7,24,19,.56);
  border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
}
.site-footer a{color:#f9c765;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

@media(max-width:860px){
  .login-page{align-items:end;padding:22px 16px 18px}
  .login-hero{grid-template-columns:1fr;gap:22px}
  .hero-copy{max-width:560px}
  h1{font-size:clamp(34px,12vw,54px)}
  p{margin-top:14px;font-size:15px}
  .login-container{width:100%;max-width:440px;margin:0 auto;padding:18px}
  .form-wrapper{padding:17px}
  .logo img{width:min(235px,76vw)}
  .overlay{
    background:
      radial-gradient(circle at 20% 16%,rgba(33,183,150,.30),transparent 20rem),
      linear-gradient(180deg,rgba(9,29,24,.90),rgba(13,35,30,.70) 48%,rgba(237,247,243,.56));
  }
}
@media(max-height:650px) and (min-width:861px){
  .login-page{align-items:start}
  .login-hero{padding-top:18px}
  h1{font-size:52px}
  p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}