:root{
  color-scheme: dark;
  --bg:#07070a;
  --fg:#e8e5ee;
  --muted:#8d879b;

  /* Оттенки сняты с самой монограммы, чтобы кнопка читалась как её продолжение. */
  --g-light:#f8e7a6;
  --g-warm:#e6c463;
  --g-deep:#c9962c;
  --g-shade:#a9761b;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:28px;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  overflow-x:hidden;
}

/* Тёплое свечение за знаком — тот же приём, что даёт объём самой монограмме. */
body::before{
  content:"";
  position:fixed;
  inset:auto;
  width:78vmin;
  height:78vmin;
  top:50%;
  left:50%;
  transform:translate(-50%, -62%);
  background:radial-gradient(circle, rgba(212,164,55,.17), transparent 64%);
  pointer-events:none;
}

.gate{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:22px;
}

.gate__logo{
  width:clamp(150px, 34vmin, 230px);
  height:auto;
  filter:drop-shadow(0 10px 30px rgba(212,164,55,.30));
}

.gate__tagline{
  margin:-6px 0 2px;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- кнопка ---------- */

.enter{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:210px;
  padding:15px 40px;
  border-radius:999px;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#241903;                       /* тёмно-коричневый по золоту читается лучше чёрного */

  background:linear-gradient(140deg,
      var(--g-light) 0%,
      var(--g-warm) 26%,
      var(--g-deep) 52%,
      var(--g-light) 74%,
      var(--g-shade) 100%);

  /* Металл делают не градиентом, а фаской: светлая грань сверху, тень снизу. */
  box-shadow:
    inset 0 1px 0 rgba(255,248,225,.85),
    inset 0 -2px 3px rgba(120,78,10,.55),
    0 10px 28px rgba(201,150,44,.30),
    0 2px 6px rgba(0,0,0,.5);

  overflow:hidden;
  isolation:isolate;
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.enter__label{ position:relative; z-index:1; }

/* Блик: узкая светлая полоса, уезжающая по кнопке при наведении. */
.enter::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-70%;
  width:45%;
  height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.62), transparent);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}

.enter:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,250,235,.9),
    inset 0 -2px 3px rgba(120,78,10,.5),
    0 14px 34px rgba(201,150,44,.42),
    0 3px 8px rgba(0,0,0,.5);
}
.enter:hover::after{ animation:sheen .85s ease-out; }

.enter:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(120,78,10,.6),
    0 4px 12px rgba(201,150,44,.28);
}

.enter:focus-visible{
  outline:2px solid var(--g-light);
  outline-offset:4px;
}

@keyframes sheen{
  0%   { left:-70%; opacity:0; }
  12%  { opacity:1; }
  100% { left:120%; opacity:0; }
}

@media (max-width:420px){
  body{ padding:20px; }
  .gate{ gap:18px; }
  .enter{ min-width:190px; padding:14px 34px; font-size:15px; }
  .gate__tagline{ font-size:13.5px; }
}

/* Кому анимации мешают — оставляем статичную кнопку, вид не страдает. */
@media (prefers-reduced-motion:reduce){
  .enter{ transition:none; }
  .enter:hover{ transform:none; }
  .enter:hover::after{ animation:none; }
}