*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }

body {
    background: linear-gradient(135deg, #6bc5f7 0%, #4e6af0 55%, #3948d0 100%);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Decorative background layer ─── */
.background-container {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
}

/* Dot grid — top-left corner only */
.top-portion {
    position: absolute;
    top: 24px;
    left: 36px;
    width: 122px;
    height: 86px;
    background-image: radial-gradient(circle, rgba(255,255,255,0.22) 2.5px, transparent 2.5px);
    background-size: 15px 15px;
}

/* Bottom landscape scene */
.bottom-portion {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 57%;
    background-image: url('/templates/images/bottom-scene.svg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* Floating bubble — large */
.background-container::before {
    content: '';
    position: absolute;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    top: 30%; left: 23%;
}

/* Floating bubble — small */
.background-container::after {
    content: '';
    position: absolute;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    top: 17%; right: 34%;
}

/* ─── Content layer ─── */
.container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.row.center-text { text-align: center; }

.header { margin-bottom: 28px; }

.header img {
    width: 76px;
    height: 76px;
}

.content h1 {
    color: #ffffff;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.3px;
    margin-bottom: 14px;
}

.content h3 {
    color: rgba(255,255,255,0.72);
    font-size: 16px;
    font-weight: 300;
    font-style: italic;
    margin-bottom: 10px;
}

.content h2 {
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
}