*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
body{
    color: #ededed;
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 10%;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
.logo{
    position: relative;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.navbar a{
    display: inline-block;
    color: #fff;
    text-decoration: none;
    margin-left: 40px;
    font-size: 25px;
    font-weight: 500;
    transition: 0.3s;
}
.navbar a:hover{
    color: #0ef;
}
/* Page base */
:root{
    --bg:#071026;
    --muted:#94a3b8;
    --accent:#0ef;
    --accent2:#7b61ff;
    --card:#0f1724;
}
html,body{height:100%;}
body{
    background: linear-gradient(180deg,var(--bg), #041021 80%);
    color: #e6eef8;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

main{padding-top:110px; max-width:1100px; margin:0 auto; padding-left:5%; padding-right:5%;}

/* Hero */
.hero-inner{
    display:flex;
    gap:36px;
    align-items:center;
    padding:48px 0;
}
.profile{
    flex:0 0 220px;
    display:flex;
    justify-content:center;
}
.profile-img{
    width:200px;
    height:200px;
    border-radius:50%;
    object-fit:cover;
    box-shadow: 0 10px 30px rgba(11,20,40,0.6), 0 2px 6px rgba(0,0,0,0.5);
    border:6px solid rgba(255,255,255,0.04);
    background: linear-gradient(135deg,var(--accent), var(--accent2));
}
.intro{flex:1}
.greeting{color:var(--accent); font-weight:600; margin-bottom:6px}
.name{font-size:clamp(28px,6vw,44px); margin-bottom:6px}
.role{color:var(--muted); font-weight:500; margin-bottom:12px}
.bio{line-height:1.6; color:#c7d6ea; max-width:70ch}
.cta{display:inline-block; margin-top:18px; padding:10px 16px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#05102a; text-decoration:none; border-radius:10px; font-weight:600}

/* Sections */
.section{padding:40px 0;border-top:1px solid rgba(255,255,255,0.03)}
.section-title{font-size:20px; color: #e6eef8; margin-bottom:12px}
.skill-list{display:flex; flex-wrap:wrap; gap:12px; list-style:none}
.skill-list li{background:#0b1a2b; padding:8px 12px; border-radius:8px; color:var(--muted)}

/* Brand in header */
.brand{display:flex; flex-direction:column}
.tagline{font-size:12px; color:var(--muted); margin-top:4px}

/* Projects grid */
.projects-grid{display:grid; gap:20px; grid-template-columns:repeat(3,1fr); margin-top:12px}
.project-card{background:var(--card); border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(2,6,23,0.6); transform:translateY(0); transition:transform 0.25s ease, box-shadow 0.25s ease}
.project-card img{width:100%; height:160px; object-fit:cover; display:block}
.project-card .card-body{padding:14px}
.project-card h3{margin-bottom:8px}
.project-card p{color:var(--muted); font-size:14px; line-height:1.4; margin-bottom:12px}
.card-actions{display:flex; gap:8px}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#05102a; border-radius:8px; padding:8px 10px; text-decoration:none; font-weight:600; border:none; cursor:pointer}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04)}
.project-card:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(11,20,40,0.6)}
.project-card .card-body{transform:translateY(0); transition:transform 0.35s ease}
.project-card:hover .card-body{transform:translateY(-6px)}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:200}
.modal[aria-hidden="false"]{display:flex}
.modal-overlay{position:absolute; inset:0; background:rgba(2,6,23,0.7)}
.modal-panel{position:relative; background:var(--card); padding:20px; border-radius:12px; max-width:720px; width:92%; color:#e6eef8; box-shadow:0 30px 80px rgba(2,6,23,0.8); transform:translateY(10px); animation:pop 220ms cubic-bezier(.2,.9,.2,1)}
.modal-close{position:absolute; right:12px; top:12px; background:transparent; border:0; color:#cdd9ee; font-size:28px; cursor:pointer}
.modal-image{width:100%; height:260px; object-fit:cover; border-radius:8px; margin-bottom:12px}
.modal-desc{color:var(--muted); margin-bottom:12px}

@keyframes pop{from{opacity:0; transform:translateY(24px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}

/* Responsive grid */
@media (max-width:1100px){
    .projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
    .projects-grid{grid-template-columns:1fr}
    .brand{align-items:flex-start}
}

/* Contact card */
.contact-card{display:flex; gap:28px; align-items:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; padding:22px; box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.contact-left{flex:1}
.contact-left h3{font-size:20px; margin-bottom:6px}
.contact-socials{display:flex; gap:10px; margin-top:12px}
.social-link{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,0.02); transition:transform 0.18s ease, background 0.18s ease; box-shadow:inset 0 -4px 8px rgba(0,0,0,0.25)}
.social-link:hover{transform:translateY(-4px); background:linear-gradient(90deg,var(--accent),var(--accent2))}

.contact-form{flex:1; display:flex; flex-direction:column; gap:12px; min-width:280px}
.field{display:flex; flex-direction:column}
.field-label{font-size:13px; color:var(--muted); margin-bottom:6px}
.field input,.field textarea{border:0; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,0.03); color:inherit; outline:2px solid transparent; transition:box-shadow 0.18s ease, transform 0.12s ease}
.field input::placeholder, .field textarea::placeholder{color:#9fb0cc}
.field input:focus, .field textarea:focus{box-shadow:0 8px 24px rgba(11,20,40,0.5); transform:translateY(-2px); outline:2px solid rgba(14,238,255,0.12)}
.form-actions{display:flex; align-items:center; gap:12px; margin-top:6px}
.btn.submit{padding:12px 16px; border-radius:12px}
#form-status{color:var(--muted); font-size:14px}

@media (max-width:900px){
    .contact-card{flex-direction:column; text-align:center}
    .contact-form{width:100%}
    .contact-left{width:100%}
    .social-link{margin:0 auto}
}

/* Header tweaks */
.header{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}
.navbar{display:flex; gap:8px; align-items:center}
.navbar a{font-size:16px; margin-left:18px}

/* Menu toggle (mobile) */
.menu-toggle{
    display:none;
    background:transparent;
    border:0;
    width:44px;
    height:36px;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
}
.menu-toggle .bar{display:block; width:22px; height:2.5px; background:#e6eef8; margin:3px auto; border-radius:2px; transition:transform 0.25s ease, opacity 0.2s ease}
.menu-toggle.open .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle.open .bar:nth-child(2){opacity:0}
.menu-toggle.open .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile navbar appearance when toggled */
.navbar.open{display:flex; flex-direction:column; position:absolute; right:5%; top:72px; background:rgba(5,16,42,0.9); padding:12px; border-radius:8px; box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.navbar.open a{margin:8px 0; font-size:16px}

/* Mobile */
@media (max-width:800px){
    .hero-inner{flex-direction:column; align-items:center; text-align:center}
    .profile{flex-basis:140px}
    .profile-img{width:140px;height:140px}
    .intro{padding:8px 0}
    .navbar{display:none}
    .menu-toggle{display:flex}
    .logo{font-size:18px}
    main{padding-left:6%; padding-right:6%}
}

/* Accessibility */
.profile-img[alt='']{outline:2px dashed rgba(255,255,255,0.06)}

/* small utility */
.muted{color:var(--muted)}