<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nova Digital Marketing — Launching Soon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">
<style>
  :root{
    --ink:#12151C;
    --paper:#F4F3EF;
    --signal:#1FAE7A;
    --signal-dim:#17835D;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--paper);
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important;}
  }

  /* ---------- BACKGROUND VIDEO ---------- */
  .bg-video{
    position:fixed; inset:0; z-index:-2;
    width:100%; height:100%;
    object-fit:cover;
  }
  .bg-overlay{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(18,21,28,0.55) 0%, rgba(18,21,28,0.72) 55%, rgba(18,21,28,0.88) 100%);
  }

  /* ---------- LAYOUT ---------- */
  .page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:48px 24px;
    text-align:center;
  }
  .logo{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:18px;
    letter-spacing:-0.01em;
    display:flex; align-items:center; gap:8px;
    position:fixed;
    top:32px; left:32px;
  }
  .logo .dot{width:8px; height:8px; border-radius:50%; background:var(--signal);}

  /* ---------- FILLER HEADLINE MARQUEE ---------- */
  .marquee-wrap{
    width:100%;
    overflow:hidden;
    margin-bottom:44px;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  }
  .marquee{
    display:flex;
    width:max-content;
    gap:48px;
    animation: marquee-scroll 26s linear infinite;
  }
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .marquee span{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:clamp(32px, 6vw, 64px);
    letter-spacing:-0.02em;
    color:rgba(244,243,239,0.14);
    white-space:nowrap;
  }
  .marquee span.active{ color: var(--paper); }

  h1{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:clamp(34px, 6vw, 58px);
    letter-spacing:-0.02em;
    line-height:1.05;
    margin-bottom:16px;
  }
  h1 span{color:var(--signal);}
  .sub{
    font-size:16px;
    color:rgba(244,243,239,0.7);
    max-width:440px;
    margin:0 auto 40px;
    line-height:1.6;
  }

  /* ---------- FORM ---------- */
  form{
    width:100%;
    max-width:400px;
    background:rgba(244,243,239,0.06);
    border:1px solid rgba(244,243,239,0.18);
    backdrop-filter: blur(6px);
    border-radius:8px;
    padding:28px;
  }
  .field{margin-bottom:16px; text-align:left;}
  .field label{
    display:block;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:rgba(244,243,239,0.55);
    margin-bottom:6px;
  }
  .field input[type="text"],
  .field input[type="email"]{
    width:100%;
    background:rgba(244,243,239,0.04);
    border:1px solid rgba(244,243,239,0.22);
    border-radius:4px;
    padding:12px 13px;
    color:var(--paper);
    font-family:'Inter', sans-serif;
    font-size:14.5px;
  }
  .field input::placeholder{color:rgba(244,243,239,0.35);}
  .checkbox-row{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:20px;
    text-align:left;
  }
  .checkbox-row input{width:16px; height:16px; accent-color:var(--signal); flex:none;}
  .checkbox-row label{font-size:13.5px; color:rgba(244,243,239,0.75);}
  button{
    width:100%;
    background:var(--signal);
    color:var(--ink);
    border:none;
    border-radius:4px;
    padding:14px;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    transition:background .15s ease;
  }
  button:hover{background:var(--paper);}

  footer{
    position:fixed;
    bottom:24px;
    font-size:12px;
    color:rgba(244,243,239,0.4);
  }

  @media (max-width:480px){
    .logo{top:20px; left:20px;}
    form{padding:22px;}
  }
</style>



<video class="bg-video" autoplay="" muted="" loop="" playsinline="" poster="assets/video/hero-bg-poster.jpg">
  <source src="assets/video/hero-bg.mp4" type="video/mp4">
</video>
<div class="bg-overlay"></div>

<div class="logo"><span class="dot"></span>Nova Digital</div>

<div class="page">

  <div class="marquee-wrap">
    <div class="marquee">
      <span>Launching Soon</span>
      <span class="active">Launching Soon</span>
      <span>Launching Soon</span>
      <span>Launching Soon</span>
      <span>Launching Soon</span>
      <span>Launching Soon</span>
      <span>Launching Soon</span>
      <span>Launching Soon</span>
    </div>
  </div>

  <h1>Something new is <span>launching soon.</span></h1>
  <p class="sub">Nova Digital Marketing is putting the finishing touches on our new site. Leave your email and we'll let you know the moment we're live.</p>

  <form onsubmit="event.preventDefault(); this.querySelector('button').textContent='You\'re on the list ✓';">
    <div class="field">
      <label for="name">Name</label>
      <input id="name" type="text" name="name" placeholder="Your name" required="">
    </div>
    <div class="field">
      <label for="email">Email</label>
      <input id="email" type="email" name="email" placeholder="you@email.com" required="">
    </div>
    <div class="checkbox-row">
      <input id="updates" type="checkbox" name="updates" checked="">
      <label for="updates">Sign up for updates</label>
    </div>
    <button type="submit">Send</button>
  </form>

</div>

<footer>© 2026 Nova Digital Marketing</footer>