/* =========================================================
   Norkel Button — Front-end CSS
   version: 1.0.0
   ========================================================= */

.nk-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-items: center;
  align-items: start;
}
@media (max-width: 1100px) { .nk-brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .nk-brand-grid { grid-template-columns: 1fr; } }

/* ----- Base Button ----- */
.brand-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 28px;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  direction: rtl;
  font-family: inherit;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: linear-gradient(145deg,
    rgba(20,22,28,.8) 0%,
    rgba(8,9,14,.88) 50%,
    rgba(14,16,22,.82) 100%);
  box-shadow:
    0 10px 0 rgba(0,0,0,.55),
    0 18px 30px -8px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 4px rgba(0,0,0,.4);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  overflow: hidden;
  min-width: 220px;
}
.brand-btn .logo-wrap {
  position: relative; z-index: 5;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.brand-btn .btn-label { position: relative; z-index: 5; white-space: nowrap; transition: all .3s; }
.brand-btn .btn-label .sub {
  display: block;
  font-size: .68rem; font-weight: 600;
  letter-spacing: 2px; opacity: .55; margin-top: 2px;
  font-family: 'Courier New', monospace;
}
.brand-btn::before {
  content: ''; position: absolute; top: 2px; left: 8px; right: 8px; height: 42%;
  border-radius: 12px 12px 40% 40% / 12px 12px 60% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 55%, transparent);
  pointer-events: none; z-index: 2;
}
.brand-btn::after {
  content: ''; position: absolute; inset: 3px; border-radius: 11px;
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s;
}
.brand-btn .led-ind {
  position: absolute; top: 10px; right: 10px; width: 6px; height: 6px;
  border-radius: 50%; background: #1a1a22; border: 1px solid rgba(0,0,0,.5);
  z-index: 6; transition: all .3s;
}
.brand-btn .corner-accent {
  position: absolute; width: 12px; height: 12px; z-index: 6; pointer-events: none;
  opacity: .4; transition: opacity .3s;
}
.brand-btn .corner-accent.tl { top: 6px; left: 6px; border-top: 2px solid; border-left: 2px solid; }
.brand-btn .corner-accent.br { bottom: 6px; right: 6px; border-bottom: 2px solid; border-right: 2px solid; }
.brand-btn .sweep {
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events: none; z-index: 4; transition: left .7s ease;
}
.brand-btn:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 16px 0 rgba(0,0,0,.5),
    0 28px 40px -10px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 4px rgba(0,0,0,.3);
}
.brand-btn:hover .sweep { left: 150%; }
.brand-btn:hover .corner-accent { opacity: 1; }
.brand-btn:hover::after { opacity: 1; }
.brand-btn:active {
  transform: translateY(8px) scale(.98);
  box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transition: all .08s;
}

/* ----- Wrapper glow ----- */
.brand-wrap { position: relative; display: inline-block; }
.brand-wrap .outer-glow {
  position: absolute; inset: -8px; border-radius: 20px; opacity: 0;
  pointer-events: none; z-index: -1; filter: blur(22px); transition: opacity .5s;
}
.brand-wrap:hover .outer-glow { opacity: .6; animation: nb-breathe 1.8s ease-in-out infinite; }
@keyframes nb-breathe { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.85;transform:scale(1.08)} }

/* ----- Logos (CSS background SVGs, encoded) ----- */
.nk-logo { background-size: contain; background-repeat: no-repeat; background-position: center; }
.nk-logo--razer    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%2300FF41'><path d='M50 12C48 22 42 28 32 30C24 31.5 20 36 20 42C20 48 24 52 30 54L38 55L34 58C22 62 14 72 14 82C24 78 32 76 40 76C44 76 47 78 47 82C47 86 44 90 38 92L50 72L62 92C56 90 53 86 53 82C53 78 56 76 60 76C68 76 76 78 86 82C86 72 78 62 66 58L62 55L70 54C76 52 80 48 80 42C80 36 76 31.5 68 30C58 28 52 22 50 12ZM50 36C54 36 58 38 60 42C58 46 54 48 50 48C46 48 42 46 40 42C42 38 46 36 50 36Z'/></svg>"); }
.nk-logo--logitech { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%2300B8FC' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'><path d='M72 20A38 38 0 1 0 88 50L60 50L60 38'/><circle cx='50' cy='50' r='6' fill='%2300B8FC' stroke='none'/></svg>"); }
.nk-logo--bloody   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23FF0A1A'><path d='M25 70Q20 55 25 40Q28 32 34 36Q36 44 36 50Q36 40 40 28Q44 20 48 26Q50 34 50 44Q52 24 58 18Q64 14 64 24Q64 34 62 44Q68 30 74 32Q78 36 74 48L72 56Q80 56 82 60Q84 66 80 72L80 80Q80 86 72 86L30 86Q22 86 22 80L22 74Q22 72 25 70Z'/><circle cx='32' cy='92' r='3'/><circle cx='50' cy='94' r='2.5'/><circle cx='68' cy='92' r='3'/><circle cx='42' cy='96' r='1.8'/></svg>"); }
.nk-logo--muse     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M22 38L30 22L42 34L50 18L58 34L70 22L78 38L78 50L22 50Z' fill='%23FFD166' fill-opacity='0.15' stroke='%23FFD166' stroke-width='3' stroke-linejoin='round'/><path d='M30 58L30 80M30 58L50 72L70 58M70 58L70 80M50 72L50 82' fill='none' stroke='%23FFD166' stroke-width='4' stroke-linecap='round'/><circle cx='30' cy='28' r='2.5' fill='%23FFD166'/><circle cx='50' cy='22' r='3' fill='%23FFD166'/><circle cx='70' cy='28' r='2.5' fill='%23FFD166'/><path d='M18 50Q10 60 14 72Q20 70 22 62' fill='%23FFD166' fill-opacity='0.6'/><path d='M82 50Q90 60 86 72Q80 70 78 62' fill='%23FFD166' fill-opacity='0.6'/></svg>"); }

/* ----- RAZER ----- */
.brand-btn.razer    { --bc:#00FF41; border-color: rgba(0,255,65,.2); }
.brand-btn.razer .logo-wrap, .nk-logo--razer    { color:#00FF41; }
.brand-btn.razer .corner-accent { border-color:#00FF41; }
.brand-btn.razer .led-ind { background:#00FF41; border-color:#00FF41; opacity:.3; }
.brand-btn.razer:hover::after {
  background: radial-gradient(ellipse at center, rgba(0,255,65,.28), rgba(0,168,45,.1) 50%, transparent 75%);
  box-shadow: inset 0 0 50px rgba(0,255,65,.35), inset 0 0 100px rgba(0,200,50,.12);
}
.brand-btn.razer:hover .logo-wrap { filter: drop-shadow(0 0 8px #00FF41) drop-shadow(0 0 16px rgba(0,255,65,.6)); }
.brand-btn.razer:hover .btn-label { text-shadow: 0 0 10px rgba(0,255,65,.9), 0 0 20px rgba(0,255,65,.5), 0 1px 2px rgba(0,0,0,.8); color:#fff; }
.brand-btn.razer:hover .led-ind { opacity:1; box-shadow:0 0 10px #00FF41, 0 0 18px rgba(0,255,65,.7); animation: nb-led 1.6s ease-in-out infinite; }
.brand-wrap.razer .outer-glow { background: radial-gradient(ellipse, rgba(0,255,65,.7), transparent 65%); }

/* ----- LOGITECH ----- */
.brand-btn.logitech { --bc:#00B8FC; border-color: rgba(0,184,252,.2); }
.brand-btn.logitech .logo-wrap { color:#00B8FC; }
.brand-btn.logitech .corner-accent { border-color:#00B8FC; }
.brand-btn.logitech .led-ind { background:#00B8FC; border-color:#00B8FC; opacity:.3; }
.brand-btn.logitech:hover::after {
  background: radial-gradient(ellipse at center, rgba(0,184,252,.28), rgba(0,120,200,.1) 50%, transparent 75%);
  box-shadow: inset 0 0 50px rgba(0,184,252,.35), inset 0 0 100px rgba(0,160,220,.12);
}
.brand-btn.logitech:hover .logo-wrap { filter: drop-shadow(0 0 8px #00B8FC) drop-shadow(0 0 16px rgba(0,184,252,.6)); }
.brand-btn.logitech:hover .btn-label { text-shadow: 0 0 10px rgba(0,184,252,.9), 0 0 20px rgba(0,184,252,.5), 0 1px 2px rgba(0,0,0,.8); color:#fff; }
.brand-btn.logitech:hover .led-ind { opacity:1; box-shadow:0 0 10px #00B8FC, 0 0 18px rgba(0,184,252,.7); animation: nb-led 1.6s ease-in-out infinite; }
.brand-wrap.logitech .outer-glow { background: radial-gradient(ellipse, rgba(0,184,252,.7), transparent 65%); }

/* ----- BLOODY ----- */
.brand-btn.bloody { --bc:#FF0A1A; border-color: rgba(255,10,26,.22); }
.brand-btn.bloody .logo-wrap { color:#FF0A1A; }
.brand-btn.bloody .corner-accent { border-color:#FF0A1A; }
.brand-btn.bloody .led-ind { background:#FF0A1A; border-color:#FF0A1A; opacity:.3; }
.brand-btn.bloody:hover::after {
  background: radial-gradient(ellipse at center, rgba(255,10,26,.32), rgba(160,0,16,.12) 50%, transparent 75%);
  box-shadow: inset 0 0 50px rgba(255,10,26,.4), inset 0 0 100px rgba(255,0,20,.15);
}
.brand-btn.bloody:hover .logo-wrap { filter: drop-shadow(0 0 8px #FF0A1A) drop-shadow(0 0 16px rgba(255,10,26,.6)); }
.brand-btn.bloody:hover .btn-label { text-shadow: 0 0 10px rgba(255,10,26,.9), 0 0 20px rgba(255,10,26,.5), 0 1px 2px rgba(0,0,0,.8); color:#fff; }
.brand-btn.bloody:hover .led-ind { opacity:1; box-shadow:0 0 10px #FF0A1A, 0 0 18px rgba(255,10,26,.7); animation: nb-led 1.6s ease-in-out infinite; }
.brand-wrap.bloody .outer-glow { background: radial-gradient(ellipse, rgba(255,10,26,.7), transparent 65%); }

/* ----- MUSE ----- */
.brand-btn.muse { --bc:#FFD166; border-color: rgba(255,209,102,.25); }
.brand-btn.muse .logo-wrap { color:#FFD166; }
.brand-btn.muse .corner-accent { border-color:#FFD166; }
.brand-btn.muse .led-ind { background:#FFD166; border-color:#FFD166; opacity:.3; }
.brand-btn.muse::before { background: linear-gradient(180deg, rgba(255,230,150,.25), rgba(255,210,100,.05) 55%, transparent); }
.brand-btn.muse:hover::after {
  background: radial-gradient(ellipse at center, rgba(255,209,102,.3), rgba(180,140,20,.12) 50%, transparent 75%);
  box-shadow: inset 0 0 50px rgba(255,209,102,.4), inset 0 0 100px rgba(255,180,40,.15);
}
.brand-btn.muse:hover .logo-wrap { filter: drop-shadow(0 0 8px #FFD166) drop-shadow(0 0 18px rgba(255,209,102,.6)); }
.brand-btn.muse:hover .btn-label { text-shadow: 0 0 10px rgba(255,209,102,.9), 0 0 22px rgba(255,180,0,.5), 0 1px 2px rgba(0,0,0,.8); color:#fff; }
.brand-btn.muse:hover .led-ind { opacity:1; box-shadow:0 0 10px #FFD166, 0 0 18px rgba(255,209,102,.7); animation: nb-led 1.6s ease-in-out infinite; }
.brand-wrap.muse .outer-glow { background: radial-gradient(ellipse, rgba(255,209,102,.65), transparent 65%); }

@keyframes nb-led {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.75)}
}