<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Private Access</title>

    <style>

      :root {

        --bg: #0d0d12;

        --panel: rgba(22, 22, 31, 0.9);

        --accent: #ff4d8d;

        --accent-2: #ff7ab6;

        --text: #f5f5f7;

        --muted: #b9bac7;

        --line: rgba(255, 255, 255, 0.12);

      }

      * { box-sizing: border-box; }

      body {

        margin: 0;

        min-height: 100vh;

        display: grid;

        place-items: center;

        font-family: Arial, Helvetica, sans-serif;

        background:

          radial-gradient(circle at top, rgba(255, 77, 141, 0.18), transparent 28%),

          linear-gradient(135deg, #09090d 0%, #13141b 38%, #0c0d14 100%);

        color: var(--text);

      }

      .wrapper {

        width: min(92vw, 440px);

      }

      .panel {

        background: var(--panel);

        border: 1px solid var(--line);

        border-radius: 22px;

        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);

        overflow: hidden;

      }

      .topbar {

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 18px 22px;

        border-bottom: 1px solid var(--line);

        background: rgba(255, 255, 255, 0.02);

      }

      .brand {

        letter-spacing: 0.18em;

        font-size: 0.82rem;

        text-transform: uppercase;

        color: var(--muted);

      }

      .status {

        font-size: 0.76rem;

        padding: 6px 10px;

        border-radius: 999px;

        background: rgba(255, 77, 141, 0.12);

        border: 1px solid rgba(255, 77, 141, 0.3);

        color: #ffd8ea;

      }

      .content {

        padding: 30px 24px 24px;

        text-align: center;

      }

      .lock {

        width: 70px;

        height: 70px;

        margin: 0 auto 16px;

        border-radius: 18px;

        background: linear-gradient(135deg, var(--accent), var(--accent-2));

        display: grid;

        place-items: center;

        box-shadow: 0 12px 28px rgba(255, 77, 141, 0.35);

        font-size: 30px;

      }

      h1 {

        margin: 0;

        font-size: clamp(2rem, 6vw, 2.7rem);

        line-height: 1.1;

      }

      .subtitle {

        margin: 12px 0 22px;

        color: var(--muted);

        font-size: 1rem;

      }

      .btn {

        display: inline-block;

        width: 100%;

        border: none;

        border-radius: 12px;

        padding: 16px 18px;

        font-size: 1rem;

        font-weight: 700;

        color: white;

        text-decoration: none;

        background: linear-gradient(135deg, var(--accent), var(--accent-2));

        box-shadow: 0 12px 24px rgba(255, 77, 141, 0.24);

        transition: transform 0.18s ease, filter 0.18s ease;

      }

      .btn:hover {

        transform: translateY(-1px);

        filter: brightness(1.04);

      }

      .notice {

        margin-top: 18px;

        color: var(--muted);

        font-size: 0.8rem;

        line-height: 1.6;

      }

    </style>

  </head>

  <body>

    <div class="wrapper">

      <div class="panel">

        <div class="topbar">

          <div class="brand">Private</div>

          <div class="status">Friends Only</div>

        </div>

        <div class="content">

          <div class="lock">🔒</div>

          <h1>OnlyFans</h1>

          <p class="subtitle">Private content for trusted friends only.</p>

          <a

            class="btn"

            href="https://onlyfans.com/xx.emmax"

            target="_blank"

            rel="noopener noreferrer"

          >

            Enter

          </a>

          <div class="notice">

            You are entering a private area intended only for verified friends.

          </div>

        </div>

      </div>

    </div>

  </body>

</html>