:root{
  --card-w: clamp(320px, 92vw, 600px);
  --accent: #b38aff;
  --text:   #f7f7fb;
  --muted:  #cfd2ddcc;
  --glass:  rgba(255,255,255,0.08);
  --glass2: rgba(255,255,255,0.16);
  --border: rgba(255,255,255,0.10);
  --border2: rgba(255,255,255,0.18);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:
    radial-gradient(1200px 800px at 10% 10%, #d1a0ff33, transparent),
    radial-gradient(1000px 700px at 90% 90%, #6bd5ff33, transparent),
    #0c0f14;
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  --page-pad: clamp(16px, 4vw, 40px);
  padding: var(--page-pad);
  padding-top: max(var(--page-pad), env(safe-area-inset-top));
  padding-right: max(var(--page-pad), env(safe-area-inset-right));
  padding-bottom: max(var(--page-pad), env(safe-area-inset-bottom));
  padding-left: max(var(--page-pad), env(safe-area-inset-left));
  min-height: 100dvh;
}

.card{
  position: relative;
  width: min(92%, var(--card-w));
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background-clip: padding-box;
  isolation: isolate;
}

.bg{ position:absolute; inset:0; z-index:-1; }
.bg img{ width:100%; height:100%; object-fit:cover; filter: blur(2px) saturate(1.05); transform: scale(1.05); }
.bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,15,20,.25) 0%, rgba(12,15,20,.65) 35%, rgba(12,15,20,.92) 100%); }

.content{ position:relative; padding:28px; display:flex; flex-direction:column; gap:16px; }
.title{ font-family: "Playfair Display", Georgia, serif; font-size: clamp(24px, 2.2vw + 8px, 36px); font-weight:700; letter-spacing: .3px; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.links{ display:flex; flex-direction:column; gap:14px; margin-top: 6px; }

.link{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(14px, 1.8vw, 18px) clamp(14px, 2.2vw, 22px); min-height: clamp(48px, 6vh, 64px); border-radius: 16px; text-decoration:none; color:var(--text);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.link::before{
  content: ""; position:absolute; inset:0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--border);
}
.link:hover{ transform: translateY(-1px); background: var(--glass2); }
.link:hover::before{ box-shadow: inset 0 0 0 1px var(--border2); }
.link:focus-visible{ outline: 2px solid var(--accent); box-shadow: 0 0 0 6px rgba(179,138,255,.15); }

.left{ display:flex; align-items:center; gap:12px; }
.icon{ width:clamp(32px,3.2vw,38px); height:clamp(32px,3.2vw,38px); border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.08); border:1px solid var(--border2); }
.icon img.brand-logo{ width:clamp(16px,1.6vw,20px); height:clamp(16px,1.6vw,20px); display:block; object-fit: contain; }

.label{ font-weight:600; letter-spacing:.3px; }
.chev{ width:clamp(30px,3vw,36px); height:clamp(30px,3vw,36px); border-radius:50%; display:grid; place-items:center; border:1px solid var(--border2); }
.chev svg{ width:18px; height:18px; }

.smallprint{ margin-top: 10px; font-size:12px; color: var(--muted); text-align:center; }

@media (max-width: 380px){
  .title{ font-size:24px; }
  .link{ padding: 14px; }
}

@supports not ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  .link { background: rgba(255,255,255,0.12); }
}

.icon.brand.tg{ background: transparent; border: 0; }
.icon.brand.tg img.brand-logo{ width: 100%; height: 100%; }

.icon.brand.of { background: color-mix(in srgb, var(--of) 22%, transparent); color: var(--of); }
.icon.brand.tg { background: color-mix(in srgb, var(--tg) 22%, transparent); color: var(--tg); }

.chev svg { width: clamp(12px, 1.6vw, 16px); height: clamp(12px, 1.6vw, 16px); }