*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    scroll-behavior: smooth;
}
body{
    background: #0b0f1a;
    color: #140505;
    overflow-x: hidden;
    transition: .4s;
}
a{ text-decoration: none; }
img{
    max-width: 100%;
    display: block;
}
section{
    padding: 70px 8%;
    opacity: 1;
    transform: none;
}
/* NAVIGATION */
nav{
    width: 100%;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 8%;
    background: rgba(8,8,20,.95);
    backdrop-filter: blur(8px);
    z-index: 999;
    border-bottom: 1px solid #9b5cff;
}
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
}
.logo-link, .logo-link:hover{
    text-decoration: none;
    background: transparent;
    padding: 0;
}
.logo{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    user-select: none;
    transition: .3s;
}
nav ul{
    display: flex;
    list-style: none;
    align-items: center;
}
nav ul li{ margin-left: 15px; }
nav a{
    color: #fff;
    padding: 10px 18px;
    border-radius: 30px;
    transition: .3s;
}
nav a:hover, nav a.active{
    background: #fa0202;
    color: #fff;
    box-shadow: 0 0 20px #f10410;
}
#modeBtn{
    background: #ec0404;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}
#modeBtn:hover{ transform: scale(1.05); }
/* HOME SECTION */
.home{
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    padding: 60px 8%;
}
.home-text{
    flex: 1;
    max-width: 600px;
}
.home-text h3{
    color: grey;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.home-text h1{
    font-size: 65px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: red;
}
.home-text span{ color: #9b5cff; }
#typing{
    color: #00eaff;
    margin-bottom: 25px;
    min-height: 35px;
}
.home-text p{
    font-size: 18px;
    line-height: 1.8;
    color: grey;
    margin-bottom: 35px;
}
/* BUTTONS */
.buttons{ display: flex; gap: 20px; }
.btn{
    flex: 1;
    max-width: 140px;
    padding: 14px 20px;
    text-align: center;
    background: #9b5cff;
    color: #fff;
    border-radius: 30px;
    font-size: 14px;
    transition: .3s;
}
.btn:hover{
    transform: translateY(-5px);
    box-shadow: 0 0 20px #9b5cff;
}
.buttonns{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.btns{
    width: 48%;
    text-align: center;
    padding: 14px 0;
    background: #9b5cff;
    color: #fff;
    border-radius: 30px;
    font-size: 14px;
    transition: .3s;
}
.btn2{
    border: 2px solid red;
    padding: 14px 35px;
    border-radius: 35px;
    transition: .3s;
    display: inline-block;
    background: red;
    color: #fff;
}
.btn2:hover{
    background: red;
    color: #fff;
    box-shadow: 0 0 40px #9b5cff;
}
/* PROFILE IMAGE */
.home-image{
    flex: 0 0 350px;
    display: flex;
    justify-content: center;
}
.home-image img{
    width: 320px;
    height: 420px;
    object-fit: cover;
    border-radius: 25px;
    border: 4px solid #ec0101;
    box-shadow: 0 0 25px #fa0217;
    transition: .3s;
}
.home-image img:hover, .about-image img:hover{
    transform: scale(1.05);
    box-shadow: 0 0 25px #9b5cff, 0 0 60px rgba(155,92,255,.5);
}
/* PAGE TITLES & HEADINGS */
.title{
    text-align: center;
    font-size: 40px;
    color: #9b5cff;
    margin-bottom: 20px;
}
.page-title, .features, .cta{ text-align: center; }
.page-title p, .cta p{
    max-width: 700px;
    margin: auto;
    line-height: 1.8;
    color: #ccc;
}
.page-title p{ margin-top: 15px; }
.cta p{ margin-bottom: 35px; }
.cta h2{
    font-size: 40px;
    margin-bottom: 20px;
    color: grey;
}
/* CARDS */
.cards{
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 50px;
}
.card{
    width: 320px;
    background: #1b1f34;
    border: 1px solid #7a3cff;
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    transition: .3s;
    animation: fadeUp .8s ease;
}
.card:hover{
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(138, 43, 226, .5);
}
.card-img, .project-card img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 15px;
}
.card-img{ margin-bottom: 15px; }
.card h3{
    margin-bottom: 10px;
    text-align: center;
    color: red;
}
@keyframes fadeUp{
    from{ opacity: 0; transform: translateY(40px); }
    to{ opacity: 1; transform: translateY(0); }
}
/* ABOUT PAGE */
.about{
    min-height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    padding: 80px 10%;
}
.about-image{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-image img{
    width: 330px;
    height: 430px;
    object-fit: cover;
    border-radius: 20px;
    border: 4px solid #8b5cf6;
    box-shadow: 0 0 25px rgba(139,92,246,.45);
    transition: .3s;
}
.about-content{
    flex: 1;
    max-width: 600px;
}
.about-content h1, .about-content h2{ color: #8b5cf6; }
.about-content h1{ font-size: 52px; margin-bottom: 20px; }
.about-content h2{ font-size: 34px; margin-bottom: 25px; }
.about-content p{
    font-size: 19px;
    line-height: 1.9;
    margin-bottom: 22px;
    color: #ddd;
}
/* PROJECTS SECTION */
.projects{
    width: 100%;
    min-height: 100vh;
    padding: 90px 8%;
    background: #070b16;
}
.projects-header{
    text-align: center;
    max-width: 750px;
    margin: auto;
}
.projects-header h1{
    font-size: 60px;
    color: #8b5cf6;
    margin-bottom: 20px;
}
.projects-header p{
    color: #d1d5db;
    font-size: 18px;
    line-height: 1.8;
}
.projects-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}
.project-card{
    background: #14192d;
    border: 1px solid #8b5cf6;
    border-radius: 20px;
    padding: 20px;
    transition: .3s;
    box-shadow: 0 0 20px rgba(139,92,246,.25);
}
.project-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 0 35px rgba(139,92,246,.45);
}
.project-card h3{
    color: rgb(211, 1, 148);
    margin: 20px 0 15px;
    font-size: 26px;
}
.project-card p{
    color: #fffefe;
    line-height: 1.7;
    margin-bottom: 25px;
}
.projects .btn{
    display: block;
    width: 180px;
    margin: 20px auto 0;
    background: #8b5cf6;
    padding: 12px 28px;
    border-radius: 10px;
}
.projects .btn:hover{ background: #6d28d9; }
/* CONTACT PAGE */
.contact-page{
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}
.contact-info, .contact-form{
    flex: 1;
    min-width: 320px;
    background: #141b2d;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(155,92,255,.3);
}
.contact-info h2, .contact-form h2{
    color: #9b5cff;
    margin-bottom: 20px;
}
.contact-info p{
    margin: 15px 0;
    color: #d5d5d5;
}
.contact-form form{
    display: flex;
    flex-direction: column;
}
.contact-form input, .contact-form textarea{
    margin-bottom: 20px;
    padding: 15px;
    border: none;
    outline: none;
    border-radius: 10px;
    background: #1f2937;
    color: #fff;
    font-size: 16px;
}
.contact-form input:focus, .contact-form textarea:focus{
    border: 2px solid #9b5cff;
}
.contact-form textarea{ resize: none; }
.contact-form button{
    width: 220px;
    background: #9b5cff;
    color: #fff;
    padding: 14px 35px;
    border-radius: 35px;
    border: none;
    cursor: pointer;
    transition: .3s;
}
.social-buttons{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
/* FOOTER */
footer{
    text-align: center;
    padding: 30px;
    background: #111827;
    border-top: 1px solid rgba(155,92,255,.4);
}
footer p{
    color: #bbb;
    line-height: 30px;
}
/* LIGHT MODE */
.light-mode, body.light-mode{
    background: #f5f5f5;
    color: #111;
}
.light-mode nav,
.light-mode .card,
.light-mode .contact-info,
.light-mode .contact-form,
.light-mode footer,
body.light-mode .projects{
    background: #fff;
}
.light-mode nav a,
.light-mode .card,
.light-mode .contact-info,
.light-mode .contact-form{
    color: #000;
}
.light-mode .about-content p,
.light-mode .card p,
.light-mode .page-title p,
.light-mode .cta p,
.light-mode .contact-info p{
    color: #555;
}
.light-mode input, .light-mode textarea{
    background: #ececec;
    color: #222;
}
body.light-mode .projects h1{ color: #6c3cff; }
body.light-mode .project-card{
    background: #f8f8f8;
    border: 1px solid #ccc;
}
body.light-mode .project-card p,
body.light-mode .projects p{
    color: #030202;
}