<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BNSD Landing Hub</title>

  <!-- Fix: missing quote in your original -->
  <link rel="icon" type="image/x-icon" href="favicon.ico" />

  <style>
    :root{
      --bg: #0b1220;
      --card: rgba(255,255,255,.08);
      --card2: rgba(255,255,255,.10);
      --border: rgba(255,255,255,.14);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --shadow: 0 14px 35px rgba(0,0,0,.35);
      --accent: #ff4b4b;
      --accent2: #ff7a59;
      --focus: 0 0 0 3px rgba(255,75,75,.35);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }

    body{
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(1000px 700px at 15% 10%, rgba(255,75,75,.25), transparent 60%),
        radial-gradient(900px 600px at 85% 30%, rgba(255,122,89,.22), transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #070b14 100%);
      overflow-x: hidden;
    }

    /* subtle "pattern" */
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .12;
      background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.35) 1px, transparent 0);
      background-size: 22px 22px;
      mask-image: radial-gradient(900px 600px at 50% 20%, black 40%, transparent 70%);
    }

    .wrap{
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .container{
      width: min(1000px, calc(100% - 48px));
      margin: 0 auto;
      padding: 48px 0 28px;
      flex: 1;
      display: grid;
      align-content: center;
      gap: 26px;
    }

    .hero{
      display: grid;
      gap: 10px;
      text-align: center;
      padding: 26px 20px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border-radius: 18px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }

    .badge{
      display: inline-flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      color: var(--muted);
      font-size: 0.95rem;
      letter-spacing: .2px;
    }

    h1{
      margin: 0;
      font-size: clamp(2rem, 3.6vw, 3.1rem);
      line-height: 1.05;
      letter-spacing: -0.5px;
    }

    .subtitle{
      margin: 0;
      font-size: clamp(1.05rem, 1.5vw, 1.25rem);
      color: var(--muted);
    }

    .grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    @media (max-width: 720px){
      .container{ padding: 32px 0 18px; }
      .grid{ grid-template-columns: 1fr; }
    }

    .card{
      display: grid;
      grid-template-columns: 44px 1fr auto;
      gap: 12px;
      align-items: center;

      padding: 16px 16px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--card), rgba(255,255,255,.05));
      box-shadow: 0 10px 22px rgba(0,0,0,.25);
      text-decoration: none;
      color: inherit;

      transform: translateY(0);
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .card:hover{
      transform: translateY(-3px);
      border-color: rgba(255,255,255,.24);
      background: linear-gradient(180deg, var(--card2), rgba(255,255,255,.06));
    }

    .card:focus-visible{
      outline: none;
      box-shadow: var(--shadow), var(--focus);
    }

    .icon{
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      font-size: 20px;
    }

    .meta{
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .title{
      font-weight: 700;
      letter-spacing: .1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .desc{
      margin: 0;
      font-size: .98rem;
      color: var(--muted);
      line-height: 1.2;
    }

    .pill{
      font-size: .9rem;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.85);
    }

    .pill.accent{
      border-color: rgba(255,75,75,.35);
      background: linear-gradient(90deg, rgba(255,75,75,.24), rgba(255,122,89,.18));
    }

    footer{
      padding: 16px 0 22px;
      text-align: center;
      color: rgba(255,255,255,.55);
      font-size: .95rem;
    }

    footer a{
      color: rgba(255,255,255,.75);
      text-decoration: none;
      border-bottom: 1px dashed rgba(255,255,255,.25);
    }
    footer a:hover{ color: rgba(255,255,255,.9); }
  </style>
</head>

<body>
  <div class="wrap">
    <main class="container">
      <section class="hero" aria-label="BNSD Landing Hub">
        <div class="badge">✨ Quick Access • BNSD Web</div>
        <h1>BNSD Landing Hub</h1>
        <p class="subtitle">Your one-stop shop for the most used BNSD tools and resources.</p>
      </section>

      <section class="grid" aria-label="Primary links">
        <a class="card" href="https://dev320961.service-now.com/esc">
          <div class="icon" aria-hidden="true">🎫</div>
          <div class="meta">
            <div class="title">BNSD ServiceNow</div>
            <p class="desc">Submit tickets, track requests, and access our Knowledge Base.</p>
          </div>
          <span class="pill accent">Tickets</span>
        </a>

        <a class="card" href="/employeedigital">
          <div class="icon" aria-hidden="true">🪪</div>
          <div class="meta">
            <div class="title">Employee Digital</div>
            <p class="desc">Access employee information and resources at a glance.</p>
          </div>
          <span class="pill accent">New</span>
        </a>

        <a class="card" href="/adminhub">
          <div class="icon" aria-hidden="true">🧭</div>
          <div class="meta">
            <div class="title">Administrators Hub</div>
            <p class="desc">Admin landing page with resources for Administrators.</p>
          </div>
          <span class="pill">Admin</span>
        </a>

        <a class="card" href="/staff-directory">
          <div class="icon" aria-hidden="true">👥</div>
          <div class="meta">
            <div class="title">Staff Directory</div>
            <p class="desc">Find staff information and positions.</p>
          </div>
          <span class="pill">Directory</span>
        </a>
      </section>
    </main>

    <footer>
      <span>Need help? Start with </span>
      <a href="https://dev320961.service-now.com/esc">ServiceNow</a>
      <span> or contact your site support.</span>
    </footer>
  </div>
</body>
</html>