@import url('https://fonts.cdnfonts.com/css/sf-pro-display');

:root {
    --accent-color: #007aff;
    --text-main: #1d1d1f;
    --text-sub: #424245;
    
    --overlay-bg: rgba(255, 255, 255, 0.45); 
    --overlay-border: rgba(255, 255, 255, 0.6);
    --bg-image: url('assets/bg.jpg');
    
    --radius-overlay: 2.75rem;   /* 44px */
    --radius-btn: 1.125rem;   /* 18px */
}

body {
    margin: 0;
    font-family: 'SF Pro Display', system-ui, -apple-system, sans-serif;
    background: var(--bg-image) no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background 0.5s ease;
}

body.citymesh {
    --bg-image: url('assets/bg_citymesh.jpg');
}

.overlay {
    background: var(--overlay-bg);
    backdrop-filter: blur(1rem) saturate(170%);
    -webkit-backdrop-filter: blur(1rem) saturate(170%);
    
    padding: 2.5rem 1.5rem;
    width: 20rem; /* 320px */
    border-radius: var(--radius-overlay);
    text-align: center;
    
    border: 1px solid var(--overlay-border);
    box-shadow: 
        0 1.25rem 3.125rem rgba(0,0,0,0.1),
        inset 0 0.1rem 0.1rem var(--overlay-border);
}

.profile-pic {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 16%;
    margin-bottom: 1.25rem;
    border: 0.1rem solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.1);
}

h1 { 
    font-weight: 600; 
    font-size: 1.5rem; 
    letter-spacing: -0.03rem; 
    margin: 0rem; 
    color: var(--text-main); 
}

p { 
    font-weight: 400; 
    font-size: 1rem; 
    color: var(--text-sub); 
    margin-bottom: 1.875rem; 
}

.btn {
    display: flex;          
    align-items: center;    
    justify-content: center;
    gap: 0.75rem;           
    
    background: var(--accent-color);
    color: white;
    text-decoration: none;
    padding: 1rem;
    border-radius: var(--radius-btn);
    font-weight: 600;
    margin-bottom: 0.75rem;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}


.btn i, .btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0; 
}

.btn-link {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    backdrop-filter: blur(1rem);
}

.btn-contact { 
    margin-bottom: 1rem; 
}

@media (hover: hover) {
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
        filter: brightness(1.1);
    }
    
    .btn-link:hover {
        background: rgba(0, 0, 0, 0.1);
    }
}

.btn:active { 
    transform: scale(0.96); opacity: 0.8; 
}