:root{
  --accent:#e31b23;
  --bg:#0a0a0a;
  --muted:#bdbdbd;
}

/* BASE */
*{box-sizing:border-box}
body{
  margin:0; color:#fff; background:#0a0a0a;
  font-family: "Helvetica Neue", Arial, sans-serif;
  background-image: radial-gradient(1200px 600px at -10% -10%, rgba(227,27,35,.12), transparent 60%),
                    radial-gradient(900px 480px at 110% 10%, rgba(255,255,255,.05), transparent 60%),
                    url('assets/images/bg2.png');
  background-attachment: fixed; background-size: cover;
}

/* HEADER (from your earlier setup) */
.site-header{background:#080808;border-bottom:1px solid rgba(255,255,255,.05)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem}
.logo{font-weight:800;color:var(--accent);font-size:1.25rem;text-decoration:none}
.site-header nav a{color:#fff;text-decoration:none;margin-left:1rem;transition:color .2s}
.site-header nav a:hover{color:var(--accent)}
.navbar-toggler{border:0;width:40px;height:40px;background:transparent}
.navbar-toggler-icon{
  display:inline-block;width:1.5em;height:1.5em;background:no-repeat center/100% 100%;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

/* --- FASHION HERO --- */
.hero-fashion{
  min-height:52vh; display:grid; place-items:center; padding:64px 0 36px; position:relative;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(227,27,35,.25), transparent 60%),
              radial-gradient(900px 480px at 110% 20%, rgba(255,255,255,.08), transparent 60%),
              #080808;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.hero-fashion .hero-bg{
  position:absolute; inset:0; background-image:var(--hero-img);
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.02) brightness(.75);
  opacity:1; transform:translateZ(0);
}
.hero-fashion .hero-sheen{
  position:absolute; inset:-10% -30%;
  background:
    radial-gradient(60% 40% at 20% 0%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(115deg, rgba(227,27,35,.18), transparent 40%, rgba(255,255,255,.06) 60%, transparent 80%);
  mix-blend-mode:screen; animation:sheenSlide 9s linear infinite; pointer-events:none;
}
@keyframes sheenSlide{
  0%{transform:translateX(-12%) translateY(0);opacity:.5}
  50%{transform:translateX(6%) translateY(1%);opacity:.8}
  100%{transform:translateX(-12%) translateY(0);opacity:.5}
}
.hero-inner{position:relative;z-index:2;max-width:1100px}
.hero-title{
  font-weight:800; letter-spacing:.3px; line-height:1.05;
  font-size:clamp(2.2rem,5vw,4rem); margin:0 0 .35rem;
  text-shadow:0 6px 28px rgba(0,0,0,.5);
}
.hero-title span{color:var(--accent);position:relative}
.hero-title span::after{
  content:""; position:absolute; left:0; bottom:-.25rem; width:100%; height:4px;
  background:linear-gradient(90deg, var(--accent), rgba(255,255,255,.35)); border-radius:999px;
}
.hero-subtitle{max-width:860px;margin:0 auto 18px;color:rgba(255,255,255,.86);font-size:clamp(1rem,2.2vw,1.25rem)}

/* Glass search */
.hero-search{
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:14px;
  box-shadow:0 10px 35px rgba(0,0,0,.45);
}
.hero-search .form-control, .hero-search .form-select{
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); color:#fff;
}
.hero-search .form-control::placeholder{color:rgba(255,255,255,.6)}

/* chips */
.hero-chips{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.chip{
  display:inline-block; padding:.45rem .85rem; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; transition:all .2s;
  background:rgba(0,0,0,.35)
}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip.active{background:var(--accent); border-color:var(--accent)}

/* orbs */
.orb{position:absolute;border-radius:50%;filter:blur(24px);opacity:.18;pointer-events:none}
.orb-a{width:220px;height:220px;right:-60px;top:18%;background:#e31b23;animation:floatA 12s ease-in-out infinite}
.orb-b{width:160px;height:160px;left:-40px;bottom:-20px;background:#ffffff;opacity:.12;animation:floatB 11s ease-in-out infinite}
@keyframes floatA{0%{transform:translateY(0)}50%{transform:translateY(18px)}100%{transform:translateY(0)}}
@keyframes floatB{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}

/* SECTION HEAD */
.section-head .section-title{font-size:1.7rem;font-weight:800}
.section-accent{
  flex:1 1 auto; height:4px; margin-left:1rem; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), transparent)
}

/* GRID & CARDS */
.card{background:linear-gradient(180deg,#0b0b0b,#121212);border:0;border-radius:14px;overflow:hidden}
.model-card .img-wrap{position:relative;overflow:hidden}
.model-card .card-img-top{height:320px;object-fit:cover;transition:transform .5s ease}
.model-card .shine{
  position:absolute; left:-60%; top:0; width:40%; height:100%;
  background:linear-gradient(75deg, rgba(255,255,255,.0), rgba(255,255,255,.18), rgba(255,255,255,.0));
  transform:skewX(-20deg); transition:transform .6s, left .6s; pointer-events:none; mix-blend-mode:screen;
}
.model-card:hover .card-img-top{transform:scale(1.06)}
.model-card:hover .shine{left:120%}

/* PAGINATION */
.fancy-pagination .page-link{
  border:0; margin:0 .2rem; border-radius:999px; padding:.45rem .8rem;
  background:#141414; color:#ddd; box-shadow:0 4px 16px rgba(0,0,0,.25); transition:all .2s;
}
.fancy-pagination .page-item.disabled .page-link{opacity:.45}
.fancy-pagination .page-link:hover{background:#1f1f1f;color:#fff}
.fancy-pagination .page-item.active .page-link{
  background:var(--accent); color:#fff; box-shadow:0 6px 20px rgba(227,27,35,.35)
}
.fancy-pagination .dots{background:transparent; box-shadow:none}

/* RESPONSIVE */
@media (max-width:991px){
  .model-card .card-img-top{height:260px}
}
/* Model card titles */
.model-card .card-body .card-title {
  color: #f5f5f5; /* bright by default */
  font-weight: 600;
  font-size: 1rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  transition: color 0.3s ease;
}

/* Hover: fade to accent */
.model-card:hover .card-body .card-title {
  color: var(--accent); /* red accent */
}

.hl-badge{
  position:absolute; left:12px; top:12px; z-index:3;
  font-size:.75rem; letter-spacing:.3px;
  background: linear-gradient(90deg, var(--accent), #ff6a6a);
  color:#fff; padding:.28rem .55rem; border-radius:999px;
  box-shadow:0 6px 18px rgba(227,27,35,.35);
  border:1px solid rgba(255,255,255,.15);
}

.model-card .card-text {
  color: #ccc !important;
  font-size: .85rem;
  line-height: 1.3;
  min-height: 2.6em; /* keeps cards even */
}

/* =======================
   AVATAR STRIP (circle list)
   ======================= */
.avatar-strip-wrap {
  padding: 10px 0 6px;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.15));
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.avatar-strip {
  display: flex;
  gap: 16px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px 12px;
  scroll-snap-type: x proximity;
}
.avatar-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
  min-width: 76px;
}
.avatar {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: visible;   /* was hidden — change to visible */
  flex: 0 0 auto;
  transition: transform .2s ease;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%; /* keeps photo round */
  overflow: hidden;   /* photo is clipped */
}

.avatar:hover { transform: translateY(-2px) scale(1.05); }

/* outer ring (border) */
.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  pointer-events: none;
}
.ring-accent {
  border-color: var(--accent, #e31b23);
  box-shadow: 0 0 0 2px rgba(227,27,35,.18),
              0 6px 14px rgba(227,27,35,.25) inset;
}

/* count badge (bottom-right corner) */
.badge-count {
  position: absolute;
  right: -6px;
  bottom: -6px;
  background: var(--accent, #e31b23);
  color: #fff;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 12px;
  line-height: 1.2;
  border: 2px solid #0b0b0b;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* name below the avatar */
.avatar-name {
  margin-top: 6px;
  max-width: 80px;
  font-size: 12px;
  text-align: center;
  color: rgba(255,255,255,.85);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.avatar-item { min-width: 96px; } /* keeps spacing consistent */

/* Thicker ring for the larger size */
.ring {
  border: 4px solid rgba(255,255,255,.25); /* was 3px */
}
.ring-accent {
  border-color: var(--accent, #e31b23);
  box-shadow: 0 0 0 2px rgba(227,27,35,.18),
              0 8px 16px rgba(227,27,35,.28) inset;
}

/* Badge (bottom-right) styled like your sample */
.badge-count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: #ff2d2d;          /* brighter red background */
  color: #fff;                  /* white text */
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 13px;
  line-height: 1.1;
  border: 2px solid #fff;       /* white border so it separates from black bg */
  box-shadow: 0 3px 10px rgba(0,0,0,.6); /* subtle shadow */
  font-weight: 700;
  z-index: 5;                   /* ensures it floats above ring/image */
}


/* Slightly brighter name under the bigger avatars */
.avatar-name {
  max-width: 100px;
  font-size: 13px;
  color: rgba(255,255,255,.9);
}