/* v4.4 — UTM propagation for QR codes (see script.js) */
:root{
  --bg1:#58348d;
  --bg2:#9c4ec2;
  --card:rgba(255,255,255,0.08);
  --cardBorder:rgba(255,255,255,0.14);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.72);
  --btn:rgba(255,255,255,0.10);
  --btnBorder:rgba(255,255,255,0.18);
  --primary1:#6a2cff;
  --primary2:#a24dff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 800px at 20% 10%, var(--bg2), transparent 60%),
             radial-gradient(900px 700px at 80% 30%, #d65cff, transparent 60%),
             linear-gradient(160deg, var(--bg1), var(--bg2));
  color:var(--text);
}
.wrap{width:min(520px,92vw);margin:0 auto;padding:22px 0 34px}
.header{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px}
.subtitle{margin-top:2px;font-size:0.95rem;font-weight:500;color:var(--muted)}
.tagline{margin-top:4px;font-size:0.95rem;font-weight:400;color:var(--muted)}

.logo{width:min(210px,70vw);height:auto;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.35))}
.name{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:600;
  letter-spacing:.2px;
  font-size:22px;
  color:rgba(255,255,255,0.92)
}
.card{
  background:var(--card);
  border:1px solid var(--cardBorder);
  border-radius:18px;
  padding:16px;
  box-shadow:0 18px 60px rgba(0,0,0,0.35);
  backdrop-filter:blur(10px)
}
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  background:var(--btn);
  border:1px solid var(--btnBorder);
  font-weight:500;
  letter-spacing:.2px;
  line-height:1.2;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn + .btn{margin-top:10px}
.btn-primary{
  background:linear-gradient(135deg, var(--primary1), var(--primary2));
  border-color:rgba(255,255,255,0.24);
  box-shadow:0 10px 26px rgba(0,0,0,0.28);
  padding:15px 14px;
  font-weight:600
}
.btn-secondary{background:rgba(255,255,255,0.08)}
.btn-icon{display:inline-flex;width:18px;height:18px}
.btn-icon svg{
  width:18px;height:18px;
  fill:none;
  stroke:rgba(255,255,255,0.92);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.grid2{margin-top:10px;margin-bottom:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .btn{margin-top:0}
.footer{margin-top:14px;text-align:center}
.small{font-size:12px;color:var(--muted)}
@media (max-width:380px){
  .name{font-size:20px}
  .btn{font-size:14px}
}