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



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

body{
background:#05070d;
color:white;
font-family:'Inter',sans-serif;
min-height:100vh;
overflow-x:hidden;
}



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

.spotlight{
position:fixed;
width:1600px;
height:1600px;
top:50%;
left:50%;
transform:translate(-50%,-40%);
background:radial-gradient(circle, rgba(120,140,255,.15), transparent 60%);
filter:blur(140px);
z-index:-2;
}

.noise{
position:fixed;
width:100%;
height:100%;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.25'/%3E%3C/svg%3E");
opacity:.06;
z-index:-1;
pointer-events:none;
}


/* ================= NAVBAR ================= */

.navbar{
position:fixed;
top:0;
width:100%;
z-index:1000;
background:rgba(5,7,13,.55);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(255,255,255,.05);
}

.nav-inner{
max-width:1400px;
margin:auto;
padding:26px 60px;
display:flex;
align-items:center;
}

/* LOGO */

.logo{
font-family:'Cormorant Garamond',serif;
font-size:26px;
letter-spacing:4px;
}
.logo{
text-decoration:none;
color:inherit;
cursor:pointer;
}
.logo:hover{
opacity:.8;
}

/* LINKS */

.links{
display:flex;
gap:48px;
margin-left:auto;
}

.links a{
color:#aab2c0;
text-decoration:none;
font-size:12px;
letter-spacing:.22em;
text-transform:uppercase;
transition:.3s;
}

.links a:hover{
color:white;
}

/* MENU BUTTON */

.menu-btn{
display:none;
font-size:20px;
cursor:pointer;
color:#aab2c0;
margin-left:auto;
}

.menu-btn:hover{
color:white;
}


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

.hero{
min-height:100vh;
min-height:100dvh; /* fixes mobile browser height issues */
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:80px 20px 0; /* space for navbar */
}

.hero-content{
max-width:720px;
}

/* SMALL LABEL */

.hero-label{
font-size:11px;
letter-spacing:.35em;
text-transform:uppercase;
color:#7c86a5;
margin-bottom:28px;
}

/* NAME */

.hero h1{
font-family:'Cormorant Garamond',serif;
font-size:clamp(42px,4vw,58px);
font-weight:500;
letter-spacing:-0.5px;
margin-bottom:6px;
}

/* MAIN STATEMENT */

.hero h2{
font-family:'Cormorant Garamond',serif;
font-size:clamp(48px,6vw,78px);
font-weight:400;
line-height:1.05;
letter-spacing:-1px;
}

.hero h2 span{
color:#8f9bff;
}

/* SUBTEXT */

.hero p{
margin-top:24px;
font-size:16px;
color:#9aa3b2;
line-height:1.8;
}

/* BUTTON */

.hero-btn{
display:inline-block;
margin-top:38px;
padding:12px 30px;
border-radius:40px;
text-decoration:none;
font-size:13px;
letter-spacing:.12em;
text-transform:uppercase;
color:#ffffff;
border:1px solid rgba(255,255,255,.18);
background:transparent;
transition:border-color .3s ease, color .3s ease;
}

.hero-btn:hover{
border-color:#aab4ff;
color:#c7ceff;
}



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


/* ---------- Laptop / Tablet ---------- */

@media (max-width:1024px){

.nav-inner{
padding:22px 40px;
}

.hero-content{
max-width:600px;
}

.hero h2{
font-size:clamp(42px,7vw,64px);
}

}


/* ---------- Tablet / Large Phones ---------- */

@media (max-width:768px){

/* NAV */

.links{
position:fixed;
top:0;
right:-100%;
height:100vh;
width:280px;
background:#05070d;
flex-direction:column;
justify-content:center;
align-items:center;
gap:40px;
transition:.5s cubic-bezier(.16,1,.3,1);
}

.links.active{
right:0;
}

.menu-btn{
display:block;
}

/* HERO */

.hero{
padding:80px 26px 0;
}

.hero-content{
max-width:520px;
}

.hero-label{
font-size:10px;
letter-spacing:.28em;
margin-bottom:22px;
}

.hero h1{
font-size:34px;
}

.hero h2{
font-size:44px;
line-height:1.12;
}

.hero p{
font-size:15px;
margin-top:18px;
}

.hero-btn{
margin-top:26px;
padding:11px 26px;
font-size:12px;
}

}


/* ---------- Small Phones ---------- */

@media (max-width:480px){

.hero h1{
font-size:28px;
}

.hero h2{
font-size:36px;
}

.hero p{
font-size:14px;
}

.hero-btn{
width:100%;
max-width:260px;
}

}

/*about

/* ================= ABOUT ================= */

.about{
padding:90px 20px;
}


.about-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns: 1fr 2fr;
gap:120px;
align-items:start;
}

/* LEFT SIDE */

.section-label{
font-size:12px;
letter-spacing:.35em;
color:#7c86a5;
margin-bottom:18px;
}

.about-left h2{
font-family:'Cormorant Garamond',serif;
font-size:42px;
font-weight:500;
line-height:1.2;
}

/* RIGHT SIDE */

.about-right{
max-width:640px;
}

.about-lead{
font-size:20px;
color:#d6dcff;
margin-bottom:26px;
line-height:1.7;
}

.about-right p{
color:#9aa3b2;
line-height:1.9;
margin-bottom:18px;
}
@media(max-width:1024px){

.about-container{
grid-template-columns:1fr;
gap:60px;
}

.about-left h2{
font-size:34px;
}

}
@media(max-width:768px){

.about{
padding:100px 26px;
}

.about-lead{
font-size:18px;
}

}
.about::before{
content:"";
position:absolute;
top:-120px;
left:0;
width:100%;
height:120px;
background:linear-gradient(to bottom, transparent, #05070d);
pointer-events:none;
}


/* ================= SKILLS ================= */

.skills{
padding:120px 20px;
}

.skills-container{
max-width:1100px;
margin:auto;
}

/* heading */

.skills-header{
margin-bottom:70px;
}

.skills-header .section-label{
margin-bottom:14px;
}

.skills-header h2{
font-family:'Cormorant Garamond',serif;
font-size:46px;
font-weight:500;
}

/* GRID */

.skills-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
}

/* group */

.skill-group h3{
font-size:13px;
letter-spacing:.18em;
text-transform:uppercase;
color:#cfd6ff;
margin-bottom:20px;
}

.skill-group ul{
list-style:none;
}

.skill-group li{
color:#9aa3b2;
margin-bottom:12px;
font-size:16px;
transition:.25s;
}

/* subtle hover = premium */

.skill-group li:hover{
color:#d6dcff;
transform:translateX(4px);
}
@media(max-width:1024px){

.skills-grid{
grid-template-columns:repeat(2,1fr);
gap:40px;
}

}

@media(max-width:768px){

.skills{
padding:90px 26px;
}

.skills-grid{
grid-template-columns:1fr;
}

.skills-header h2{
font-size:38px;
}

}


/* ================= PROJECTS ================= */

.projects{
padding:120px 20px;
}

.projects-container{
max-width:900px;
margin:auto;
}

/* header */

.projects-header{
margin-bottom:80px;
}

.projects-header h2{
font-family:'Cormorant Garamond',serif;
font-size:46px;
font-weight:500;
}

/* project */

.project{
padding:40px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}

.project:last-child{
border:none;
}

/* meta */

.project-meta{
display:flex;
justify-content:space-between;
color:#7c86a5;
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
margin-bottom:14px;
}

/* title */

.project h3{
font-family:'Cormorant Garamond',serif;
font-size:34px;
font-weight:500;
margin-bottom:14px;
}

/* description */

.project p{
color:#9aa3b2;
line-height:1.8;
max-width:640px;
}

/* tech */

.tech-stack{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:18px;
}

.tech-stack span{
border:1px solid rgba(255,255,255,.12);
padding:6px 12px;
border-radius:20px;
font-size:12px;
color:#cfd6ff;
}

/* link */

.project a{
display:inline-block;
margin-top:22px;
text-decoration:none;
color:#aab4ff;
font-size:14px;
transition:.25s;
}

.project a:hover{
color:#d6dcff;
}
@media(max-width:768px){

.projects{
padding:90px 26px;
}

.project h3{
font-size:26px;
}

}

/* ================= CURRENTLY BUILDING ================= */


.system{
padding:140px 20px;
position:relative;
}

.system-container{
max-width:900px;
margin:auto;
}

/* header */

.system-header{
margin-bottom:30px;
}

.system-header h2{
font-family:'Cormorant Garamond',serif;
font-size:52px;
font-weight:500;
letter-spacing:-0.5px;
}

/* status */

.build-status{
color:#7c86a5;
font-size:13px;
margin-top:8px;
letter-spacing:.08em;
}

/* sub */

.system-sub{
margin-top:26px;
font-size:20px;
color:#d6dcff;
line-height:1.7;
max-width:720px;
}

/* description */

.system-desc{
margin-top:18px;
color:#9aa3b2;
line-height:1.9;
max-width:720px;
}


/* highlights */

.system-highlights{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:26px;
}

.system-highlights span{
border:1px solid rgba(255,255,255,.12);
padding:7px 14px;
border-radius:20px;
font-size:12px;
color:#cfd6ff;
transition:.25s;
}

.system-highlights span:hover{
border-color:#8f9bff;
color:#eef1ff;
}


/* links */

.system-links{
display:flex;
gap:30px;
margin-top:34px;
}

.system-links a{
text-decoration:none;
color:#aab4ff;
font-size:14px;
transition:.25s;
}

.system-links a:hover{
color:#d6dcff;
}

.system::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:60%;
height:1px;
background:linear-gradient(to right, transparent, rgba(255,255,255,.08), transparent);
}


/* ================= EXPERIENCE ================= */

.experience{
padding:120px 20px;
}

.experience-container{
max-width:900px;
margin:auto;
}

/* header */

.experience-header{
margin-bottom:70px;
}

.experience-header h2{
font-family:'Cormorant Garamond',serif;
font-size:46px;
font-weight:500;
}

/* item */

.experience-item{
padding:36px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}

/* meta */

.experience-meta{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;

color:#7c86a5;
font-size:13px;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:14px;
}

/* description */

.experience-desc{
color:#cfd6ff;
font-size:18px;
line-height:1.7;
margin-bottom:20px;
max-width:720px;
}

/* bullet points */

.experience-points{
list-style:none;
}

.experience-points li{
color:#9aa3b2;
margin-bottom:12px;
padding-left:18px;
position:relative;
line-height:1.8;
}

.experience-points li::before{
content:"";
width:5px;
height:5px;
background:#8f9bff;
border-radius:50%;

position:absolute;
left:0;
top:10px;
}

/* responsive */

@media(max-width:768px){

.experience{
padding:90px 26px;
}

.experience-header h2{
font-size:38px;
}

.experience-meta{
flex-direction:column;
gap:6px;
}

}
.experience-item{
max-width:900px;
margin:auto;
padding:48px;
border-radius:18px;

background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.05);

backdrop-filter:blur(6px);
}


/* ================= EDUCATION ================= */

.education{
padding:140px 20px;
position:relative;
}

.education-container{
max-width:900px;
margin:auto;
}

/* header */

.education-header{
margin-bottom:70px;
}

.education-header h2{
font-family:'Cormorant Garamond',serif;
font-size:46px;
font-weight:500;
}

/* cards */

.edu-card{
padding:36px;
border-radius:18px;

background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.05);

backdrop-filter:blur(6px);

margin-bottom:24px;

transition:.35s;
}

/* subtle premium hover */

.edu-card:hover{
border-color:rgba(143,155,255,.35);
transform:translateY(-4px);
}

/* top row */

.edu-top{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:8px;

font-size:13px;
letter-spacing:.12em;
text-transform:uppercase;
color:#7c86a5;

margin-bottom:12px;
}

/* degree */

.edu-card h3{
font-size:22px;
font-weight:500;
margin-bottom:8px;
}

/* description */

.edu-card p{
color:#9aa3b2;
line-height:1.8;
max-width:620px;
}

/* divider above section */

.education::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:60%;
height:1px;
background:linear-gradient(to right, transparent, rgba(255,255,255,.08), transparent);
}

/* responsive */

@media(max-width:768px){

.education{
padding:90px 26px;
}

.education-header h2{
font-size:38px;
}

}


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

.contact{
padding:180px 20px;
position:relative;
}

.contact-container{
max-width:1200px;
margin:auto;
}

/* header */

.contact-header{
margin-bottom:90px;
}

.contact-header h2{
font-family:'Cormorant Garamond',serif;
font-size:52px;
font-weight:500;
}

/* GRID */

.contact-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:120px;
align-items:start;
}

/* LEFT */

.contact-lead{
font-size:20px;
color:#d6dcff;
line-height:1.8;
margin-bottom:50px;
max-width:420px;
}

/* methods */

.contact-methods{
display:flex;
flex-direction:column;
gap:22px;
}

.contact-methods a,
.phone{
display:flex;
align-items:center;
gap:14px;

text-decoration:none;
color:#9aa3b2;
font-size:16px;

transition:.25s;
}

.contact-methods i{
color:#8f9bff;
font-size:18px;
}

.contact-methods a:hover{
color:white;
transform:translateX(6px);
}

/* FORM */

.contact-form{
display:flex;
flex-direction:column;
gap:22px;
}

/* inputs */

.contact-form input,
.contact-form textarea{

padding:18px 20px;

background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.08);
border-radius:14px;

color:white;
font-size:15px;

transition:.25s;
}

.contact-form textarea{
resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
border-color:#8f9bff;
background:rgba(143,155,255,.05);
}

/* button */

.contact-form button{

margin-top:10px;
padding:16px;

border-radius:50px;
border:1px solid rgba(255,255,255,.18);

background:transparent;
color:#d6dcff;

letter-spacing:.14em;
text-transform:uppercase;
font-size:13px;

cursor:pointer;
transition:.3s;
}

.contact-form button:hover{
border-color:#8f9bff;
color:white;
box-shadow:0 0 18px rgba(143,155,255,.35);
}

/* divider line above contact */

.contact::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:60%;
height:1px;
background:linear-gradient(to right, transparent, rgba(255,255,255,.08), transparent);
}

/* MOBILE */

@media(max-width:900px){

.contact-grid{
grid-template-columns:1fr;
gap:70px;
}

}


/* ================= POPUP ================= */

.popup{

position:fixed;
left:50%;
bottom:60px;

transform:translateX(-50%) translateY(30px);

display:flex;
align-items:center;
gap:12px;

padding:16px 22px;

border-radius:14px;

background:rgba(10,14,26,.75);
backdrop-filter:blur(14px);

border:1px solid rgba(143,155,255,.25);

box-shadow:
0 10px 40px rgba(0,0,0,.5),
0 0 30px rgba(143,155,255,.15);

color:#e6ebff;

opacity:0;
pointer-events:none;

transition:.45s cubic-bezier(.16,1,.3,1);
}

.popup.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}

.popup-icon{

width:32px;
height:32px;

border-radius:50%;

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

background:rgba(143,155,255,.18);
color:#aab4ff;
}
/* Error variant */

.popup-error{

border:1px solid rgba(255,120,120,.35);
color:#ffd2d2;

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

}



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

.footer{
padding:20px 20px;
border-top:1px solid rgba(255,255,255,.06);
margin-top:120px;
}

.footer-inner{
max-width:900px;
margin:auto;
text-align:center;

color:#7c86a5;
font-size:14px;
letter-spacing:.05em;
}

.footer-inner p{
margin-bottom:6px;
}

.footer-inner span{
font-size:13px;
opacity:.8;
}