/* ═══════════════════════════════════════════════════════════
   BUTTONS — Enterprise polished chrome + gradient CTAs
   ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  transition:all .3s ease-out;white-space:nowrap;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  max-width:100%;
}
.btn--outline{
  border:2px solid var(--border-strong);color:var(--color-text);
  background:transparent;
}
.btn--outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.btn--ghost{color:var(--color-text-secondary);border:1px solid transparent}
.btn--ghost:hover{color:var(--color-text)}
.btn--accent{
  background:var(--accent);color:var(--color-text);border:1px solid var(--accent);
  transition:background .3s ease-out,border-color .3s ease-out;
}
.btn--accent:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);
}
.btn--primary-sm{
  padding:10px 22px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  background:var(--color-text);color:var(--color-bg);border:none;
}
.btn--primary-sm:hover{background:rgba(255,255,255,.85)}

/* ══════════════════════════════════════════════════════════
   CHROME / GRADIENT CTA — premium silver sheen
   Matches OOAK's "Apply Now" button with a polished metallic
   gradient, subtle light streak, and clean hover-invert.
   ══════════════════════════════════════════════════════════ */
.btn--chrome,
.btn--primary-lg{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:0;
  font-size:18px;font-weight:600;line-height:1.6;
  background:linear-gradient(135deg, var(--color-text) 0%, var(--color-text-secondary) 100%);
  color:var(--color-bg);
  border:1px solid var(--border-strong);
  position:relative;overflow:hidden;
  transition:box-shadow .3s ease-out, transform .15s ease-out, opacity .3s ease-out;
  box-shadow:
    0 1px 3px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;
  box-sizing:border-box;
  max-width:100%;
}

/* Shine sweep on hover */
.btn--chrome::before,
.btn--primary-lg::before{
  content:'';
  position:absolute;
  top:-50%;left:-75%;
  width:50%;height:200%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-25deg);
  transition:left .6s ease-out;
  pointer-events:none;
}

/* ── Mobile Button Responsiveness ──────────────────────── */
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
  }
  .btn--chrome,
  .btn--primary-lg {
    font-size: clamp(14px, 4vw, 15px);
    line-height: 1.35;
    padding: 12px 18px;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .btn--outline {
    font-size: 14px;
    padding: 11px 18px;
    white-space: normal;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}


.btn--chrome:hover,
.btn--primary-lg:hover{
  opacity:.95;
}

.btn--chrome:hover::before,
.btn--primary-lg:hover::before{
  left:125%;
}

/* Claw icon inside button */
.btn-claw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
  color: currentColor;
  line-height: 1;
}

.btn-claw svg {
  display: block;
}

/* Diamond icon inside chrome button inverts */
.btn--chrome .diamond-sm{background:var(--color-bg);transition:background .3s ease-out}
.btn--chrome:hover .diamond-sm{background:var(--color-text)}
.btn--primary-lg .diamond-sm{background:var(--color-bg);transition:background .3s ease-out}
.btn--primary-lg:hover .diamond-sm{background:var(--color-text)}

/* ── 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:var(--radius-sm);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:var(--radius-sm);
  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:var(--color-text);filter:blur(15px);
  opacity:.32;transform:rotate(-104deg);
  pointer-events:none;
}

/* ── Mobile Button Responsiveness ──────────────────────── */
@media (max-width: 600px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
  }
  .btn--chrome,
  .btn--primary-lg {
    font-size: clamp(14px, 4vw, 15px);
    line-height: 1.35;
    padding: 12px 18px;
    white-space: normal;
    text-align: center;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .btn--outline {
    font-size: 14px;
    padding: 11px 18px;
    white-space: normal;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}