/* --- Reset & Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Professional font stack similar to Julius Baer */
    background-color: #ffffff; /* Pure white background */
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    overflow: hidden; /* Prevent scrollbars */
}

/* --- Logo Container --- */
.landing-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.logo-wrapper {
    /* This ensures the logo doesn't get too big on large screens */
    max-width: 600px; 
    width: 80%; 
    text-align: center;
}

/* --- Logo Image Styling --- */
.main-logo {
    /* 
       Resizing: The original logo might be large. 
       We set width to 100% of the wrapper, which is capped at 600px.
       This effectively reduces it to roughly half size or less.
    */
    width: 100%;
    height: auto;
    display: block;
    
    /* --- Security & Cleanliness Features --- */
    
    /* 1. Disable text selection (highlighting) */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 and IE 11 */
    user-select: none;         /* Standard syntax */
    
    /* 2. Disable image dragging (prevents "ghost" image when dragging) */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    
    /* 3. Pointer events (optional: set to 'none' if you want it to be unclickable) */
    /* pointer-events: none; */
}

/* --- Responsive Tweaks --- */
@media (max-width: 768px) {
    .logo-wrapper {
        width: 90%; /* Make it slightly larger on mobile so it remains readable */
    }
}