*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

body{
background:#0f172a;
color:#fff;
overflow-x:hidden;
line-height:1.3;
}

.navbar{
position:fixed;
top:0;
width:100%;
height:60px;
background:#111c34;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 15px;
z-index:1000;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.logo{
font-weight:800;
font-size:20px;
background:linear-gradient(45deg,#38bdf8,#9333ea,#06b6d4,#f472b6);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.burger{
font-size:22px;
cursor:pointer;
color:#38bdf8;
}

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:998;
}

.overlay.active{
opacity:1;
visibility:visible;
}

.menu{
position:fixed;
top:0;
right:-100%;
width:55%;
height:100%;
background:#0f172a;
transition:0.4s ease;
padding-top:80px;
display:flex;
flex-direction:column;
align-items:center;
gap:25px;
z-index:999;
}

.menu.active{
right:0;
}

.menu a{
text-decoration:none;
font-size:18px;
font-weight:700;
display:flex;
align-items:center;
gap:8px;
background:linear-gradient(90deg,#38bdf8,#9333ea,#06b6d4,#facc15);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.exit-btn{
position:absolute;
top:20px;
left:20px;
background:#38bdf8;
color:#0f172a;
border:none;
padding:6px 14px;
border-radius:20px;
cursor:pointer;
font-size:14px;
font-weight:600;
}

.cover{
width:100%;
height:180px;
background:url('https://media2.giphy.com/media/v1.Y2lkPTZjMDliOTUyeDJlaXg1YTBkczJtY256a24wYnVuOW80Y3VvZXFwdGNmdzV5OGY3MyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/gH1jGsCnQBiFHWMFzh/giphy.gif') center/cover no-repeat;
margin-top:60px;
border-bottom:3px solid rgba(255,255,255,0.1);
}

.profile-section{
text-align:center;
margin-top:-60px;
position:relative;
z-index:10;
}

.profile-wrapper{
position:relative;
width:130px;
height:130px;
margin:auto;
}

.profile-wrapper::before{
content:"";
position:absolute;
inset:-5px;
border-radius:50%;
background:conic-gradient(#38bdf8,#9333ea,#06b6d4,#3b82f6,#f472b6,#38bdf8);
animation:spin 4s linear infinite;
}

.profile-wrapper img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
position:relative;
z-index:1;
border:4px solid #0f172a;
}

@keyframes spin{
100%{transform:rotate(360deg);}
}

.animated-text{
margin-top:10px;
font-size:22px;
font-weight:800;
background:linear-gradient(90deg,#38bdf8,#9333ea,#06b6d4,#f472b6,#facc15);
background-size:400%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:gradientMove 5s infinite linear;
min-height:28px;
}

@keyframes gradientMove{
0%{background-position:0%;}
100%{background-position:400%;}
}

.cursor{
display:inline-block;
width:2px;
background:#38bdf8;
margin-left:5px;
animation:blink 0.7s infinite;
}

@keyframes blink{
50%{opacity:0;}
}

section{
padding:25px 6%;
text-align:center;
opacity:0;
transform:translateY(30px);
transition:0.8s;
}

section.show{
opacity:1;
transform:translateY(0);
}

h2{
font-size:22px;
margin-bottom:12px;
font-weight:700;
background:linear-gradient(45deg,#38bdf8,#9333ea,#06b6d4,#f472b6);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.about p{
max-width:600px;
margin:auto;
font-weight:600;
font-size:14px;
background:linear-gradient(90deg,#38bdf8,#9333ea,#06b6d4,#f472b6,#facc15);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.skills-grid,
.projects-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
margin-top:15px;
}
/* PROJECTS */
#projects {
  padding: 80px 20px;
  text-align: center;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.project-card {
  background: rgba(255,255,255,0.05);
  border-radius: 18px;
  padding: 30px 20px;
  backdrop-filter: blur(12px);
  transition: 0.35s;
  border: 1px solid rgba(255,255,255,0.08);
}

.project-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.project-icon {
  font-size: 40px;
  margin-bottom: 15px;
  color: #7c5cff;
}

.project-card h3 {
  margin-bottom: 10px;
}

.project-card p {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 20px;
}

.project-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.live-btn,
.code-btn {
  padding: 8px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.25s;
}

.live-btn {
  background: linear-gradient(45deg,#7c5cff,#00d4ff);
  color: white;
}

.code-btn {
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
}

.live-btn:hover {
  transform: scale(1.05);
}

.code-btn:hover {
  background: rgba(255,255,255,0.1);
}

.skill-box,
.project-box{
background:#1e293b;
padding:12px 16px;
border-radius:10px;
transition:0.3s;
display:flex;
align-items:center;
gap:8px;
font-size:14px;
font-weight:700;
}

.project-box{
flex-direction:column;
align-items:flex-start;
width:220px;
}

.skill-box:hover,
.project-box:hover{
background:#233554;
}

.skill-box i,
.project-box i{
color:#38bdf8;
}

.skill-box a,
.project-box a{
text-decoration:none;
color:#fff;
font-weight:700;
}

.skill-box a:hover,
.project-box a:hover{
color:#38bdf8;
}

.message a{
display:inline-block;
margin-top:10px;
font-size:16px;
color:#fff;
background:#9333ea;
padding:8px 20px;
border-radius:25px;
text-decoration:none;
font-weight:700;
transition:0.3s;
}

.message a:hover{
background:#38bdf8;
}

@media(max-width:768px){
.menu{width:75%;}
.project-box{width:90%;}
}

/* MESSAGE SECTION */
.message {
  padding: 80px 20px;
  text-align: center;
}

.message-card {
  max-width: 500px;
  margin: 40px auto 0;
  padding: 35px 25px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  transition: 0.35s;
}

.message-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.message-text {
  opacity: 0.85;
  margin-bottom: 25px;
  line-height: 1.6;
}

.message-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.msg-btn {
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.25s;
  color: white;
}

.msg-btn.telegram {
  background: linear-gradient(45deg,#0088cc,#00d4ff);
}

.msg-btn.email {
  border: 1px solid rgba(255,255,255,0.3);
}

.msg-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}