*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Cairo',sans-serif;
}

body{

background:
radial-gradient(circle at top,
#f6f2ff 0%,
#dfe7ff 45%,
#c7d8ff 100%);

min-height:100vh;

overflow-x:hidden;

position:relative;

color:#111;

}

/* BG */

.bg{

position:fixed;

inset:0;

background:
url('https://www.transparenttextures.com/patterns/cubes.png');

opacity:.06;

pointer-events:none;

}

/* TOPBAR */

.topbar{

display:flex;

align-items:center;

justify-content:space-between;

padding:20px 30px;

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

backdrop-filter:blur(18px);

border-bottom:
1px solid rgba(255,255,255,.6);

position:sticky;

top:0;

z-index:999;

}

.logo{

font-size:38px;

font-weight:900;

background:
linear-gradient(
90deg,
#6f4cff,
#9f6bff,
#38a7ff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.nav{

display:flex;

gap:12px;

}

.nav a{

text-decoration:none;

padding:10px 18px;

border-radius:16px;

font-size:14px;

font-weight:bold;

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

color:#333;

transition:.25s;

}

.nav a:hover{

background:
linear-gradient(
135deg,
#7a5cff,
#329dff
);

color:#fff;

}

/* WRAPPER */

.wrapper{

max-width:1450px;

margin:auto;

padding:28px;

display:grid;

grid-template-columns:
1fr 420px;

gap:28px;

align-items:start;

}

/* EDITOR */

.editor-box{

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

backdrop-filter:blur(20px);

border-radius:34px;

padding:30px;

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

box-shadow:
0 0 30px rgba(120,80,255,.08);

}

.title{

font-size:38px;

font-weight:900;

margin-bottom:10px;

background:
linear-gradient(
90deg,
#6f4cff,
#38a7ff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.sub{

font-size:14px;

color:#666;

margin-bottom:24px;

}

/* UPLOAD */

.upload-area{

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

margin-bottom:24px;

position:relative;

}

.upload-area img{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

border:4px solid rgba(255,255,255,.8);

box-shadow:
0 0 25px rgba(120,80,255,.18);

margin-bottom:14px;

}

.upload-area input{

max-width:260px;

}

/* INPUTS */

input,
textarea{

width:100%;

border:none;

outline:none;

padding:18px;

border-radius:22px;

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

margin-bottom:18px;

font-size:15px;

box-shadow:
inset 0 0 15px rgba(120,80,255,.05);

}

textarea{

height:150px;

resize:none;

line-height:2;

}

/* LINKS */

.links-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

}

/* BUTTONS */

.btns{

display:grid;

grid-template-columns:
1fr 1fr;

gap:14px;

margin-top:20px;

}

.main-btn{

height:60px;

border:none;

border-radius:22px;

cursor:pointer;

font-size:18px;

font-weight:900;

transition:.25s;

}

.generate{

background:
linear-gradient(
135deg,
#7a5cff,
#329dff
);

color:#fff;

box-shadow:
0 0 22px rgba(120,80,255,.22);

}

.theme{

background:
linear-gradient(
135deg,
#ff6b9d,
#9d7bff
);

color:#fff;

}

.main-btn:hover{

transform:translateY(-3px);

}

/* PREVIEW */

.preview-box{

position:sticky;

top:110px;

}

.phone-frame{

background:#111;

border-radius:42px;

padding:14px;

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

}

.bio-card{

min-height:760px;

border-radius:30px;

padding:34px 24px;

background:
linear-gradient(
180deg,
#ffffff,
#eef2ff
);

display:flex;

flex-direction:column;

align-items:center;

position:relative;

overflow:hidden;

}

/* AVATAR */

.avatar{

width:140px;

height:140px;

border-radius:50%;

object-fit:cover;

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

box-shadow:
0 0 35px rgba(120,80,255,.18);

margin-bottom:18px;

}

/* NAME */

.card-name{

font-size:32px;

font-weight:900;

margin-bottom:12px;

color:#222;

text-align:center;

}

/* BIO */

.card-bio{

font-size:15px;

line-height:2;

text-align:center;

color:#666;

margin-bottom:28px;

}

/* LINKS */

.card-links{

width:100%;

display:flex;

flex-direction:column;

gap:16px;

}

.bio-link{

height:62px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:17px;

font-weight:900;

color:#fff;

background:
linear-gradient(
135deg,
#7a5cff,
#329dff
);

box-shadow:
0 0 20px rgba(120,80,255,.18);

transition:.25s;

}

.bio-link:hover{

transform:translateY(-3px);

}

/* MOBILE */

@media(max-width:1100px){

.wrapper{

grid-template-columns:1fr;

}

.preview-box{

position:relative;

top:0;

}

}

@media(max-width:768px){

.topbar{

flex-direction:column;

gap:15px;

}

.logo{

font-size:30px;

}

.links-grid,
.btns{

grid-template-columns:1fr;

}

.title{

font-size:30px;

}

}