/* reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }

body{
  background: #000;
  color: #fff;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* layout container */
.container {
  max-width: 980px;
  margin: 50px auto;
  display: flex;
  gap: 40px;
  align-items: center; /* ← Centers items vertically */
  padding: 0 18px;
}

/* PHONE (left) */
.phone-section{ display:block; }
.phone-frame{ width: 380px; position: relative; }
.phone-img{ width: 100%; display:block; height:auto; user-select: none; }

/* overlayed screens inside the phone mockup */
.phone-screens{
  position: absolute;
  /* center horizontally inside phone frame */
  left: 50%;
  transform: translateX(-50%);
  /* use percentage so it adapts to phone.png size */
  width: 62%;
  height: 78%;
  top: 8%;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6) inset;
}
.phone-img {
  width: 7000px;        /* ← Set fixed width for desktop */
  max-width: 100%;      /* Responsive: shrink on small screens */
  height: auto;
  display: block;
  user-select: none;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  transition: transform 0.3s ease;
}

.form-section{
  width: 350px;
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-left: 40px;
}

/* LOGIN BOX: no visible border; subtle separation via background + shadow */
.login-box{
  width: 100%;
  padding: 36px 34px;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.6);
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* logo image */
.logo{ width: 175px; height: auto; display:block; margin-bottom: 4px; user-select:none; }

/* inputs */
.login-form{ width: 100%; display:flex; flex-direction: column; gap:10px; }
.login-form input{
  width:100%;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.04);
  color: #fff;
  font-size: 14px;
  outline: none;
}
.login-form input::placeholder{ color: rgba(255,255,255,0.55); }

/* input focus */
.login-form input:focus{
  box-shadow: 0 0 0 3px rgba(0,149,246,0.08);
  border-color: rgba(0,149,246,0.35);
}

/* button */
.btn-login{
  width:100%;
  padding: 10px;
  border-radius: 6px;
  background: #0095f6;
  color: white;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.btn-login:hover{ background: #1877f2; }

/* divider */
.divider{ width: 100%; display:flex; align-items:center; gap:12px; margin: 10px 0; }
.divider .line{ flex:1; height:1px; background: rgba(255,255,255,0.04); }
.divider .or{ color: rgba(255,255,255,0.55); font-size:13px; text-align:center; }

/* facebook login line */
.fb-login{ display:flex; align-items:center; gap:1px; margin-top: 6px; }
.fb-login img{ width: 50px; height: auto; display:block; }
.fb-link{ color: #0095f6; text-decoration:none; font-weight:700; font-size:14px; }

/* forgot link */
.forgot-link{ margin-top: 8px; color: #0095f6; text-decoration:none; font-size: 12px; }

/* signup box (under login) */
.signup-box{
  width: 100%;
  padding: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.01) 100%);
  border-radius: 8px;
  text-align:center;
  font-size:14px;
  color: rgba(255,255,255,0.9);
}

/* get app */
.get-app{ text-align:center; margin-top: 6px; color: rgba(255,255,255,0.9); }
.app-buttons img{ height: 40px; margin: 8px 6px; }

/* footer */
footer{ margin: 40px 0 80px; text-align:center; color: rgba(255,255,255,0.45); font-size:12px; }
.footer-links{ list-style:none; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
.footer-links li{ opacity: 0.8; }

/* responsive: stack vertically on small screens, hide phone mockup */
@media (max-width: 880px){
  .container{ flex-direction: column; align-items:center; gap:18px; margin-top: 28px; }
  .phone-section{ display:none; }
  .form-section{ width: 360px; }
  footer{ margin-top: 28px; }
}
@media (max-width:420px){
  .form-section{ width: 93%; padding: 0 12px; }
  .logo{ width: 160px; }
  .login-box{ padding: 28px 18px; }
}