:root{
--bg-0:#07112a;
--bg-1:#0b2a44;

--card:#0f2938;

--primary:#00d4ff;
--accent:#ffd166;

--muted:#c3d7e0;

--glass:rgba(255,255,255,.04);

--container-width:1200px;

--glow:0 8px 30px rgba(0,212,255,.15);

color-scheme:dark;

}

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

html{
scroll-behavior:smooth;
}

body{
font-family:Inter,system-ui,sans-serif;

background:
linear-gradient(
    180deg,
    var(--bg-0) 0%,
    var(--bg-1) 100%
);

color:#eaf6fb;

min-height:100vh;

overflow-x:hidden;

padding-top:90px;

}

.container{
width:min(
var(--container-width),
calc(100% - 2rem)
);

margin:auto;

}

/* ==========================
HEADER
========================== */

.site-header{
position:fixed;

top:0;
left:0;
right:0;

width:100%;

z-index:9999;

backdrop-filter:blur(12px);

background:
rgba(7,17,42,.95);

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

}

.header-inner{
height:90px;

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

}

.brand{
color:var(--accent);

text-decoration:none;

font-size:1.4rem;

font-weight:800;

letter-spacing:1px;

}

.nav{
display:flex;
align-items:center;
gap:1.5rem;

position:relative;

}

.nav a{
color:var(--muted);

text-decoration:none;

transition:.3s;

}

.nav a:hover{
color:var(--primary);
}

.nav-underline{
position:absolute;

bottom:-8px;

left:0;

height:3px;

width:0;

background:
linear-gradient(
    90deg,
    var(--primary),
    var(--accent)
);

border-radius:999px;

transition:.3s;

}

.nav-toggle{
display:none;

background:none;

border:none;

color:white;

font-size:1.8rem;

cursor:pointer;

}

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

.hero{
position:relative;
min-height:90vh;

display:flex;
align-items:center;

overflow:hidden;

}

.hero-inner{
display:grid;

grid-template-columns:
1fr 400px;

gap:3rem;

align-items:center;

position:relative;

z-index:2;

}

.hero-text h1{
font-size:3rem;

margin-bottom:1rem;

}

.lead{
color:var(--muted);

line-height:1.8;

max-width:650px;

}

.cta-row{
display:flex;

flex-wrap:wrap;

gap:1rem;

margin-top:2rem;

}

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

.btn{
padding:.9rem 1.4rem;
border-radius:12px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn.primary{
background:
linear-gradient(
90deg,
var(--primary),
#66ecff
);

color:#00151d;

box-shadow:var(--glow);

}

.btn.primary:hover{
transform:translateY(-3px);
}

.btn.ghost{
border:
1px solid rgba(255,255,255,.1);

color:white;

}

.btn.ghost:hover{
border-color:var(--primary);
}

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

.hero-card{
background:
rgba(255,255,255,.04);

backdrop-filter:blur(12px);

border-radius:20px;

padding:2rem;

text-align:center;

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

}

.profile-image{
width:220px;
height:220px;

border-radius:50%;

object-fit:cover;

margin:auto;

display:block;

border:4px solid var(--primary);

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

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

}

@keyframes floatProfile{

0%{
    transform:translateY(0);
}

50%{
    transform:translateY(-12px);
}

100%{
    transform:translateY(0);
}

}

.hero-card h3{
margin-top:1.5rem;
}

.card-inner{
margin-top:1.5rem;
}

.card-inner ul{
list-style:none;
}

.card-inner li{
margin:.8rem 0;
}

/* ==========================
DROP ZONE
========================== */

.drop-zone{
position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:1;

}

.ball{
position:absolute;

border-radius:50%;

cursor:pointer;

pointer-events:auto;

top:-150px;

box-shadow:
0 10px 25px rgba(0,0,0,.4);

}

.ball::before{
content:"";

position:absolute;

inset:0;

border-radius:50%;

background:
radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,.8),
    rgba(255,255,255,.05) 25%
),
linear-gradient(
    180deg,
    var(--primary),
    var(--accent)
);

}

@keyframes dropAnim{
to{
transform:
translateY(var(--drop-y));
}
}

@keyframes bounceAnim{

0%{
    transform:
    translateY(var(--drop-y));
}

25%{
    transform:
    translateY(
        calc(var(--drop-y) - 220px)
    );
}

50%{
    transform:
    translateY(var(--drop-y));
}

70%{
    transform:
    translateY(
        calc(var(--drop-y) - 100px)
    );
}

100%{
    transform:
    translateY(var(--drop-y));
}

}

.ball.bounce{
animation:
bounceAnim .9s ease-in-out forwards;
}

/* ==========================
SECTIONS
========================== */

.section{
padding:6rem 0;
}

.section h2{
margin-bottom:2rem;


font-size:2rem;


}

.skills-grid{
display:grid;


grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:1.5rem;


}

.skill-card,
.project{
background:
rgba(255,255,255,.04);


backdrop-filter:blur(10px);

border-radius:16px;

padding:1.5rem;

transition:.35s;


}

.skill-card:hover,
.project:hover{
transform:
translateY(-8px);


box-shadow:
0 20px 40px rgba(0,212,255,.15);


}

.project-list{
display:grid;


grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:1.5rem;


}

/* ==========================
CONTACT
========================== */

.contact-grid{
display:grid;


grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:1rem;


}

.contact-card{
text-decoration:none;


color:white;

text-align:center;

padding:1rem;

border-radius:12px;

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

transition:.3s;


}

.contact-card:hover{
transform:
translateY(-5px);


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


}

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

.site-footer{
border-top:
1px solid rgba(255,255,255,.08);

padding:2rem;

text-align:center;

}

.footer-links{
display:flex;


justify-content:center;

flex-wrap:wrap;

gap:1rem;

margin-bottom:1rem;

}

.footer-links a{
text-decoration:none;


color:var(--muted);

padding:.7rem 1rem;

border-radius:10px;

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

transition:.3s;


}

.footer-links a:hover{
color:var(--primary);


transform:
translateY(-3px);

}

/* ==========================
REVEAL
========================== */

.reveal{
opacity:0;


transform:
translateY(20px);

transition:
opacity .7s ease,
transform .7s ease;

}

.reveal.inview{
opacity:1;


transform:
translateY(0);

}

/* ==========================
MOBILE
========================== */

@media(max-width:900px){


.hero-inner{
    grid-template-columns:1fr;
}

.hero-card{
    order:-1;
}

.nav{
    display:none;
}

.nav-toggle{
    display:block;
}

.nav.mobile-open{
    display:flex;

    flex-direction:column;

    position:absolute;

    top:90px;

    right:20px;

    background:
    rgba(7,17,42,.98);

    padding:1rem;

    border-radius:12px;
}

}

@media(max-width:600px){


.hero-text h1{
    font-size:2rem;
}

.profile-image{
    width:160px;
    height:160px;
}

.section{
    padding:4rem 0;
}

}