body{
position:relative;
min-height:100vh;
overflow-x:hidden;
background:#070a14;
}
body::before{
content:"";
position:fixed;
z-index:-10;
width:650px;
height:650px;
top:-250px;
left:-200px;
border-radius:50%;
background:radial-gradient(circle,#741afa 0%,rgba(99, 101, 241, 0.557) 30%,rgba(99,102,241,.08) 60%,transparent 72%);
filter:blur(35px);
opacity:.8;
animation:moveBlob1 8s ease-in-out infinite alternate;
}
body::after{
content:"";
position:fixed;
z-index:-10;
width:600px;
height:600px;
right:-200px;
bottom:-250px;
border-radius:50%;
background:radial-gradient(circle,#9320ff 0%,rgba(168,85,247,.4) 30%,rgba(168,85,247,.08) 60%,transparent 72%);
filter:blur(35px);
opacity:.75;
animation:moveBlob2 10s ease-in-out infinite alternate;
}
.top-section{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,rgba(13, 18, 43, 0.735),rgba(20,18,55,.8));
}
.top-section::before{
content:"";
position:absolute;
z-index:0;
inset:-100px;
background-image:linear-gradient(rgba(129,140,248,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(129,140,248,.08) 1px,transparent 1px);
background-size:50px 50px;
transform:perspective(500px) rotateX(55deg) scale(1.5);
transform-origin:center bottom;
animation:gridMove 8s linear infinite;
mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 70%,transparent 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 70%,transparent 100%);
}
.top-section::after{
content:"";
position:absolute;
z-index:0;
width:500px;
height:500px;
top:10%;
right:5%;
border-radius:50%;
background:radial-gradient(circle,rgba(34, 211, 238, 0.226),rgba(34,211,238,.05) 45%,transparent 70%);
filter:blur(30px);
animation:moveBlob3 7s ease-in-out infinite alternate;
}
.hero{
position:relative;
z-index:1;
text-align:center;
padding:100px 20px 110px;
background:transparent;
}
.hero h1{
color:#fff;
background:linear-gradient(90deg,#fff,#c7d2fe,#a78bfa,#fff);
background-size:300% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:titleGlow 4s linear infinite;
}
.hero p{
color:#cbd5e1;
}
.contact-container{
position:relative;
z-index:1;
display:flex;
justify-content:center;
padding:80px 20px 110px;
background:
radial-gradient(circle at 20% 30%,rgba(78, 70, 229, 0.224),transparent 30%),
radial-gradient(circle at 80% 70%,rgba(138, 92, 246, 0.226),transparent 30%),
#080b18;
}
.contact-container::before{
content:"";
position:absolute;
inset:0;
background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
background-size:30px 30px;
opacity:.25;
mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);
-webkit-mask-image:linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);
}
.form{
position:relative;
width:100%;
max-width:560px;
padding:42px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:24px;
box-shadow:0 25px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(25px);
-webkit-backdrop-filter:blur(25px);
}
.form form{
display:flex;
flex-direction:column;
gap:18px;
}
.form input{
width:100%;
height:58px;
box-sizing:border-box;
padding:0 18px;
border:1px solid rgba(255,255,255,.1);
border-radius:14px;
outline:none;
background:rgba(2,6,23,.65);
color:#f8fafc;
font-family:"Poppins",sans-serif;
font-size:.92rem;
font-weight:400;
letter-spacing:.1px;
box-shadow:inset 0 1px 1px rgba(255,255,255,.04),0 5px 20px rgba(0,0,0,.12);
transition:all .25s ease;
}
.form input::placeholder{
color:#64748b;
transition:all .25s ease;
}
.form input:hover{
background:rgba(15,23,42,.85);
border-color:rgba(148,163,184,.25);
box-shadow:inset 0 1px 1px rgba(255,255,255,.05),0 8px 25px rgba(0,0,0,.16);
}
.form input:focus{
background:rgba(15,23,42,.95);
border-color:#818cf8;
box-shadow:0 0 0 3px rgba(99,102,241,.12),0 0 25px rgba(99,102,241,.12),inset 0 1px 1px rgba(255,255,255,.06);
transform:translateY(-1px);
}
.form input:focus::placeholder{
color:#94a3b8;
transform:translateX(3px);
}
.form input[type="password"]{
letter-spacing:2px;
}
.form input[type="password"]::placeholder{
letter-spacing:0;
}
.form input:valid:not(:placeholder-shown){
border-color:rgba(52,211,153,.3);
}
.form input:invalid:not(:placeholder-shown){
border-color:rgba(248,113,113,.45);
}
.form button{
position:relative;
overflow:hidden;
width:100%;
height:58px;
margin-top:8px;
border:0;
border-radius:14px;
background:linear-gradient(135deg,#6366f1,#7c3aed);
color:#fff;
font-family:"Poppins",sans-serif;
font-size:.95rem;
font-weight:600;
letter-spacing:.2px;
cursor:pointer;
box-shadow:0 12px 30px rgba(99,102,241,.25);
transition:all .25s ease;
}
.form button::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2) 50%,transparent 80%);
transform:translateX(-100%);
transition:transform .6s ease;
}
.form button:hover::before{
transform:translateX(100%);
}
.form button:hover{
transform:translateY(-2px);
background:linear-gradient(135deg,#818cf8,#8b5cf6);
box-shadow:0 16px 35px rgba(99,102,241,.35);
}
.form button:active{
transform:translateY(0);
box-shadow:0 8px 20px rgba(99,102,241,.25);
}
.form button:focus-visible{
outline:3px solid rgba(129,140,248,.3);
outline-offset:3px;
}
/*  */
.success,
.error {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    margin: 0 0 20px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: messageFadeIn 0.3s ease;
}

.success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.4);
    color: #6ee7b7;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.08);
}

.error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fca5a5;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.08);
}

.success::before {
    content: "✓";
    margin-right: 8px;
    font-weight: 700;
}

.error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}

@keyframes messageFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*  */
@keyframes moveBlob1{
0%{
transform:translate(0,0) scale(1);
}
50%{
transform:translate(180px,120px) scale(1.15);
}
100%{
transform:translate(80px,280px) scale(.9);
}
}
@keyframes moveBlob2{
0%{
transform:translate(0,0) scale(1);
}
50%{
transform:translate(-160px,-120px) scale(1.2);
}
100%{
transform:translate(-80px,-250px) scale(.9);
}
}
@keyframes moveBlob3{
0%{
transform:translate(0,0) scale(1);
}
50%{
transform:translate(-120px,100px) scale(1.15);
}
100%{
transform:translate(100px,-80px) scale(.85);
}
}
@keyframes moveBlob4{
0%{
transform:translate(0,0);
}
100%{
transform:translate(-180px,180px) scale(1.2);
}
}
@keyframes moveBlob5{
0%{
transform:translate(0,0);
}
100%{
transform:translate(180px,-150px) scale(1.15);
}
}
@keyframes gridMove{
0%{
transform:perspective(500px) rotateX(55deg) scale(1.5) translateY(0);
}
100%{
transform:perspective(500px) rotateX(55deg) scale(1.5) translateY(50px);
}
}

.top-section,
.contact-container{
position:relative;
z-index:1;
}

.background-orbs{
position:fixed;
inset:0;
z-index:0;
overflow:hidden;
pointer-events:none;
}
.orb{
position:absolute;
border-radius:50%;
filter:blur(45px);
opacity:.55;
}
.orb-1{
width:350px;
height:350px;
top:15%;
left:20%;
background:radial-gradient(circle,rgba(116,26,250,.8),transparent 70%);
animation:orb1 12s ease-in-out infinite alternate;
}
.orb-2{
width:280px;
height:280px;
top:40%;
right:15%;
background:radial-gradient(circle,rgba(59,130,246,.7),transparent 70%);
animation:orb2 10s ease-in-out infinite alternate;
}
.orb-3{
width:220px;
height:220px;
bottom:20%;
left:10%;
background:radial-gradient(circle,rgba(168,85,247,.65),transparent 70%);
animation:orb3 14s ease-in-out infinite alternate;
}
.orb-4{
width:300px;
height:300px;
top:5%;
right:25%;
background:radial-gradient(circle,rgba(34,211,238,.5),transparent 70%);
animation:orb4 11s ease-in-out infinite alternate;
}
.orb-5{
width:180px;
height:180px;
bottom:10%;
right:35%;
background:radial-gradient(circle,rgba(99,102,241,.7),transparent 70%);
animation:orb5 9s ease-in-out infinite alternate;
}
.orb-6{
width:150px;
height:150px;
top:55%;
left:40%;
background:radial-gradient(circle,rgba(217,70,239,.55),transparent 70%);
animation:orb6 13s ease-in-out infinite alternate;
}
@keyframes orb1{
0%{
transform:translate(0,0) scale(1);
}
100%{
transform:translate(180px,-100px) scale(1.3);
}
}
@keyframes orb2{
0%{
transform:translate(0,0) scale(1);
}
100%{
transform:translate(-150px,120px) scale(.8);
}
}
@keyframes orb3{
0%{
transform:translate(0,0) scale(1);
}
100%{
transform:translate(200px,-120px) scale(1.25);
}
}
@keyframes orb4{
0%{
transform:translate(0,0) scale(1);
}
100%{
transform:translate(-200px,180px) scale(.85);
}
}
@keyframes orb5{
0%{
transform:translate(0,0) scale(.9);
}
100%{
transform:translate(140px,-180px) scale(1.2);
}
}
@keyframes orb6{
0%{
transform:translate(0,0) scale(1);
}
100%{
transform:translate(-160px,100px) scale(1.3);
}
}
@media(max-width:768px){
.orb-1{
width:280px;
height:280px;
}
.orb-2{
width:230px;
height:230px;
}
.orb-3{
width:180px;
height:180px;
}
.orb-4{
width:240px;
height:240px;
}
.orb-5{
width:150px;
height:150px;
}
.orb-6{
width:120px;
height:120px;
}
}
@media(prefers-reduced-motion:reduce){
.orb{
animation:none;
}
}

@media(max-width:700px){
body::before{
width:450px;
height:450px;
}
body::after{
width:400px;
height:400px;
}
.hero{
padding:70px 20px 80px;
}
.contact-container{
padding:50px 16px 80px;
}
.form{
padding:30px 22px;
border-radius:20px;
}
.form input{
height:55px;
font-size:.9rem;
}
.form button{
height:55px;
}
}
@media(max-width:480px){
body::before{
width:350px;
height:350px;
top:-180px;
left:-180px;
}
body::after{
width:350px;
height:350px;
right:-180px;
bottom:-180px;
}
.form{
padding:24px 16px;
border-radius:18px;
}
.form form{
gap:14px;
}
.form input{
height:53px;
padding:0 15px;
border-radius:12px;
}
.form button{
height:53px;
border-radius:12px;
margin-top:5px;
}
.hero{
padding:55px 16px 65px;
}
.contact-container{
padding:35px 12px 60px;
}
}
@media(prefers-reduced-motion:reduce){
body::before,body::after,.top-section::before,.top-section::after,.contact-container::before,.contact-container::after{
animation:none;
}
}