
:root{
  --bg:#08101b;
  --bg2:#0e1d31;
  --gold:#c8a86d;
  --gold-soft:#e4c895;
  --text:#f4f1ea;
  --muted:#bdc8d5;
  --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 18% 22%, rgba(200,168,109,.16), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(90,130,190,.22), transparent 28%),
    radial-gradient(circle at 50% 78%, rgba(200,168,109,.12), transparent 35%),
    linear-gradient(160deg, #07111b 0%, #0b1521 36%, #0f2036 100%);
  color:var(--text);
  overflow-x:hidden;
}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{
  background-image:
    radial-gradient(2px 2px at 12% 24%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 16%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 72%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 33% 78%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.4px 1.4px at 54% 42%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.7px 1.7px at 23% 63%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 76% 55%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.7px 1.7px at 91% 79%, rgba(255,255,255,.5), transparent 60%);
  opacity:.85;
}
body::after{
  background:linear-gradient(to bottom, rgba(6,10,18,.15), rgba(6,10,18,.55));
}
.site-shell{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.site-shell::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,.05), transparent 45%);
  animation:pulse 8s ease-in-out infinite;
}
.brand{
  position:absolute;top:28px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;z-index:2
}
.brand img{width:126px;height:auto;opacity:.95;filter:drop-shadow(0 10px 35px rgba(0,0,0,.28))}
.card{
  position:relative;z-index:1;
  width:min(720px,100%);
  text-align:center;
  padding:52px 34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:0 24px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.kicker{
  display:inline-block;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:20px;
}
h1{
  margin:0;
  font-size:clamp(2.7rem,6vw,5rem);
  line-height:1.02;
  letter-spacing:-.06em;
}
p{
  width:min(460px,100%);
  margin:18px auto 0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.75;
}
.actions{margin-top:30px}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border-radius:999px;border:1px solid var(--gold);
  background:var(--gold);color:#0c1828;text-decoration:none;font-weight:700;
  letter-spacing:.02em;box-shadow:0 10px 30px rgba(200,168,109,.22);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(200,168,109,.28);background:#d4b37c}
.note{margin-top:18px;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:#93a6be}
.help-chip{
  position:fixed;right:18px;bottom:18px;z-index:3;
  display:flex;align-items:center;gap:12px;max-width:min(90vw,360px);
  padding:14px 16px;border:1px solid rgba(200,168,109,.28);border-radius:20px;
  background:rgba(9,18,30,.92);color:#eef2f6;text-decoration:none;
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  backdrop-filter:blur(14px)
}
.help-chip[hidden]{display:none}
.help-chip strong{display:block;font-size:.95rem}
.help-chip span{display:block;font-size:.82rem;color:#b8c4d2;line-height:1.45}
.help-icon{
  flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg, rgba(200,168,109,.22), rgba(200,168,109,.08));color:var(--gold-soft);
  border:1px solid rgba(200,168,109,.26)
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@media(max-width:640px){
  .site-shell{padding:22px}
  .brand{top:24px}
  .brand img{width:108px}
  .card{padding:44px 22px 38px;border-radius:24px}
  p{font-size:.97rem;line-height:1.65}
  .button{min-height:50px;padding:0 22px}
}
