:root {
    --primary: #1f6f8b;
    --primary-dark: #144d63;
    --secondary: #f5f8fb;
    --text: #1f2b3a;
    --muted: #64748b;
    --border: rgba(31, 111, 139, 0.12);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background: linear-gradient(135deg, #f7fcff 0%, #eff8fb 45%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(31, 111, 139, 0.16) 0%, transparent 30%),
        radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.95) 0%, transparent 34%),
        radial-gradient(circle at 75% 80%, rgba(99, 187, 213, 0.18) 0%, transparent 26%),
        linear-gradient(120deg, rgba(255,255,255,0.92) 0%, rgba(238,248,252,0.82) 45%, rgba(221,239,245,0.74) 100%);
    background-size: cover;
    pointer-events: none;
    z-index: -1;
    filter: saturate(110%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(90, 174, 207, 0.18) 0 1px, transparent 1.2px),
        radial-gradient(circle, rgba(31, 111, 139, 0.12) 0 1.1px, transparent 1.3px);
    background-size: 26px 26px, 36px 36px;
    background-position: 0 0, 18px 18px;
    animation: bubbleDrift 20s linear infinite;
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
}

body > * {
    position: relative;
    z-index: 1;
}

@keyframes bubbleDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.45;
    }
    50% {
        transform: translate3d(-1.2%, 1.2%, 0) scale(1.02);
        opacity: 0.6;
    }
    100% {
        transform: translate3d(1.2%, -1.2%, 0) scale(1.04);
        opacity: 0.45;
    }
}

img {
    max-width: 100%;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
