:root{

--primary:#8ab4f8;
--secondary:#7c8cff;
--surface:rgba(255,255,255,.08);
--border:rgba(255,255,255,.12);
--text:white;
--text2:#d9d9d9;

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,Segoe UI,Arial,sans-serif;

}

body{

height:100vh;
overflow:hidden;

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

background:#0b1220;

color:white;

}

/* Aurora */

.background{

position:fixed;
inset:0;
overflow:hidden;

background:
linear-gradient(135deg,#08111f,#111b33,#152857);

animation:bg 18s linear infinite;

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.55;

animation:float 16s ease-in-out infinite;

}

.blob1{

width:450px;
height:450px;

background:#3b82f6;

top:-120px;
left:-120px;

}

.blob2{

width:420px;
height:420px;

background:#7c3aed;

bottom:-150px;
right:-100px;

animation-delay:3s;

}

.blob3{

width:320px;
height:320px;

background:#06b6d4;

top:50%;
left:55%;

animation-delay:6s;

}

/* Card */

.card{

position:relative;

width:min(92%,650px);

padding:60px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(22px);

border-radius:32px;

text-align:center;

box-shadow:
0 20px 60px rgba(0,0,0,.35);

animation:appear .9s ease;

}

/* Logo */

.logo{

width:120px;

margin-bottom:28px;

animation:floatLogo 5s ease-in-out infinite;

}

/* Text */

h1{

font-size:3rem;

font-weight:700;

margin-bottom:10px;

}

h2{

font-size:1.35rem;

font-weight:500;

color:var(--primary);

margin-bottom:28px;

}

p{

line-height:1.8;

color:var(--text2);

margin-bottom:42px;

}

/* Buttons */

.buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.buttons a{

text-decoration:none;

padding:14px 28px;

border-radius:999px;

color:white;

font-weight:600;

transition:.35s;

position:relative;

overflow:hidden;

background:linear-gradient(135deg,#3b82f6,#7c3aed);

box-shadow:
0 10px 30px rgba(59,130,246,.35);

}

.buttons a::before{

content:"";

position:absolute;

width:120%;

height:100%;

left:-120%;

top:0;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transition:.7s;

}

.buttons a:hover::before{

left:120%;

}

.buttons a:hover{

transform:

translateY(-4px)

scale(1.04);

box-shadow:

0 15px 40px

rgba(124,58,237,.45);

}

/* Animations */

@keyframes float{

0%,100%{

transform:translate(0,0);

}

50%{

transform:translate(50px,-40px);

}

}

@keyframes floatLogo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes appear{

from{

opacity:0;

transform:

translateY(40px)

scale(.96);

}

to{

opacity:1;

transform:

translateY(0)

scale(1);

}

}

@keyframes bg{

0%{

filter:hue-rotate(0deg);

}

100%{

filter:hue-rotate(360deg);

}

}

/* Mobile */

@media(max-width:700px){

.card{

padding:40px 28px;

}

h1{

font-size:2.2rem;

}

h2{

font-size:1.15rem;

}

.logo{

width:90px;

}

}