:root{
    --bg-deep:#060d16;
    --bg-navy:#0c1c2e;
    --cloud-white:#e9f2fb;
    --cloud-blue:#4fa3e0;
    --cloud-mist:#8fb8d6;
    --accent-amber:#f2a93c;
    --text-dim:#9fb2c4;
}

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

html,body{
    margin: 0;
}

body{
    font-family:'Helvetica Neue', Arial, sans-serif;
    background:var(--bg-deep);
    color:var(--cloud-white);
    overflow-x:hidden;
    position:relative;
    display: flex;
    flex-direction: column;
    min-height:100vh;
}

#sky{
    position:fixed;
    inset:0;
    z-index:-1;
    background:var(--bg-deep);
    overflow:hidden;
}

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    will-change:transform;
    transform:translateZ(0);
    transform-origin:center center;
    backface-visibility:hidden;
}

.blob-1{
    top:-15%;
    right:-8%;
    width:55vw;
    height:55vw;
    max-width:700px;
    max-height:700px;
    background:radial-gradient(circle, rgba(79,163,224,0.5) 0%, rgba(79,163,224,0.2) 45%, transparent 72%);
    animation: driftA 12s ease-in-out infinite;
}

.blob-2{
    bottom:-25%;
    left:-10%;
    width:48vw;
    height:48vw;
    max-width:600px;
    max-height:600px;
    background:radial-gradient(circle, rgba(233,242,251,0.3) 0%, rgba(79,163,224,0.14) 45%, transparent 70%);
    animation: driftB 15s ease-in-out infinite;
}

.blob-3{
    top:30%;
    left:50%;
    width:38vw;
    height:38vw;
    max-width:480px;
    max-height:480px;
    background:radial-gradient(circle, rgba(143,184,214,0.35) 0%, rgba(12,28,46,0) 70%);
    animation: driftC 10s ease-in-out infinite;
}

@keyframes driftA{
    0%   { transform: translate(0, 0)        scale(1, 1);          rotate: 0deg; }
    20%  { transform: translate(-4vw, 3vh)   scale(1.08, 0.94);   rotate: 20deg; }
    40%  { transform: translate(-7vw, -2vh)  scale(0.96, 1.10);   rotate: -15deg; }
    60%  { transform: translate(2vw, -5vh)   scale(1.12, 0.92);   rotate: 35deg; }
    80%  { transform: translate(-3vw, 3vh)   scale(0.98, 1.06);   rotate: -10deg; }
    100% { transform: translate(0, 0)        scale(1, 1);          rotate: 0deg; }
}

@keyframes driftB{
    0%   { transform: translate(0, 0)        scale(1, 1);          rotate: 0deg; }
    25%  { transform: translate(5vw, -4vh)   scale(0.92, 1.10);   rotate: -25deg; }
    50%  { transform: translate(3vw, 3vh)    scale(1.10, 0.94);   rotate: 15deg; }
    75%  { transform: translate(-2vw, -3vh)  scale(0.96, 1.08);   rotate: -40deg; }
    100% { transform: translate(0, 0)        scale(1, 1);          rotate: 0deg; }
}

@keyframes driftC{
    0%   { transform: translate(0, 0)        scale(1, 1);          rotate: 0deg; }
    33%  { transform: translate(-6vw, 4vh)   scale(1.12, 0.90);   rotate: 30deg; }
    66%  { transform: translate(4vw, -3vh)   scale(0.90, 1.12);   rotate: -20deg; }
    100% { transform: translate(0, 0)        scale(1, 1);          rotate: 0deg; }
}

.noise-overlay{
    position:absolute;
    inset:0;
    opacity:0.14;
    mix-blend-mode:overlay;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
}

.grunge-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (max-width:640px){
    header{padding:20px 24px;}
    nav{gap:20px;}
    main{padding:40px 24px 0;}
    footer{padding:0 24px 40px;flex-direction:column;align-items:flex-start;}
    .info-group{gap:32px;}
    .scroll-line{display:none;}
}

@media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
    .blob{ animation:none !important; }
}