<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<!--
  SEO NOTE: Title, description, canonical, OG tags, and JSON-LD are set
  here as defaults and are overridden at the edge by the Cloudflare Pages
  Function in functions/_middleware.js BEFORE the response reaches the
  browser. This means Googlebot, social scrapers, and all crawlers receive
  the correct per-route metadata on first byte — no JS execution required.
-->
<title>HITBDSM – Premium Bondage &amp; Discipline Archive</title>
<meta name="description" content="The ultimate archive of professional BDSM, bondage and discipline video content. Browse by site, channel, model or category.">
<meta name="keywords" content="BDSM, bondage, discipline, dominance, submission, femdom, maledom, kink, adult video">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="theme-color" content="#cc0000">
<meta name="application-name" content="HITBDSM">
<meta name="apple-mobile-web-app-title" content="HITBDSM">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- Canonical — overridden per-route by edge middleware -->
<link rel="canonical" href="https://hitbdsm.pages.dev/">

<!-- Open Graph — overridden per-route by edge middleware -->
<meta property="og:type"        content="website">
<meta property="og:site_name"   content="HITBDSM">
<meta property="og:title"       content="HITBDSM – Premium Bondage &amp; Discipline Archive">
<meta property="og:description" content="The ultimate archive of professional BDSM and bondage content. Browse by site, channel, model or category.">
<meta property="og:url"         content="https://hitbdsm.pages.dev/">
<meta property="og:image"       content="https://hitbdsm.pages.dev/images/og-default.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt"   content="HITBDSM – Premium Bondage &amp; Discipline Archive">
<meta property="og:locale"      content="en_US">

<!-- Twitter Cards — overridden per-route by edge middleware -->
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:site"        content="@HITBDSM">
<meta name="twitter:title"       content="HITBDSM – Premium Bondage &amp; Discipline Archive">
<meta name="twitter:description" content="The ultimate archive of professional BDSM and bondage content.">
<meta name="twitter:image"       content="https://hitbdsm.pages.dev/images/og-default.jpg">
<meta name="twitter:image:alt"   content="HITBDSM – Premium Bondage &amp; Discipline Archive">

<!-- Icons -->
<link rel="icon"             type="image/svg+xml" href="/favicon.svg">
<link rel="icon"             type="image/png"     href="/images/icon-192.png" sizes="192x192">
<link rel="apple-touch-icon"                      href="/images/icon-192.png">
<link rel="manifest"                              href="/site.webmanifest">

<!-- Google Fonts preconnect (non-blocking; actual load triggered by engine.js) -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="stylesheet" href="/style.css">

<!-- Structured Data — Website (static, never changes) -->
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","name":"HITBDSM","alternateName":"HitBDSM","url":"https://hitbdsm.pages.dev/","description":"The ultimate archive of professional BDSM, bondage and discipline video content.","inLanguage":"en-US","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://hitbdsm.pages.dev/search/{search_term_string}"},"query-input":"required name=search_term_string"}}
</script>

<!-- Structured Data — Organization (static, never changes) -->
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Organization","name":"HITBDSM","alternateName":"HitBDSM","url":"https://hitbdsm.pages.dev/","logo":{"@type":"ImageObject","url":"https://hitbdsm.pages.dev/images/icon-512.png","width":512,"height":512},"sameAs":["https://t.me/HITBDSM","https://t.me/HITBDSMclub"],"description":"The premier archive of professional BDSM and bondage content. All content features consenting adult performers.","contactPoint":{"@type":"ContactPoint","contactType":"customer support","url":"https://t.me/IamAdministrator"}}
</script>

<!--
  Dynamic JSON-LD slot — edge middleware injects VideoObject here for video pages.
  Client-side JS also updates it for SPA navigation after first load.
-->
<script type="application/ld+json" id="ld-dynamic">{}</script>
</head>
<body>

<!-- ════════ AGE GATE ════════ -->
<div id="age-gate" role="dialog" aria-modal="true" aria-labelledby="age-gate-heading" aria-describedby="age-gate-desc">
  <div class="age-gate-bg" aria-hidden="true"></div>
  <div class="age-gate-content">
    <div class="age-logo" aria-hidden="true"><span class="r">HIT</span><span class="w">BDSM</span></div>
    <p class="age-tagline" aria-hidden="true">— Premium Bondage &amp; Discipline Archive —</p>
    <div class="age-divider" aria-hidden="true"></div>
    <p class="age-warning" aria-hidden="true">⚠ Adult Content Warning</p>
    <h1 class="age-question" id="age-gate-heading">Are you 18 years of age or older?</h1>
    <p class="age-sub" id="age-gate-desc">This website contains explicit adult material including BDSM and bondage content. You must be of legal age in your jurisdiction to enter.</p>
    <div class="age-buttons">
      <button class="btn-enter" id="btn-enter">I AM 18+ — ENTER</button>
      <button class="btn-leave" id="btn-leave">Leave</button>
    </div>
    <p class="age-legal">By entering you confirm you are 18+ and agree to our Terms &amp; Privacy Policy. All performers 18+. Records per 18 U.S.C. § 2257.</p>
  </div>
</div>

<!-- ════════ MAIN SITE ════════ -->
<div id="site">

<header id="header" role="banner">
  <div class="header-inner">
    <a class="site-logo" href="/" id="logo-link" aria-label="HITBDSM — Home">
      <span class="logo-wordmark"><span class="r">HIT</span><span class="w">BDSM</span></span>
    </a>
    <div class="search-wrap" role="search">
      <label for="search-input" class="sr-only">Search videos, models, channels</label>
      <input class="search-input" type="search" id="search-input"
        placeholder="Search videos, models, channels…"
        autocomplete="off"
        aria-expanded="false"
        aria-controls="search-dropdown"
        aria-haspopup="listbox">
      <div class="search-icon-wrap" aria-hidden="true">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      </div>
      <div class="search-dropdown" id="search-dropdown" role="listbox" aria-label="Search suggestions"></div>
    </div>
    <button class="mobile-search-toggle" id="mobile-search-toggle" aria-label="Search" aria-expanded="false" aria-controls="search-input">
      <svg class="msi-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      <svg class="msi-close" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>
    </button>
    <nav aria-label="Primary navigation">
      <ul class="nav-links" id="desktop-nav">
        <li><a href="/"            id="nav-home"       class="active">Home</a></li>
        <li><a href="/videos"      id="nav-videos">All Videos</a></li>
        <li><a href="/sites"       id="nav-sites">Sites</a></li>
        <li><a href="/models"      id="nav-models">Models</a></li>
        <li><a href="/categories"  id="nav-categories">Categories</a></li>
      </ul>
    </nav>
    <button class="btn-surprise" id="btn-surprise" title="Random video" aria-label="Surprise me — go to a random video">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="M12 2a10 10 0 1 0 10 10"/><path d="M12 6l4 4-4 4"/><path d="M16 10H8"/></svg>
      <span class="surprise-label">Surprise Me</span>
    </button>
    <button class="hamburger" id="hamburger" aria-label="Open navigation menu" aria-expanded="false" aria-controls="mobile-drawer">
      <div class="ham-line"></div><div class="ham-line"></div><div class="ham-line"></div>
    </button>
  </div>
</header>

<!-- ── MOBILE DRAWER ── -->
<nav id="mobile-drawer" aria-label="Mobile navigation" aria-hidden="true">
  <div class="drawer-nav">
    <button class="drawer-link" data-nav="home">
      <span class="drawer-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg></span>Home
    </button>
    <button class="drawer-link" data-nav="videos">
      <span class="drawer-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/></svg></span>All Videos
    </button>
    <button class="drawer-link" data-nav="sites">
      <span class="drawer-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span>Sites
    </button>
    <button class="drawer-link" data-nav="models">
      <span class="drawer-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>Models
    </button>
    <button class="drawer-link" data-nav="categories">
      <span class="drawer-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h8m-8 6h16"/></svg></span>Categories
    </button>
    <button class="drawer-link" id="drawer-surprise">
      <span class="drawer-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1 0 10 10"/><path d="M12 6l4 4-4 4"/><path d="M16 10H8"/></svg></span>Surprise Me
    </button>
    <div class="drawer-divider"></div>
    <div class="drawer-section-label">Sites</div>
    <div id="drawer-sites"></div>
  </div>
</nav>

<!-- ════════ HOME ════════ -->
<main id="app" role="main">

<section id="page-home" class="page active">
  <section id="hero" aria-label="Hero banner">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hero-content">
      <p class="hero-eyebrow">The Ultimate Archive</p>
      <p class="hero-title" aria-hidden="true"><span class="r">HIT</span><span class="w">BDSM</span></p>
      <p class="hero-desc">Bondage · Discipline · Dominance · Submission</p>
    </div>
    <div class="hero-divider" aria-hidden="true"><span></span></div>
  </section>
  <div class="main">
    <div class="section-header">
      <h2 class="section-title"><span class="accent">Sites</span> — Browse by Network</h2>
      <div class="section-line" aria-hidden="true"></div>
      <span class="section-count" id="sites-overview-count" aria-live="polite"></span>
    </div>
    <div class="sites-grid" id="sites-overview-grid" aria-label="Browse by site"></div>
    <div class="section-header" style="margin-top:8px">
      <h2 class="section-title"><span class="accent">Latest</span> Videos</h2>
      <div class="section-line" aria-hidden="true"></div>
      <span class="section-count" id="latest-count" aria-live="polite"></span>
    </div>
    <div class="filter-bar" id="home-filter-bar" role="toolbar" aria-label="Sort videos">
      <span class="filter-label" aria-hidden="true">Sort</span>
      <button class="filter-btn active" data-ctx="home" data-sort="latest" aria-pressed="true">Latest</button>
      <button class="filter-btn"        data-ctx="home" data-sort="oldest" aria-pressed="false">Oldest</button>
      <button class="filter-btn"        data-ctx="home" data-sort="az"     aria-pressed="false">A–Z</button>
      <button class="filter-btn"        data-ctx="home" data-sort="za"     aria-pressed="false">Z–A</button>
    </div>
    <div class="video-grid" id="home-video-grid" aria-label="Latest videos"></div>
    <div class="pagination" id="home-pagination" role="navigation" aria-label="Page navigation"></div>
  </div>
</section>

<!-- ════════ ALL VIDEOS ════════ -->
<section id="page-videos" class="page">
  <div class="main">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <a href="/" data-nav="home">Home</a>
      <span class="sep" aria-hidden="true">/</span>
      <span class="current" aria-current="page">All Videos</span>
    </nav>
    <div class="section-header">
      <h1 class="section-title"><span class="accent">All</span> Videos</h1>
      <div class="section-line" aria-hidden="true"></div>
      <span class="section-count" id="all-videos-count" aria-live="polite"></span>
    </div>
    <div class="filter-bar" id="all-filter-bar" role="toolbar" aria-label="Sort videos">
      <span class="filter-label" aria-hidden="true">Sort</span>
      <button class="filter-btn active" data-ctx="all" data-sort="latest" aria-pressed="true">Latest</button>
      <button class="filter-btn"        data-ctx="all" data-sort="oldest" aria-pressed="false">Oldest</button>
      <button class="filter-btn"        data-ctx="all" data-sort="az"     aria-pressed="false">A–Z</button>
      <button class="filter-btn"        data-ctx="all" data-sort="za"     aria-pressed="false">Z–A</button>
    </div>
    <div class="video-grid" id="all-video-grid"></div>
    <div class="pagination" id="all-pagination" role="navigation" aria-label="Page navigation"></div>
  </div>
</section>

<!-- ════════ SITES ════════ -->
<section id="page-sites" class="page">
  <div class="main">
    <nav class="breadcrumb" id="sites-breadcrumb" aria-label="Breadcrumb">
      <a href="/" data-nav="home">Home</a>
      <span class="sep" aria-hidden="true">/</span>
      <span class="current" aria-current="page">Sites</span>
    </nav>
    <div id="sites-list-view">
      <div class="section-header">
        <h1 class="section-title"><span class="accent">All</span> Sites</h1>
        <div class="section-line" aria-hidden="true"></div>
      </div>
      <div class="sites-grid" id="all-sites-grid" aria-label="All sites"></div>
    </div>
    <div id="site-detail-view" style="display:none">
      <div class="section-header">
        <h1 class="section-title" id="site-detail-title"></h1>
        <div class="section-line" aria-hidden="true"></div>
        <span class="section-count" id="site-detail-count" aria-live="polite"></span>
      </div>
      <div class="filter-bar" id="site-filter-bar" role="toolbar" aria-label="Sort videos">
        <span class="filter-label" aria-hidden="true">Sort</span>
        <button class="filter-btn active" data-ctx="site" data-sort="latest" aria-pressed="true">Latest</button>
        <button class="filter-btn"        data-ctx="site" data-sort="oldest" aria-pressed="false">Oldest</button>
        <button class="filter-btn"        data-ctx="site" data-sort="az"     aria-pressed="false">A–Z</button>
        <button class="filter-btn"        data-ctx="site" data-sort="za"     aria-pressed="false">Z–A</button>
      </div>
      <div class="channels-row" id="site-channels-row" role="toolbar" aria-label="Filter by channel"></div>
      <div class="video-grid" id="site-video-grid"></div>
      <div class="pagination" id="site-pagination" role="navigation" aria-label="Page navigation"></div>
    </div>
  </div>
</section>

<!-- ════════ MODELS ════════ -->
<section id="page-models" class="page">
  <div class="main">
    <nav class="breadcrumb" id="models-breadcrumb" aria-label="Breadcrumb">
      <a href="/" data-nav="home">Home</a>
      <span class="sep" aria-hidden="true">/</span>
      <span class="current" aria-current="page">Models</span>
    </nav>
    <div id="models-list-view">
      <div class="section-header">
        <h1 class="section-title"><span class="accent">All</span> Models</h1>
        <div class="section-line" aria-hidden="true"></div>
        <span class="section-count" id="models-count" aria-live="polite"></span>
      </div>
      <div class="alpha-filter" id="alpha-filter" role="toolbar" aria-label="Filter by first letter"></div>
      <div class="models-grid" id="models-grid" aria-label="All models"></div>
    </div>
    <div id="model-detail-view" style="display:none">
      <div class="section-header">
        <h1 class="section-title" id="model-detail-title"></h1>
        <div class="section-line" aria-hidden="true"></div>
        <span class="section-count" id="model-detail-count" aria-live="polite"></span>
      </div>
      <div class="filter-bar" id="model-filter-bar" role="toolbar" aria-label="Sort videos">
        <span class="filter-label" aria-hidden="true">Sort</span>
        <button class="filter-btn active" data-ctx="model" data-sort="latest" aria-pressed="true">Latest</button>
        <button class="filter-btn"        data-ctx="model" data-sort="oldest" aria-pressed="false">Oldest</button>
        <button class="filter-btn"        data-ctx="model" data-sort="az"     aria-pressed="false">A–Z</button>
        <button class="filter-btn"        data-ctx="model" data-sort="za"     aria-pressed="false">Z–A</button>
      </div>
      <div class="video-grid" id="model-video-grid"></div>
      <div class="pagination" id="model-pagination" role="navigation" aria-label="Page navigation"></div>
    </div>
  </div>
</section>

<!-- ════════ CATEGORIES ════════ -->
<section id="page-categories" class="page">
  <div class="main">
    <nav class="breadcrumb" id="categories-breadcrumb" aria-label="Breadcrumb">
      <a href="/" data-nav="home">Home</a>
      <span class="sep" aria-hidden="true">/</span>
      <span class="current" aria-current="page">Categories</span>
    </nav>
    <div id="categories-list-view">
      <div class="section-header">
        <h1 class="section-title"><span class="accent">All</span> Categories</h1>
        <div class="section-line" aria-hidden="true"></div>
        <span class="section-count" id="categories-count" aria-live="polite"></span>
      </div>
      <div class="cat-directory" id="all-categories-grid" aria-label="All categories"></div>
    </div>
    <div id="category-detail-view" style="display:none">
      <div class="section-header">
        <h1 class="section-title" id="category-detail-title"></h1>
        <div class="section-line" aria-hidden="true"></div>
        <span class="section-count" id="category-detail-count" aria-live="polite"></span>
      </div>
      <div class="filter-bar" id="category-filter-bar" role="toolbar" aria-label="Sort videos">
        <span class="filter-label" aria-hidden="true">Sort</span>
        <button class="filter-btn active" data-ctx="category" data-sort="latest" aria-pressed="true">Latest</button>
        <button class="filter-btn"        data-ctx="category" data-sort="oldest" aria-pressed="false">Oldest</button>
        <button class="filter-btn"        data-ctx="category" data-sort="az"     aria-pressed="false">A–Z</button>
        <button class="filter-btn"        data-ctx="category" data-sort="za"     aria-pressed="false">Z–A</button>
      </div>
      <div class="video-grid" id="category-video-grid"></div>
      <div class="pagination" id="category-pagination" role="navigation" aria-label="Page navigation"></div>
    </div>
  </div>
</section>

<!-- ════════ VIDEO DETAIL ════════ -->
<section id="page-video" class="page">
  <div class="main">
    <nav class="breadcrumb" id="video-breadcrumb" aria-label="Breadcrumb"></nav>
    <div class="video-detail-player" id="video-player-wrap">
      <div class="player-overlay" id="player-overlay" role="button" tabindex="0" aria-label="Play video">
        <img class="player-thumb-bg" id="player-thumb-bg" src="" alt="" aria-hidden="true">
        <div class="player-play-big" aria-hidden="true">
          <svg width="64" height="64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="31" fill="rgba(204,0,0,0.85)" stroke="rgba(255,255,255,0.3)" stroke-width="2"/><polygon points="26,20 50,32 26,44" fill="white"/></svg>
        </div>
        <p class="player-tap-label">Tap to play</p>
      </div>
      <div id="video-iframe-container"></div>
    </div>
    <div class="vd-info" id="vd-info">
      <div class="vd-tags"        id="vd-tags"></div>
      <h1 class="vd-title"        id="vd-title"></h1>
      <div class="vd-models"      id="vd-models"></div>
      <div class="vd-description" id="vd-description"></div>
      <div class="vd-categories"  id="vd-categories"></div>
      <div class="vd-meta"        id="vd-meta"></div>
    </div>
    <section aria-label="Related videos">
      <div class="section-header">
        <h2 class="section-title"><span class="accent">More</span> Like This</h2>
        <div class="section-line" aria-hidden="true"></div>
      </div>
      <div class="video-grid" id="related-grid" aria-label="Related videos"></div>
    </section>
  </div>
</section>

<!-- ════════ SEARCH ════════ -->
<section id="page-search" class="page">
  <div class="main">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <a href="/" data-nav="home">Home</a>
      <span class="sep" aria-hidden="true">/</span>
      <span class="current" aria-current="page">Search</span>
    </nav>
    <div class="section-header">
      <h1 class="section-title"><span class="accent">Results</span> for <span id="search-query-display" style="color:var(--grey);font-family:var(--font-ui);font-size:0.9rem"></span></h1>
      <div class="section-line" aria-hidden="true"></div>
      <span class="section-count" id="search-results-count" aria-live="polite"></span>
    </div>
    <div class="search-page-type-bar" role="toolbar" aria-label="Search scope">
      <span class="filter-label" aria-hidden="true">Search in</span>
      <button class="search-page-type-btn active" data-type="everything" aria-pressed="true">Everything</button>
      <button class="search-page-type-btn"        data-type="title"      aria-pressed="false">Title</button>
      <button class="search-page-type-btn"        data-type="models"     aria-pressed="false">Models</button>
      <button class="search-page-type-btn"        data-type="code"       aria-pressed="false">Code</button>
      <button class="search-page-type-btn"        data-type="category"   aria-pressed="false">Category</button>
      <button class="search-page-type-btn"        data-type="site"       aria-pressed="false">Site</button>
      <button class="search-page-type-btn"        data-type="channel"    aria-pressed="false">Channel</button>
    </div>
    <div class="filter-bar" id="search-filter-bar" role="toolbar" aria-label="Sort results">
      <span class="filter-label" aria-hidden="true">Sort</span>
      <button class="filter-btn active" data-ctx="search" data-sort="latest" aria-pressed="true">Latest</button>
      <button class="filter-btn"        data-ctx="search" data-sort="oldest" aria-pressed="false">Oldest</button>
      <button class="filter-btn"        data-ctx="search" data-sort="az"     aria-pressed="false">A–Z</button>
      <button class="filter-btn"        data-ctx="search" data-sort="za"     aria-pressed="false">Z–A</button>
    </div>
    <div class="video-grid" id="search-video-grid"></div>
    <div class="pagination" id="search-pagination" role="navigation" aria-label="Page navigation"></div>
  </div>
</section>

</main><!-- /#app -->

<!-- ════════ FOOTER ════════ -->
<footer id="footer" role="contentinfo">
  <div class="footer-inner">

    <div class="usc2257">
      <strong style="color:var(--grey-light)">18 U.S.C. § 2257 Compliance:</strong>
      All models appearing on this website were over 18 at the time of production. Records maintained by content producers.
    </div>

    <div class="footer-top">

      <!-- ── BRAND + TELEGRAM ── -->
      <div class="footer-brand">
        <span class="logo-wordmark" aria-hidden="true"><span class="r">HIT</span><span class="w">BDSM</span></span>
        <p>The premier archive of professional BDSM and bondage content. All content features consenting adult performers.</p>

        <p class="footer-col-title" style="margin-bottom:10px">Telegram</p>
        <div class="footer-telegram">
          <a href="https://t.me/HITBDSM" target="_blank" rel="noopener noreferrer" class="tg-btn tg-channel">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953l11.57-4.461c.537-.194 1.006.131.833.941z"/></svg>
            <span class="tg-label-wrap"><span class="tg-type">Channel</span><span class="tg-handle">@HITBDSM</span></span>
            <span class="tg-badge">NEWS</span>
          </a>
          <a href="https://t.me/HITBDSMclub" target="_blank" rel="noopener noreferrer" class="tg-btn tg-group">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            <span class="tg-label-wrap"><span class="tg-type">Community</span><span class="tg-handle">@HITBDSMclub</span></span>
            <span class="tg-badge tg-badge-group">CHAT</span>
          </a>
          <a href="https://t.me/IamAdministrator" target="_blank" rel="noopener noreferrer" class="tg-btn tg-admin">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span class="tg-label-wrap"><span class="tg-type">Admin</span><span class="tg-handle">@IamAdministrator</span></span>
            <span class="tg-badge tg-badge-admin">DM</span>
          </a>
        </div>
      </div>

      <div>
        <p class="footer-col-title">Navigate</p>
        <ul class="footer-links">
          <li><a href="/"           data-nav="home">Home</a></li>
          <li><a href="/videos"     data-nav="videos">All Videos</a></li>
          <li><a href="/sites"      data-nav="sites">Sites</a></li>
          <li><a href="/models"     data-nav="models">Models</a></li>
          <li><a href="/categories" data-nav="categories">Categories</a></li>
        </ul>
      </div>

      <div>
        <p class="footer-col-title">Community</p>
        <ul class="footer-links">
          <li><a href="https://t.me/HITBDSM"         target="_blank" rel="noopener noreferrer">Telegram Channel</a></li>
          <li><a href="https://t.me/HITBDSMclub"      target="_blank" rel="noopener noreferrer">Telegram Community</a></li>
          <li><a href="https://t.me/IamAdministrator" target="_blank" rel="noopener noreferrer">Contact Admin</a></li>
        </ul>
      </div>

    </div><!-- /.footer-top -->

    <!-- ════════ DONATION SECTION v10 ════════ -->
    <div class="donate-section" id="donate-section" aria-label="Support HITBDSM">
      <div class="donate-section-inner">

        <!-- Header -->
        <div class="donate-header">
          <div class="donate-heart" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg" class="donate-heart-svg">
              <path fill="currentColor" d="M12 21.4C11.5 21 2 14.3 2 8.5a5.5 5.5 0 0 1 10-3.1A5.5 5.5 0 0 1 22 8.5c0 5.8-9.5 12.5-10 12.9z"/>
            </svg>
          </div>
          <div>
            <h2 class="donate-title">Support <span class="r">HIT</span><span class="w">BDSM</span></h2>
            <p class="donate-sub">
              You being here is already everything — no donation is ever expected or required.
              If this archive has brought you value and you'd like to help keep it running,
              any contribution is genuinely appreciated.
            </p>
          </div>
        </div>

        <!-- Coin selector grid: 5 + 5 layout -->
        <!-- Coin selector grid: 5+5 layout
             v12: all inline SVG paths replaced with <img> tags pointing to
             /images/coins/<symbol>.svg. SVGs use fill="currentColor" so they
             inherit the brand colour set by .dc-* CSS classes. Sizing, spacing,
             hover/active states, dark-mode, and responsive layout are unchanged. -->
        <div class="donate-coins-grid" id="donate-coins-grid" role="listbox" aria-label="Select cryptocurrency">

          <div class="donate-coin-card active" data-coin="btc" role="option" aria-selected="true" tabindex="0" aria-label="Bitcoin">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-btc" aria-hidden="true">
              <img src="/images/coins/btc.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">Bitcoin</div>
            <div class="donate-coin-symbol">BTC</div>
          </div>

          <div class="donate-coin-card" data-coin="eth" role="option" aria-selected="false" tabindex="0" aria-label="Ethereum">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-eth" aria-hidden="true">
              <img src="/images/coins/eth.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">Ethereum</div>
            <div class="donate-coin-symbol">ETH</div>
          </div>

          <div class="donate-coin-card" data-coin="usdt" role="option" aria-selected="false" tabindex="0" aria-label="Tether USDT">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-usdt" aria-hidden="true">
              <img src="/images/coins/usdt.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">Tether</div>
            <div class="donate-coin-symbol">USDT</div>
          </div>

          <div class="donate-coin-card" data-coin="usdc" role="option" aria-selected="false" tabindex="0" aria-label="USD Coin">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-usdc" aria-hidden="true">
              <img src="/images/coins/usdc.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">USD Coin</div>
            <div class="donate-coin-symbol">USDC</div>
          </div>

          <div class="donate-coin-card" data-coin="sol" role="option" aria-selected="false" tabindex="0" aria-label="Solana">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-sol" aria-hidden="true">
              <img src="/images/coins/sol.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">Solana</div>
            <div class="donate-coin-symbol">SOL</div>
          </div>

          <div class="donate-coin-card" data-coin="bnb" role="option" aria-selected="false" tabindex="0" aria-label="BNB">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-bnb" aria-hidden="true">
              <img src="/images/coins/bnb.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">BNB</div>
            <div class="donate-coin-symbol">BEP-20</div>
          </div>

          <div class="donate-coin-card" data-coin="trx" role="option" aria-selected="false" tabindex="0" aria-label="Tron">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-trx" aria-hidden="true">
              <img src="/images/coins/trx.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">Tron</div>
            <div class="donate-coin-symbol">TRX</div>
          </div>

          <div class="donate-coin-card" data-coin="ltc" role="option" aria-selected="false" tabindex="0" aria-label="Litecoin">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-ltc" aria-hidden="true">
              <img src="/images/coins/ltc.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">Litecoin</div>
            <div class="donate-coin-symbol">LTC</div>
          </div>

          <div class="donate-coin-card" data-coin="doge" role="option" aria-selected="false" tabindex="0" aria-label="Dogecoin">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-doge" aria-hidden="true">
              <img src="/images/coins/doge.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">Dogecoin</div>
            <div class="donate-coin-symbol">DOGE</div>
          </div>

          <div class="donate-coin-card" data-coin="xmr" role="option" aria-selected="false" tabindex="0" aria-label="Monero — private">
            <div class="donate-coin-check" aria-hidden="true"><svg width="9" height="9" viewBox="0 0 12 10" fill="none"><path d="M1.5 5L4.5 8L10.5 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
            <div class="donate-coin-icon-wrap dc-xmr" aria-hidden="true">
              <img src="/images/coins/xmr.svg" width="22" height="22" alt="" class="coin-svg">
            </div>
            <div class="donate-coin-name">Monero</div>
            <div class="donate-coin-symbol">XMR · Private</div>
          </div>

        </div><!-- /.donate-coins-grid -->

        <!-- Detail panel — updated by JS when a coin is selected -->
        <div class="donate-detail-panel" id="donate-detail-panel" aria-live="polite">
          <!-- Populated by initDonation() in engine.js -->
        </div>

        <!-- Universal Network Addresses — collapsible -->
        <div class="donate-universal">
          <button class="donate-universal-toggle" id="donate-universal-toggle"
            aria-expanded="false" aria-controls="donate-universal-panel">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2L4 5.5v6C4 16.1 7.4 20.6 12 22c4.6-1.4 8-5.9 8-10.5v-6L12 2zm0 2.18l6 2.58v5.74C18 16.1 15.4 19.7 12 20.8c-3.4-1.1-6-4.7-6-8.3V6.76L12 4.18z"/></svg>
            Universal Network Addresses
            <svg class="donate-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6,9 12,15 18,9"/></svg>
          </button>

          <div class="donate-universal-panel" id="donate-universal-panel" aria-hidden="true">
            <p class="donate-universal-intro">
              These addresses accept <strong>any compatible token</strong> on their respective network.
              Use these when your wallet requires a single address for all assets on a chain.
              <strong>Always verify the network before sending</strong> — tokens sent to the wrong network
              cannot be recovered.
            </p>
            <div class="donate-universal-grid" id="donate-universal-grid">
              <!-- Populated by initDonation() -->
            </div>
          </div>
        </div>

      </div><!-- /.donate-section-inner -->
    </div><!-- /.donate-section -->

    <div class="footer-bottom">
      <p class="footer-copy">© <span id="copyright-year">2025</span> HITBDSM · All Rights Reserved · All performers 18+</p>
    </div>

  </div>
</footer>

<!-- Screen-reader live region for route announcements -->
<span class="sr-only" aria-live="polite" id="sr-announce"></span>

<!-- Back to top button -->
<button id="scroll-top" tabindex="-1" aria-label="Back to top" aria-hidden="true">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" aria-hidden="true"><polyline points="18,15 12,9 6,15"/></svg>
</button>

</div><!-- #site -->

<script src="/engine.js"></script>
</body>
</html>
