:root{

--bg:#050816;
--card:rgba(255,255,255,.08);

--border:rgba(255,255,255,.12);

--text:#ffffff;

--muted:#9ba7c2;

--cyan:#49f6ff;

--purple:#7b61ff;

--blue:#2d8cff;

--radius:28px;

}

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

html,
body{

height:100%;

overflow:hidden;

font-family:'Space Grotesk',sans-serif;

background:var(--bg);

color:var(--text);

}

body{

display:flex;

align-items:center;

justify-content:center;

position:relative;

}

.background{

position:fixed;

inset:0;

overflow:hidden;

z-index:-2;

background:
radial-gradient(circle at top,#0e1637,#050816 65%);

}

.gradient{

position:absolute;

width:650px;

height:650px;

border-radius:50%;

filter:blur(140px);

opacity:.35;

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

}

.gradient1{

background:#5f4cff;

top:-220px;

left:-120px;

}

.gradient2{

background:#0adfff;

right:-150px;

bottom:-220px;

animation-delay:5s;

}

@keyframes float{

0%{
transform:translateY(0) scale(1);
}

50%{
transform:translateY(50px) scale(1.15);
}

100%{
transform:translateY(0) scale(1);
}

}

#stars{

position:absolute;

inset:0;

width:100%;

height:100%;

}

.grid{

position:absolute;

left:-20%;

right:-20%;

bottom:-35%;

height:90%;

background-image:

linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);

background-size:60px 60px;

transform:

perspective(1000px)

rotateX(78deg)

scale(1.6);

mask-image:linear-gradient(to top,black,transparent);

opacity:.28;

animation:gridMove 18s linear infinite;

}

@keyframes gridMove{

from{

background-position:0 0;

}

to{

background-position:0 60px;

}

}

.hero{

width:100%;

padding:40px;

display:flex;

justify-content:center;

align-items:center;

}

.glass{

width:min(760px,92vw);

padding:60px;

border-radius:var(--radius);

background:var(--card);

backdrop-filter:blur(28px);

border:1px solid var(--border);

box-shadow:

0 30px 80px rgba(0,0,0,.45),

0 0 80px rgba(73,246,255,.06);

text-align:center;

position:relative;

overflow:hidden;

}

.glass::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:

radial-gradient(circle,

rgba(73,246,255,.10),

transparent 70%);

left:-180px;

top:-220px;

pointer-events:none;

}

.glass::after{

content:"";

position:absolute;

width:420px;

height:420px;

background:

radial-gradient(circle,

rgba(123,97,255,.10),

transparent 70%);

right:-180px;

bottom:-180px;

pointer-events:none;

}

.badge{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    background:rgba(255,255,255,.05);
    color:#d7e3ff;
    font-size:.9rem;
    margin-bottom:32px;
}

.pulse{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 16px var(--cyan);
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{
        transform:scale(.9);
        opacity:1;
    }
    70%{
        transform:scale(2);
        opacity:0;
    }
    100%{
        transform:scale(.9);
        opacity:0;
    }
}

h1{

font-size:clamp(3rem,8vw,5.6rem);

font-weight:700;

line-height:1;

letter-spacing:-3px;

margin-bottom:18px;

}

h1 span{

display:inline-block;

}

.accent{

background:linear-gradient(90deg,var(--cyan),#ffffff,var(--purple));

background-size:250%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:gradientText 8s linear infinite;

}

@keyframes gradientText{

0%{
background-position:0%;
}

100%{
background-position:250%;
}

}

h2{

font-size:1.25rem;

font-weight:400;

color:#b8c8e7;

margin-bottom:28px;

letter-spacing:2px;

text-transform:uppercase;

}

p{

max-width:620px;

margin:auto;

line-height:1.8;

color:var(--muted);

font-size:1rem;

}

.offer{

margin-top:42px;

padding:22px;

border-radius:18px;

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

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

}

.offer-title{

font-size:.8rem;

letter-spacing:2px;

text-transform:uppercase;

color:#7f8ca8;

margin-bottom:10px;

}

.offer-status{

font-size:1.15rem;

font-weight:600;

color:var(--cyan);

}

.dots::after{

content:"";

animation:dots 1.6s infinite;

}

@keyframes dots{

0%{
content:"";
}

25%{
content:".";
}

50%{
content:"..";
}

75%{
content:"...";
}

100%{
content:"";
}

}

.price{

display:flex;

justify-content:space-between;

align-items:center;

margin:34px 0;

padding:18px 24px;

border-radius:16px;

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

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

}

.price strong{

font-size:1.6rem;

font-weight:700;

background:linear-gradient(90deg,var(--cyan),var(--purple));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.button{

display:inline-flex;

align-items:center;

gap:12px;

padding:18px 36px;

border-radius:999px;

text-decoration:none;

color:#fff;

font-weight:600;

background:linear-gradient(135deg,var(--blue),var(--purple));

transition:.35s;

box-shadow:

0 0 40px rgba(75,120,255,.30);

}

.button:hover{

transform:translateY(-6px);

box-shadow:

0 0 70px rgba(75,120,255,.55);

}

.button svg{

transition:.35s;

}

.button:hover svg{

transform:translateX(6px);

}

.mail{

margin-top:28px;

color:#8b97b8;

letter-spacing:2px;

font-size:.95rem;

}

#cursorGlow{

position:fixed;

width:340px;

height:340px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,
rgba(73,246,255,.16),
transparent 70%);

filter:blur(45px);

transform:translate(-50%,-50%);

z-index:-1;

}

@media(max-width:900px){

.glass{

padding:38px;

}

h1{

font-size:3.2rem;

}

.price{

flex-direction:column;

gap:14px;

}

}

@media(max-width:600px){

.hero{

padding:18px;

}

.glass{

padding:28px;

border-radius:22px;

}

h1{

font-size:2.5rem;

letter-spacing:-1px;

}

h2{

font-size:1rem;

}

p{

font-size:.92rem;

}

.button{

width:100%;

justify-content:center;

}

}