/* Dark, modern landing for Plesk login */
@font-face{
  font-family: InterVarFallback;
  src: local("Inter"), local("Roboto"), local("Arial");
}
:root{
  --accent: #11a63c; /* green similar to logo */
  --bg-overlay: rgba(3,8,13,0.55);
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.09);
  --text: #ffffff;
  --muted: #bfc6cc;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:InterVarFallback, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#000; color:var(--text)}

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image: url('images/background.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,6,10,0.6), rgba(2,6,10,0.8) 60%);
  backdrop-filter: blur(4px);
  z-index:1;
}

.content{
  position:relative;
  z-index:2;
  text-align:center;
  padding: 48px 20px;
  max-width:900px;
  width:100%;
  color:var(--text);
}

.logo{
  display:block;
  width: 300px;
  max-width:55%;
  margin: 0 auto 28px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}

.headline{
  margin:0 0 14px;
  font-size: clamp(26px, 5.2vw, 56px);
  line-height:1.02;
  font-weight:700;
  color: #ffffff;
  text-shadow: 0 6px 30px rgba(0,0,0,0.6);
}

.headline strong{color:var(--accent)}

.subtitle{
  margin:0 0 28px;
  color:var(--muted);
  font-size: clamp(14px, 2.1vw, 20px);
  font-weight:500;
}

.btn{
  display:inline-block;
  padding: 18px 48px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  box-shadow: 0 6px 24px rgba(2,6,10,0.6), inset 0 -1px 0 rgba(255,255,255,0.02);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  border: 1px solid rgba(255,255,255,0.04);
}

.btn:active{ transform: translateY(1px) }
.btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(2,6,10,0.7);
}

.small{
  margin-top:18px;
  color:rgba(255,255,255,0.35);
  font-size:13px;
}

/* Responsive padding */
@media (min-width: 900px){
  .content{ padding: 64px 32px; }
  .logo{ width: 320px }
}
@media (max-width: 420px){
  .headline{ font-size: 28px }
  .btn{ padding:14px 34px; font-size:16px }
  .logo{ width: 220px }
}