/* ELITE / HEDGE FUND RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #050505; /* True Black */
  color: #a0a0a0; /* Slate Grey text - never pure white */
  font-family: "Helveticda Neue", Helvetica, Arial, sans-serif;
  height: 100vh;
  overflow: hidden; /* Prevents scrolling - locks the view */
}

/* CONTAINER */
.page {
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* FULL SCREEN HERO */
.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dark & Moody Filter */
  filter: brightness(0.8) contrast(110%) grayscale(20%);
  opacity: 1;
  transition: transform 8s ease; /* Subtle movement effect if desired */
}

/* THE OVERLAY (Adds depth) */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Slight tint */
  z-index: 2;
  pointer-events: none; /* Lets you click through to things behind it */
}

/* TOP RIGHT CLIENT ACCESS */
/* This is the most important element for the look */
.client-access {
  position: absolute;
  top: 3rem;   /* Spacing from top */
  right: 3rem; /* Spacing from right */
  z-index: 10;
  
  /* Typography - The "Expensive" Look */
  color: #ffffff;
  text-decoration: none;
  font-size: 0.7rem;      /* Very small */
  text-transform: uppercase;
  letter-spacing: 3px;    /* Wide tracking is key to luxury */
  font-weight: 500;
  opacity: 0.7;           /* Subtle by default */
  transition: opacity 0.4s ease, letter-spacing 0.4s ease;
}

.client-access:hover {
  opacity: 1;
  letter-spacing: 4px; /* Subtle expansion on hover */
}



/* --- LOGIN PAGE STYLING --- */

/* 1. Un-hide the login container */
.login-container {
  display: flex; /* This makes it visible again */
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: #050505;
  position: relative;
  z-index: 20; /* Sits above everything */
}

/* 2. The Box */
.login-box {
  width: 100%;
  max-width: 320px; /* Narrow and elegant */
  text-align: center;
}

/* 3. The Title */
.login-title {
  color: #555; /* Very subtle grey */
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 2rem;
}

/* 4. The Input Field (Minimalist Line) */
.login-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #333; /* Just a thin line */
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 0;
  text-align: center;
  outline: none;
  transition: border-color 0.3s ease;
  letter-spacing: 2px;
}

.login-input:focus {
  border-bottom: 1px solid #fff; /* Light up on click */
}

.login-input::placeholder {
  color: #333;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* 5. The "Enter" Button */
.login-btn {
  margin-top: 2rem;
  background: transparent;
  border: 1px solid #333;
  color: #777;
  padding: 10px 30px;
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-btn:hover {
  border-color: #fff;
  color: #fff;
}

/* 6. Close / Back Button */
.close-btn {
  position: absolute;
  top: 3rem;
  right: 3rem;
  color: #444;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 100;
  transition: color 0.3s;
}

.close-btn:hover {
  color: #fff;
}


/* --- BRANDING & CONTACT --- */

/* Center Brand Name */
.brand-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Dead center */
  z-index: 10;
  text-align: center;
  width: 100%;
}

.brand-center h1 {
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400; /* Regular weight, not bold */
  font-size: 0.9rem; /* Surprisingly small = more exclusive */
  text-transform: uppercase;
  letter-spacing: 6px; /* Very wide spacing */
  opacity: 0.9;
}

/* Bottom Email */
.footer-contact {
  position: absolute;
  bottom: 3rem;
  width: 100%;
  text-align: center; /* Center aligned at bottom */
  z-index: 10;
}

.footer-contact a {
  color: #a0a0a0; /* Muted grey, not white */
  text-decoration: none;
  font-size: 0.8rem; /* Very tiny */
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: #ffffff; /* Brightens on hover */
}