/* Simple Linktree-like styles */
:root{
	--bg-top:#3b4b57;
	--bg-bottom:#202733;
	--card:#2c3650;
	--yellow:#ffc900;
	--link-text:#0b1220;
	--muted-text:rgba(230,238,248,0.75);
}
*{box-sizing:border-box}
html,body{height:100%}
.body-top-aligned{display:block}
.body-top-aligned{display:block}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-bottom) 100%);color:#fff;display:flex;align-items:flex-start;justify-content:center;padding:56px 36px 36px}
.page{position:relative;width:100%;max-width:605px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));background-color:var(--card);border-radius:16px;padding:30px 22px;box-shadow:0 40px 80px rgba(5,10,20,0.6);}
.card-wrap{width:100%;max-width:605px;margin:12px auto 0;position:relative}
.page{z-index:1}
@media (max-width:420px){.card-wrap{margin:10px auto 0}}
.profile{text-align:center;padding:6px 8px 18px}
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:none;display:block;margin:0 auto 12px;background:transparent}
.profile h1{margin:8px 0 6px;font-size:18px;letter-spacing:2px;text-transform:uppercase;color:#fff}
.subtitle{margin:0;color:var(--muted-text);font-size:13px}
.socials{display:flex;gap:12px;justify-content:center;margin:10px 0}
.social img{display:block}
.social img{width:36px;height:36px;border-radius:50%;background:#fff;padding:6px}
.links{display:flex;flex-direction:column;gap:14px;padding:8px 4px 4px}
.link{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--yellow);border-radius:999px;color:var(--link-text);text-decoration:none;box-shadow:none;transition:transform .08s ease;position:relative}
.link .icon{width:44px;height:44px;object-fit:cover;flex:0 0 44px;border-radius:50%;background:#fff;padding:6px}
.thumb{width:44px;height:44px;object-fit:cover;flex:0 0 44px;border-radius:50%;border:6px solid #fff;background:#fff}
.link span{font-size:14px;text-align:center;flex:1}

/* Hide small icons/thumbs in the compact link list and center/bolden the text */
.link .thumb,.link .icon{display:none}
.link:not(.featured){justify-content:center;padding:12px 48px}
.link:not(.featured) span{font-weight:700;text-align:center}
.link::after{content:'⋮';position:absolute;right:18px;color:rgba(0,0,0,0.45);font-size:18px}
.link:hover{transform:translateY(-3px)}
.link.muted{opacity:0.95}
.link.featured{display:flex;flex-direction:column;align-items:stretch;padding:0;border-radius:12px;overflow:hidden}
.link.featured .preview{width:100%;display:block}
.link.featured img{width:100%;height:180px;object-fit:cover;display:block}
.link.featured .feature-text{padding:12px 16px;background:var(--yellow);color:var(--link-text);border-radius:0 0 12px 12px;text-align:center}
.footer{text-align:center;margin-top:18px;color:var(--muted-text);font-size:13px}
.rental{text-align:center;margin-top:8px;color:var(--muted-text);font-size:14px}
@media (max-width:420px){.page{padding:20px 12px}.avatar{width:84px;height:84px}}

/* small circular logo above the card - absolute so it overlaps the card and remains visible */
.top-logo{position:absolute;left:50%;top:-40px;transform:translateX(-50%);z-index:10;width:72px;height:72px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.top-logo img{width:86px;height:86px;object-fit:cover;border-radius:50%;border:none;background:transparent;box-shadow:none;display:block;transform:scale(1.05)}
@media (max-width:420px){.top-logo{top:-34px;width:64px;height:64px}.top-logo img{width:76px;height:76px;border:none;transform:scale(1.02)}}