/* =====================
   RESET & BASE
   ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0b0b14;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* =====================
   HERO
   ===================== */
.hero { text-align: center; padding: 48px 20px 32px; }
.hero h1 { font-size: clamp(28px,5vw,48px); font-weight:700; line-height:1.15; }
.hero h1 span { color: #e91e8c; }
.hero p { margin-top:10px; color:#aaa; font-size:15px; display:flex; align-items:center; justify-content:center; gap:10px; }
.badge-18 { background:#e91e8c; color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; letter-spacing:.5px; }

/* =====================
   FILTERS
   ===================== */
.filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 24px;
  max-width: 960px;
  margin: 0 auto;
}
.filter-btn {
  background: #13131f;
  color: #aaa;
  border: 1px solid #2a2a3e;
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.filter-btn:hover { color: #fff; border-color: #555; }
.filter-btn.active {
  background: #e91e8c;
  color: #fff;
  border-color: #e91e8c;
}

/* =====================
   GRID
   ===================== */
.grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
  padding: 0 16px 24px;
  max-width: 960px;
  margin: 0 auto;
}

/* =====================
   CARD
   ===================== */
.card { background:#13131f; border-radius:14px; overflow:hidden; position:relative; cursor:pointer; transition:transform .18s; }
.card:hover { transform:translateY(-3px); }
.card-img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#1e1e2e; }

/* labels */
.label { position:absolute; top:10px; left:10px; color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; letter-spacing:.4px; text-transform:uppercase; }
.label--model    { background:#e91e8c; }
.label--service  { background:#7c3aed; }
.label--category { background:#0891b2; }

/* card body */
.card-body { padding:10px 12px 12px; }
.card-name { font-size:17px; font-weight:700; }
.card-sub  { font-size:11px; color:#aaa; margin-top:2px; line-height:1.4; }

/* =====================
   BUTTONS
   ===================== */
.btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin-top:10px; padding:9px 0;
  color:#fff; font-size:13px; font-weight:600;
  border:none; border-radius:8px; cursor:pointer;
  transition:background .15s, transform .1s;
}
.btn:active { transform:scale(.97); }
.btn svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.2; }
.btn--model    { background:#e91e8c; } .btn--model:hover    { background:#c91577; }
.btn--service  { background:#7c3aed; } .btn--service:hover  { background:#6d28d9; }
.btn--category { background:#0891b2; } .btn--category:hover { background:#0e7490; }

/* =====================
   SKELETON LOADER
   ===================== */
@keyframes shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton .skeleton-img {
  width:100%; aspect-ratio:3/4;
  background:linear-gradient(90deg,#1e1e2e 25%,#2a2a3e 50%,#1e1e2e 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite;
}
.skeleton .skeleton-line {
  height:12px; border-radius:6px;
  background:linear-gradient(90deg,#1e1e2e 25%,#2a2a3e 50%,#1e1e2e 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite;
}
.skeleton .skeleton-btn {
  height:32px; border-radius:8px; margin-top:10px;
  background:linear-gradient(90deg,#1e1e2e 25%,#2a2a3e 50%,#1e1e2e 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite;
}

/* =====================
   FOOTER STRIP
   ===================== */
.footer-wrap { padding:0 16px; }
.footer-strip {
  max-width:960px; margin:12px auto 0;
  background:#13131f; border-radius:14px; padding:18px 24px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.footer-left { display:flex; align-items:center; gap:14px; flex:1; min-width:200px; }
.icon-circle { width:46px; height:46px; border-radius:50%; background:rgba(233,30,140,.13); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-circle svg { width:22px; height:22px; stroke:#e91e8c; fill:none; stroke-width:2; }
.footer-left-text strong { font-size:15px; font-weight:700; }
.footer-left-text p { font-size:12px; color:#888; margin-top:2px; }
.trust-badges { display:flex; gap:20px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:7px; font-size:12px; color:#ccc; }
.trust-item svg { width:18px; height:18px; stroke:#e91e8c; fill:none; stroke-width:2; }

/* =====================
   SITE FOOTER
   ===================== */
.site-footer { text-align:center; padding:20px 16px 32px; color:#555; font-size:12px; }

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width:680px) {
  .grid { grid-template-columns:repeat(2,1fr); }
  .trust-badges { gap:12px; }
}
@media (max-width:360px) {
  .grid { grid-template-columns:1fr 1fr; gap:8px; padding:0 10px; }
}

/* =====================
   OF BRANDING
   ===================== */

/* Шапка з лого OF */
.of-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

/* Синій круг OF */
.of-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00AFF0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

/* Маленька версія для trust-badges */
.of-logo--sm {
  width: 20px;
  height: 20px;
  font-size: 8px;
}

/* Текст "OnlyFans Exclusive" */
.of-label {
  font-size: 13px;
  font-weight: 600;
  color: #00AFF0;
  letter-spacing: 0.3px;
}

/* OF значок на кнопці */
.btn-of-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

/* =====================
   OF VERIFICATION BADGE
   ===================== */
.of-verified {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00AFF0;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.3px;
  border: 2px solid #0b0b14;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 2;
}

.card-img-wrap {
  position: relative;
}