/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:100px;font-size:14px;font-weight:500;
  transition:all .3s ease;white-space:nowrap;
}
.btn--outline{
  border:1px solid rgba(255,255,255,.15);color:#fff;
  background:rgba(255,255,255,.04);
}
.btn--outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.btn--ghost{color:rgba(255,255,255,.6);border:1px solid transparent}
.btn--ghost:hover{color:rgba(255,255,255,.9)}
.btn--accent{
  background:linear-gradient(135deg,rgb(220,50,60),rgb(180,35,42));
  color:#fff;border:none;
  box-shadow:0 0 24px rgba(220,50,60,.35),0 0 60px rgba(220,50,60,.12);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.btn--accent:hover{
  background:linear-gradient(135deg,rgb(235,60,70),rgb(195,42,50));
  box-shadow:0 0 36px rgba(235,60,70,.45),0 0 80px rgba(235,60,70,.18);
}
.btn--primary-sm{
  padding:10px 22px;border-radius:100px;font-size:14px;font-weight:500;
  background:#fff;color:#000;border:none;
}
.btn--primary-sm:hover{background:rgba(255,255,255,.85)}

/* ── CHROME / SHINY BUTTONS ─────────────────────────────── */
.btn--chrome{
  background:linear-gradient(135deg,#e8e8e8 0%,#b0b0b0 40%,#e0e0e0 60%,#c8c8c8 100%);
  background-size:200% 200%;
  color:#0a0a0a;border:none;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 4px 16px rgba(0,0,0,.3);
  animation:gradientShift 3s ease infinite;
  position:relative;overflow:hidden;
}
.btn--chrome::after{
  content:'';position:absolute;
  top:-50%;left:-60%;width:40%;height:200%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:skewX(-20deg);
  animation:chromeGlare 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes chromeGlare{
  0%,80%{left:-60%}
  100%{left:160%}
}
.btn--chrome:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 24px rgba(0,0,0,.4), 0 0 20px rgba(255,255,255,.08);
}
.btn--chrome:hover .diamond-sm{
  transform:rotate(45deg) translateX(3px);
  transition:transform .3s ease;
}
.btn--chrome .diamond-sm{background:#0a0a0a;transition:transform .3s ease}

.btn--primary-lg{
  padding:14px 32px;border-radius:100px;font-size:15px;font-weight:600;
  background:#fff;color:#000;border:none;
  box-shadow:0 4px 20px rgba(255,255,255,.1);
  transition:all .3s;
}
.btn--primary-lg:hover{
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 30px rgba(255,255,255,.15);
  transform:translateY(-1px);
}
.btn--primary-lg .diamond-sm{background:#000}

/* ── DIAMOND FEATURE CARDS ──────────────────────────────── */
.diamond-cards{
  display:flex;align-items:center;justify-content:center;gap:24px;
  margin:48px 0;
}
.diamond-card{
  width:80px;height:80px;transform:rotate(45deg);
  border-radius:14px;border:1px solid rgba(61,61,61,1);
  background:rgba(107,86,86,.03);
  position:relative;overflow:hidden;cursor:pointer;
  transition:all .4s var(--ease-smooth);
}
.diamond-card__fill{
  position:absolute;inset:0;border-radius:13px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(228deg,rgb(204,204,204) 0%,rgb(46,46,46) 100%);
  opacity:0;transition:opacity .4s;
}
.diamond-card:hover .diamond-card__fill,
.diamond-card.active .diamond-card__fill{opacity:1}
.diamond-card__glare{
  position:absolute;
  width:60%;height:180%;top:-40%;left:20%;
  background:#fff;filter:blur(15px);
  opacity:.32;transform:rotate(-104deg);
  pointer-events:none;
}