:root{
  --bg:#000;
  --text:#fff;
  --text-strong:#EDEDED;
  --text-muted:#6E6E73;
  --brand:#3452FF;
  --surface:#1C1C1E;
  --surface-hover:#28282C;
  --separator:rgba(255,255,255,.12);
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/plus-jakarta-sans-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/plus-jakarta-sans-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none;mix-blend-mode:screen}
.wrap{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

main{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:48px calc(24px + env(safe-area-inset-right,0px)) 72px calc(24px + env(safe-area-inset-left,0px));
}

.pill{
  position:relative;z-index:3;
  display:inline-block;
  padding:.6em 1.6em;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  font-size:clamp(11px,1.09vw,13.5px);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--text-strong);
}

.title{
  position:relative;z-index:1;
  margin:clamp(25px,4.24vw,52px) 0 0;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:700;
  font-size:clamp(24px,4.65vw,73px);
  line-height:1.0;
  letter-spacing:-.018em;
  user-select:none;
  -webkit-user-select:none;
}
.title span{display:block}

.actions{
  position:relative;z-index:3;
  margin-top:clamp(34px,5.81vw,71px);
  display:flex;align-items:center;
  gap:clamp(10px,1.09vw,14px);
  --btn-w:clamp(50px,5.53vw,67px);
  --btn-h:clamp(35px,3.89vw,46px);
  --btn-icon:clamp(15px,1.58vw,19px);
}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--btn-w);
  height:var(--btn-h);
  border-radius:999px;
  background:var(--brand);color:var(--text);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:filter .18s ease,transform .18s ease;
}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-primary svg{width:var(--btn-icon);height:var(--btn-icon);flex:none}

footer{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 calc(24px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--text-muted);font-size:11px;text-align:center;
}
footer a{color:inherit;text-decoration:none;transition:color .15s ease}
footer a:hover{color:#fff}
footer .legal{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}

.modal{
  position:fixed;inset:0;z-index:10;display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility 0s linear .22s;
}
.modal.is-open{opacity:1;visibility:visible;transition:opacity .22s ease}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-box{
  position:relative;z-index:1;
  background:#0B0B0C;border:1px solid var(--separator);
  border-radius:18px;padding:18px;
  max-width:min(86vw,760px);
  max-height:92vh;overflow:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(8px) scale(.97);
  transition:transform .26s cubic-bezier(.2,.85,.25,1);
}
.modal.is-open .modal-box{transform:none}
.modal-box img{display:block;max-width:100%;max-height:70vh;border-radius:10px}
.modal-box img[hidden]{display:none}
.modal-close{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;border-radius:50%;
  border:0;background:#fff;color:#1F2937;
  font-size:17px;line-height:1;cursor:pointer;padding:0;
  display:grid;place-items:center;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
  transition:background .15s ease,transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.modal-close:hover{background:#E8E8EA;color:#000;transform:scale(1.06)}
.modal-note{padding:46px 84px;color:#E5E7EB;font-size:15px;letter-spacing:.08em;text-align:center}
.modal-note span{display:block;margin-top:10px;font-size:13px;letter-spacing:.04em;color:#9CA3AF}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  .modal,.modal-box{transition:none}
}

@media (max-width:640px){
  .title{
    font-size:clamp(26px,7.4vw,40px);
    letter-spacing:-.012em;
  }
  .actions{--btn-w:64px;--btn-h:46px;--btn-icon:20px}
  .modal-box{padding:12px;border-radius:14px;max-width:92vw}
  .modal-box img{max-height:64vh}
  .modal-note{padding:36px 30px;font-size:14px}
  .modal-close{top:8px;right:8px;width:28px;height:28px;font-size:16px}
}