:root {
    --header-height: 70px;
    --dark-blue: #0d1b2a;
    --medium-blue: #1b263b;
    --light-blue: #415a77;
    --accent-color: #4d96ff;
    --secondary-accent: #82d3cf;
    --text-white: #e0e1dd;
    --text-light: #a3a8c3;
    --subtle-accent: rgba(77, 150, 255, 0.1);

    --shape-blue-1: rgba(16, 107, 235, 0.655);
    --shape-blue-2: rgba(95, 239, 232, 0.57);
    --shape-blue-3: rgba(100, 180, 230, 0.312);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dark-blue);
    color: var(--text-white);
    line-height: 1.6;
    overflow-anchor: none;
}

.background-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
}

.shape {
    position: absolute;
    border-radius: 50%;
    transition: transform 0.5s ease-out;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
    filter: blur(60px);
    background-color: currentColor;
}

.shape-1 {
    color: rgba(3, 8, 21, 0.771);
    width: 800px;
    height: 800px;
    top: -300px;
    right: -150px;
    animation: edgeFloat1 14s linear infinite;
}

.shape-2 {
    color: rgba(3, 8, 21, 0.771);
    width: 600px;
    height: 600px;
    bottom: -200px;
    left: -150px;
    animation: edgeFloat2 16s linear infinite;
}

.shape-3 {
    color: rgba(3, 8, 21, 0.771);
    width: 400px;
    height: 400px;
    top: 20%;
    left: 20%;
    animation: edgeFloat3 18s ease-in-out infinite;
}

.shape-4 {
    color: rgba(3, 8, 21, 0.771);
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: -100px;
    animation: edgeFloat4 20s linear infinite;
}

@keyframes edgeFloat1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-120px, 60px) rotate(-15deg); }
    50% { transform: translate(80px, -80px) rotate(25deg); }
    75% { transform: translate(-160px, 100px) rotate(-30deg); }
}

@keyframes edgeFloat2 {
    0%, 100% { transform: translate(0, 0) skew(0deg); }
    30% { transform: translate(180px, -120px) skew(5deg); }
    60% { transform: translate(-200px, 100px) skew(-3deg); }
}

@keyframes edgeFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(80px, -100px) scale(1.1); }
    50% { transform: translate(-100px, 120px) scale(0.9); }
    75% { transform: translate(60px, 80px) scale(1.05); }
}

@keyframes edgeFloat4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-200px, -80px) rotate(90deg); }
    50% { transform: translate(150px, 100px) rotate(180deg); }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
}

.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 992px) {
    :root {
        font-size: 14px;
         --header-height: 65px;
    }
     .shape-1 { width: 650px; height: 650px; top: -250px; right: -100px;}
     .shape-2 { width: 500px; height: 500px; bottom: -150px; left: -100px;}
     .shape-3 { width: 300px; height: 300px; }
     .shape-4 { width: 400px; height: 400px; bottom: -100px; right: -50px;}
}

@media (max-width: 768px) {
     :root {
         --header-height: 60px;
     }
     .shape { filter: blur(60px); opacity: 0.6; }
     .shape-1 { width: 400px; height: 400px; top: -150px; right: -80px;}
     .shape-2 { width: 300px; height: 300px; bottom: -100px; left: -80px;}
     .shape-3 { width: 200px; height: 200px; }
     .shape-4 { width: 250px; height: 250px; bottom: -80px; right: -40px;}
}

@media (max-width: 480px) {
    :root {
        font-size: 13px;
    }
    .shape { filter: blur(50px); opacity: 0.5; }
     .shape-1 { width: 300px; height: 300px; top: -100px; right: -50px;}
     .shape-2 { width: 250px; height: 250px; bottom: -80px; left: -50px;}
     .shape-3 { width: 150px; height: 150px; }
     .shape-4 { width: 200px; height: 200px; bottom: -50px; right: -30px;}
}