:root{
  --bg:#07120b; /* deep green background */
  --card:#07120b; /* keep card dark */
  --text:#f7f7f5; /* white-ish */
  --muted:#cbd5c2; /* light greenish muted */
  --primary:#1fa34a; /* primary green */
  --accent:#c9a24a; /* gold accent */
  --dark:#000000; /* Blck */
}
*{box-sizing:border-box}
html,body{height:100%}
.video-bg{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;filter:brightness(.45);transition:opacity .3s ease;display:block;background-color:#07120b
}
body{
  margin:0;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;padding:32px;min-height:100vh
}
.card{
  width:100%;max-width:520px;background:rgba(255,255,255,0.03);border-radius:14px;padding:28px 20px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.5);backdrop-filter: blur(6px)
}
/* gold shimmer removed per request */
.card{position:relative;z-index:1}
.card::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;box-shadow:inset 0 0 0 1.2px rgba(201,162,74,0.95);z-index:2}
.avatar{display:flex;align-items:center;justify-content:center;margin:6px auto 12px}
.avatar img{border-radius:999px;width:120px;height:120px;object-fit:contain;display:block}
.name{margin:6px 0 0;font-size:20px}
.subtitle{margin:6px 0 16px;color:var(--muted);font-size:13px}
.links{display:flex;flex-direction:column;gap:12px;padding:6px 12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:12px;background:linear-gradient(180deg,var(--primary),#15863a);color:var(--dark);text-decoration:none;font-weight:700;box-shadow:0 8px 22px rgba(31,111,235,0.06);transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}
.btn:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(0,0,0,0.5)}
.btn::after{display:none}
.btn .icon{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center}
.btn .icon img{display:block;width:100%;height:100%;object-fit:contain}
.btn .label{display:inline-block}
.foot{margin-top:18px;color:var(--muted);font-size:12px}

.video-controls{margin-top:8px}
.video-toggle{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:8px 10px;border-radius:8px;font-size:12px}
.video-toggle[aria-pressed="true"]{background:rgba(0,0,0,0.1)}

@media (prefers-color-scheme: light){
  :root{--bg:#f7f7f7;--card:#ffffff;--text:#07120b;--muted:#6b6b6b}
}

/* hover background switching (uses data-bg attribute on links) */
.links .btn:hover{cursor:pointer}

/* small screens */
@media (max-width:420px){
  .card{padding:20px}
  .btn{padding:12px 14px}
  .btn{gap:8px}
}

@media (prefers-reduced-motion: reduce){
  .video-bg{display:none}
}

@media (max-width:600px){
  /* On small screens keep cover so the video fills the viewport (no black bars).
     Use center top positioning to keep faces/logos visible when possible. */
  .video-bg{object-fit:cover;object-position:center top}
}