/* ---------- Reset ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#050505;

    color:white;

    overflow-x:hidden;

}

/* ---------- Background ---------- */

.blob{

    pointer-events: none;

    position:fixed;

    border-radius:50%;

    filter:blur(120px);

    opacity:.35;

    z-index:-1;

}

.blob-red{

    width:350px;

    height:350px;

    background:#ff1744;

    top:-100px;

    left:-80px;

}

.blob-orange{

    width:300px;

    height:300px;

    background:#ff6d00;

    right:-100px;

    bottom:0;

}

.blob-amber{

    width:250px;

    height:250px;

    background:#ff9100;

    left:55%;

    top:50%;

}

/* ---------- Navbar ---------- */

.navbar{

    z-index: 9999;

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    max-width:1400px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 30px;

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

    backdrop-filter:blur(20px);

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

    border-radius:50px;

    gap: 20px;

}

.logo{

    font-size:24px;

    font-weight:800;

}

.navbar ul{

    display:flex;

    align-items: center;

    gap:28px;

    list-style:none;

}

.navbar li{

    display: flex;

    align-items: center;

}

.navbar a{

    text-decoration:none;

    color:white;

    transition:.3s;

    line-height: 1;

}

.navbar a:hover{

    color:#ff9100;

}

/* ---------- Hero ---------- */

.hero{

    min-height:100vh;

    display:flex;

    flex-wrap:wrap;
    align-items:center;

    justify-content:space-between;

    gap:80px;

    padding:140px 8% 80px;

}

.hero-content{

    flex:1;

}

.hero-content h1{

    font-size:72px;

    margin-top:20px;

}

.hero-content h2{

    font-size:26px;

    color:#c8c8c8;

    margin-top:12px;

    line-height:1.5;

}

.hero-content p{

    margin-top:28px;

    color:#d9d9d9;

    max-width:700px;

    line-height:1.9;

}

.pill{

    display:inline-block;

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

    backdrop-filter:blur(15px);

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

    padding:10px 20px;

    border-radius:999px;

}

/* ---------- Buttons ---------- */

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-top:40px;

}

.btn{

    text-decoration:none;

    color:white;

    padding:14px 26px;

    border-radius:999px;

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

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    transition:.3s;

}

.btn:hover{

    transform:translateY(-4px);

}

.secondary{

    background:transparent;

}

/* ---------- Glass Card ---------- */

.hero-image{

    display:flex;

    justify-content:center;

}

.glass-card{

    width:100%;
    max-width:360px;
    aspect-ratio: 360 / 460;
    border-radius:28px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.1);
    display:flex;
    justify-content:center;
    align-items:center;

}

.placeholder{

    color:#bbbbbb;

    text-align:center;

    font-size:22px;

}
/* =========================
   Floating Blob Animation
========================= */

@keyframes floatBlob {
  0% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(40px, -30px) scale(1.08);
  }

  50% {
    transform: translate(-20px, 30px) scale(0.95);
  }

  75% {
    transform: translate(30px, 20px) scale(1.05);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

.blob-red {
  animation: floatBlob 18s ease-in-out infinite;
}

.blob-orange {
  animation: floatBlob 22s ease-in-out infinite reverse;
}

.blob-amber {
  animation: floatBlob 20s ease-in-out infinite;
}
/* =========================
   Premium Profile Section
========================= */

.profile-frame {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 380 / 480;
    border-radius: 30px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.profile-glow {
    pointer-events: none;
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(80px);
    background: radial-gradient(circle, rgba(255,100,50,.8), transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

.profile-placeholder {
    position: relative;
    z-index: 2;
    width: 220px;
    height: 220px;
    border-radius: 12px;
    border: 2px dashed rgba(255,255,255,.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.05);
}

.profile-placeholder span {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
}

.profile-placeholder small {
    margin-top: 10px;
    color: #cfcfcf;
}

.profile-image {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
}

.nav-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    object-position: center;
}

@keyframes pulseGlow {
    0%,100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}
/* =========================
   Navbar Scroll Effect
========================= */

.navbar {
    transition: all 0.35s ease;
}

.navbar-scrolled {
    padding: 12px 24px;
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(30px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* =========================
   About Section
========================= */

.about {

    padding: 120px 8%;

}

.section-title {

    font-size: 52px;

    text-align: center;

    margin-bottom: 20px;

}

.section-subtitle {

    text-align: center;

    max-width: 800px;

    margin: auto;

    color: #cfcfcf;

    line-height: 1.8;

    margin-bottom: 60px;

}

.about-grid {

    display: grid;

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

    gap: 30px;

}

.about-card {

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

    backdrop-filter: blur(20px);

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

    border-radius: 24px;

    padding: 35px;

    transition: .35s;

}

.about-card:hover {

    transform: translateY(-8px);

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

}

.about-card h3 {

    margin-bottom: 16px;

    font-size: 24px;

}

.about-card p {

    color: #d5d5d5;

    line-height: 1.8;

}
/* =========================
   Skills Section
========================= */

.skills {

    padding: 120px 8%;

}

.skills-grid {

    display: grid;

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

    gap: 24px;

}

.skill-card {

    padding: 24px;

    text-align: center;

    border-radius: 20px;

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

    border: 1px solid rgba(255,255,255,.12);

    backdrop-filter: blur(18px);

    font-weight: 600;

    transition: all 0.3s ease;

    cursor: default;

}

.skill-card:hover {

    transform: translateY(-8px) scale(1.03);

    box-shadow:
        0 0 25px rgba(255, 120, 0, 0.25),
        0 15px 35px rgba(0,0,0,0.3);

}
/* =========================
   My Works Section
========================= */

.works {
    padding: 120px 8%;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.work-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 24px;
    transition: all 0.3s ease;
}

.work-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.work-thumbnail {
    height: 220px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(255, 77, 77, 0.2),
        rgba(255, 140, 66, 0.2)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
    font-weight: 600;
    margin-bottom: 20px;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    font-size: 12px;
    margin-bottom: 14px;
}

.work-card h3 {
    margin-bottom: 12px;
}

.work-card p {
    color: #d5d5d5;
    line-height: 1.7;
    margin-bottom: 20px;
}
/* =========================
   Resume Section
========================= */

.resume {
    padding: 100px 4%;
    width: 100%;
}

.resume-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.resume-summary {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 35px;
}

.resume-summary h3 {
    margin-bottom: 20px;
}

.resume-summary p {
    color: #d5d5d5;
    line-height: 1.8;
    margin-bottom: 20px;
}

.resume-summary ul {
    padding-left: 20px;
    line-height: 2;
    color: #e0e0e0;
}

.resume-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}


/* =========================
   Source Files Section
========================= */

.source-files {
    padding: 120px 8%;
}

.source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.source-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.source-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 36px rgba(0,0,0,0.3);
}

.source-icon {
    font-size: 42px;
    margin-bottom: 18px;
}

.source-card h3 {
    margin-bottom: 12px;
}

.source-card p {
    color: #d5d5d5;
    line-height: 1.7;
    margin-bottom: 20px;
}
/* =========================
   Source Files Section
========================= */

.source-section {
    padding: 120px 8%;
}

.source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.source-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.source-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.source-icon {
    font-size: 42px;
    margin-bottom: 20px;
}

.source-card h3 {
    margin-bottom: 12px;
}

.source-card p {
    color: #d0d0d0;
    line-height: 1.7;
    margin-bottom: 24px;
}
/* =========================
   Testimonials
========================= */

.testimonials {
    padding: 120px 8%;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 30px;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.testimonial-text {
    font-style: italic;
    line-height: 1.8;
    color: #d8d8d8;
    margin-bottom: 24px;
}

.testimonial-card h4 {
    margin-bottom: 6px;
}

.testimonial-card span {
    color: #aaaaaa;
    font-size: 14px;
}
/* =========================
   Contact
========================= */

.contact {
    padding: 120px 8%;
}

.contact-card {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 40px;
}

.contact-card p {
    margin-bottom: 18px;
    color: #dddddd;
    line-height: 1.7;
}
/* =========================
   Theme Toggle
========================= */

.theme-toggle {

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

    border: 1px solid rgba(255,255,255,.15);

    backdrop-filter: blur(15px);

    color: white;

    border-radius: 50%;

    width: 45px;

    height: 45px;

    cursor: pointer;

    font-size: 18px;

    transition: 0.3s;

    margin-left: auto;

    padding-right: 12px;

    z-index: 10000;

}

.theme-toggle:hover {

    transform: scale(1.08);

}

/* =========================
   Light Mode
========================= */

body.light-mode {

    background: #f4f4f4;

    color: #111;

}

body.light-mode .navbar,
body.light-mode .about-card,
body.light-mode .skill-card,
body.light-mode .work-card,
body.light-mode .resume-summary,
body.light-mode .source-card,
body.light-mode .testimonial-card,
body.light-mode .contact-card,
body.light-mode .profile-frame {

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

    color: #111;

}

body.light-mode a,
body.light-mode p,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {

    color: #111;

}
/* =========================
   Scroll Reveal Animation
========================= */

.hero,
.about,
.skills,
.works,
.resume,
.source-section,
.testimonials,
.contact {

    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;

}

.show {

    opacity: 1;

    transform: translateY(0);

}
.navbar a.active {
    color: #ff9100;
    font-weight: 700;
}

.navbar a {
    transition: color 0.3s ease;
}
/* =========================
   Footer
========================= */

.footer {

    padding: 80px 8% 40px;

    text-align: center;

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

    margin-top: 40px;

}

.footer h3 {

    font-size: 32px;

    margin-bottom: 16px;

}

.footer p {

    color: #cfcfcf;

    line-height: 1.8;

}

.footer-links {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin: 30px 0;

}

.footer-links a {

    color: white;

    text-decoration: none;

    transition: 0.3s;

}

.footer-links a:hover {

    color: #ff9100;

}

.copyright {

    margin-top: 30px;

    font-size: 14px;

    opacity: 0.8;

}
/* =========================
   Process Timeline
========================= */

.process {
    padding: 120px 8%;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.timeline-item {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.timeline-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.timeline-circle {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background: linear-gradient(135deg, #ff5e3a, #ff9f43);
    color: #fff;
    font-size: 20px;
}

.timeline-item h3 {
    margin-bottom: 12px;
}

.timeline-item p {
    color: #d5d5d5;
    line-height: 1.7;
}
/* ===== Project Modal ===== */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(8px);
    z-index:10000;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.modal-content{
    max-width:700px;
    width:100%;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(25px);
    border-radius:24px;
    padding:40px;
    position:relative;
    border:1px solid rgba(255,255,255,.12);
}

.close-modal{
    position:absolute;
    right:25px;
    top:20px;
    font-size:34px;
    cursor:pointer;
}