
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Valorian – Client Login</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <!-- HEADER -->
  <header class="site-header">
    <div class="header-inner">
      <a href="index.html" class="logo-link">
        <img src="images/valorian-logo-key.png" alt="Valorian Logo" class="logo-img">
      </a>
      <nav class="main-nav">
        <a href="index.html#tiers">Membership</a>
        <a href="index.html#contact">Contact</a>
        <a href="login.html">Client Login</a>
      </nav>
    </div>
  </header>

  <!-- LOGIN SECTION -->
  <section class="login-section">
    <div class="login-inner">
      <h1 class="login-title">Client Portal</h1>
      <p class="login-subtitle">
        Secure access for Valorian members.<br>
        To request access, contact your liaison directly.
      </p>

      <form class="login-form" method="post" action="#">
        <div class="login-field">
          <label for="login-email">Email</label>
          <input type="email" id="login-email" name="email" placeholder="you@example.com" required>
        </div>
        <div class="login-field">
          <label for="login-password">Password</label>
          <input type="password" id="login-password" name="password" placeholder="••••••••" required>
        </div>
        <button type="submit" class="hero-cta login-submit">Log In</button>
      </form>

      <p class="login-note">
        This visual interface is a secure placeholder.  
        Your concierge will activate direct app or portal access after membership confirmation.
      </p>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="site-footer">
    <div class="footer-inner">
      <p>&copy; <span id="year"></span> Valorian Private Concierge</p>
    </div>
  </footer>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</body>
</html>
