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

body{
font-family:Inter,sans-serif;
height:100vh;
color:white;
overflow:hidden;
}

.background{

position:fixed;
width:100%;
height:100%;

background:
radial-gradient(circle at 20% 30%, rgba(231,39,18,0.25), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(120,80,255,0.2), transparent 40%),
radial-gradient(circle at 50% 50%, rgba(0,200,255,0.15), transparent 40%),
linear-gradient(120deg,#0F172A,#111827,#020617);

background-size:200% 200%;

animation:auroraMove 18s ease infinite;

z-index:-2;

}

@keyframes auroraMove{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

.grain{

position:fixed;
width:100%;
height:100%;

background-image:url("https://grainy-gradients.vercel.app/noise.svg");

opacity:0.05;

pointer-events:none;

z-index:-1;

}

.page-header{
position:fixed;
top:0;
left:0;
right:0;
padding:20px 40px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:100;
gap:20px;
}

.page-header .logo{
display:flex;
align-items:center;
}

.page-header .logo-img{
height:35px;
width:auto;
}

.page-header .btn-get-started{
display:inline-flex;
align-items:center;
gap:8px;
background:linear-gradient(135deg,#E72712,#FF6B4A);
color:white;
padding:10px 20px;
border-radius:10px;
text-decoration:none;
font-weight:600;
font-size:14px;
transition:all .3s ease;
}

.page-header .btn-get-started:hover{
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(231,39,18,0.4);
}

.wrapper{

height:100vh;
padding-top:80px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:15px;

}

.card{

width:900px;
height:500px;

display:flex;

background:rgba(255,255,255,0.06);

backdrop-filter:blur(25px);

border-radius:24px;

box-shadow:
0 40px 80px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.05);

transition:transform .3s ease;

}

.left{

width:50%;
padding:32px;

display:flex;
flex-direction:column;
justify-content:space-between;

border-radius:24px 0 0 24px;

}

.logo{
display:flex;
align-items:center;
}

.logo-img{
height:70px;
width:auto;
}



.content h2{

font-family:Outfit,sans-serif;
font-size:22px;
margin-bottom:6px;

}

.subtitle{
opacity:.7;
margin-bottom:8px;
font-size:14px;
}

.description{

font-size:13px;
line-height:1.5;
opacity:.75;

}

.notify{

display:flex;
margin-top:16px;
gap:0;

}

.notify input{

flex:1;
padding:10px 14px;

border:none;
outline:none;
background:rgba(255,255,255,0.08);
color:white;
font-family:Inter,sans-serif;
font-size:13px;

border-radius:8px 0 0 8px;
max-width:200px;

}

.notify input::placeholder{
color:rgba(255,255,255,0.4);
}

.notify button{

background:#E72712;
border:none;

padding:10px 20px;

border-radius:0 8px 8px 0;

color:white;
font-family:Inter,sans-serif;
font-size:13px;
font-weight:500;
white-space:nowrap;

cursor:pointer;

transition:all .25s ease;

}

.notify button:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(231,39,18,0.4);

}

.notify-message{

margin-top:8px;
font-size:12px;

}

.footer{
display:flex;
justify-content:space-between;
align-items:center;
}

.contact-icons{

display:flex;
gap:10px;

}

.copyright{
font-size:9px;
font-weight:200;
opacity:.5;
}

.contact-icons a{

font-size:13px;
color:#E72712;

text-decoration:none;

width:32px;
height:32px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(231,39,18,0.15);
transition:all .3s ease;

}

.contact-icons a:hover{
background:rgba(231,39,18,0.3);
transform:translateY(-2px);
}

.right{

width:50%;

display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(160deg,#111827,#1E293B);

border-radius:0 24px 24px 0;

overflow:hidden;

}

.hero-animation{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}

.hero-animation img{
width:100%;
height:100%;
object-fit:cover;
}

@media(max-width:900px){

.page-header{
padding:20px 20px;
}

.page-header .btn-get-started{
padding:10px 18px;
font-size:14px;
}

.wrapper{
padding-top:90px;
padding-bottom:20px;
}

.card{

flex-direction:column;
height:auto;
width:90%;
min-width:280px;
max-width:360px;

}

.left,.right{
width:100%;
}

.left{
border-radius:24px 24px 0 0;
padding:24px 20px;
min-height:380px;
}

.right{
border-radius:0 0 24px 24px;
height:250px;
}

.hero-animation img{
object-fit:cover;
object-position:center;
}

.logo h1{
font-size:20px;
}

.logo-icon{
width:32px;
height:32px;
font-size:16px;
}

.content h2{
font-size:18px;
margin-bottom:6px;
}

.subtitle,.description{
font-size:13px;
}

.subtitle{
margin-bottom:6px;
}

.notify{
flex-direction:column;
gap:10px;
width:100%;
}

.notify input{
width:100%;
border-radius:8px;
padding:12px 14px;
}

.notify button{
width:100%;
border-radius:8px;
padding:12px 14px;
}

.contact-icons{
gap:8px;
}

.contact-icons a{
width:32px;
height:32px;
font-size:12px;
}

.copyright{
font-size:8px;
}

.footer{
flex-direction:column;
gap:10px;
margin-top:15px;
}

}