/* ===================================
   ROOT
=================================== */

:root{

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

--text:#ffffff;
--sub:#c8d0dc;

--pink:#ff2d75;
--purple:#8b5cf6;
--blue:#38bdf8;

--wa:#25D366;
--telegram:#229ED9;
--tinder1:#ff0050;
--tinder2:#ff7b00;

}

/* ===================================
RESET
=================================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:var(--bg);

color:white;

min-height:100vh;

overflow-x:hidden;

display:flex;

justify-content:center;

align-items:center;

padding:30px;

position:relative;

}

/* ===================================
BACKGROUND
=================================== */

.background{

position:fixed;

inset:0;

background:

linear-gradient(180deg,#070b18,#10182c);

z-index:-5;

}

/* Blur Aurora */

.blur{

position:fixed;

border-radius:50%;

filter:blur(120px);

opacity:.45;

animation:float 15s infinite alternate ease-in-out;

z-index:-4;

}

.blur1{

width:300px;
height:300px;

background:#ff2d75;

top:-80px;
left:-80px;

}

.blur2{

width:350px;
height:350px;

background:#7c3aed;

right:-100px;
top:30%;

}

.blur3{

width:300px;
height:300px;

background:#00c6ff;

bottom:-100px;
left:30%;

}

/* ===================================
HERO
=================================== */

.hero{

width:100%;

max-width:470px;

text-align:center;

}

/* ===================================
STATUS
=================================== */

.status{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 18px;

border-radius:50px;

background:rgba(0,255,120,.12);

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

margin-bottom:28px;

font-size:13px;

}

.status-dot{

width:10px;
height:10px;

border-radius:50%;

background:#00ff73;

animation:pulse 1.5s infinite;

}

/* ===================================
PROFILE
=================================== */

.profile-box{

display:flex;

justify-content:center;

margin-bottom:25px;

}

#profileImage{

width:180px;

height:180px;

border-radius:50%;

object-fit:cover;

border:5px solid rgba(255,255,255,.9);

box-shadow:

0 0 25px rgba(255,45,117,.45),

0 0 60px rgba(255,45,117,.2);

transition:.35s;

}

#profileImage:hover{

transform:scale(1.05);

}

/* ===================================
TEXT
=================================== */

h1{

font-size:33px;

margin-bottom:10px;

}

#profileLocation{

font-size:16px;

color:#ffbdd4;

margin-bottom:18px;

}

#profileBio{

color:var(--sub);

line-height:1.8;

margin-bottom:35px;

}

/* ===================================
PROGRESS
=================================== */

.progress{

height:8px;

border-radius:30px;

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

overflow:hidden;

margin-bottom:18px;

}

#progressBar{

width:0;

height:100%;

background:

linear-gradient(

90deg,

var(--pink),

var(--purple),

var(--blue)

);

}

/* ===================================
COUNTDOWN
=================================== */

.countdown{

font-size:15px;

color:var(--sub);

margin-bottom:35px;

}

#timer{

font-weight:700;

color:white;

}

/* ===================================
BUTTONS
=================================== */

.buttons{

display:flex;

flex-direction:column;

gap:18px;

}

.button{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

padding:18px;

border-radius:18px;

text-decoration:none;

color:white;

font-weight:600;

font-size:17px;

transition:.3s;

}

.button:hover{

transform:translateY(-3px);

}

.whatsapp{

background:var(--wa);

}

.telegram{

background:var(--telegram);

}

.tinder{

background:

linear-gradient(

90deg,

var(--tinder1),

var(--tinder2)

);

}

/* ===================================
FOOTER
=================================== */

footer{

margin-top:35px;

font-size:13px;

color:#98a5b9;

}

/* ===================================
ANIMATION
=================================== */

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(0,255,100,.7);

}

100%{

box-shadow:0 0 0 15px rgba(0,255,100,0);

}

}

@keyframes float{

0%{

transform:translateY(0);

}

100%{

transform:translateY(50px);

}

}

/* ===================================
RESPONSIVE
=================================== */

@media(max-width:480px){

body{

padding:20px;

}

#profileImage{

width:150px;
height:150px;

}

h1{

font-size:28px;

}

.button{

font-size:16px;

padding:16px;

}

}