/* ==========================================================
   GLOBAL LAYOUT
========================================================== */

body {
    min-height: 100vh;
}

main {
    overflow: hidden;
}

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

#header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:68px;

    display:flex;
    align-items:center;

    z-index:var(--z-nav);

    transition:all .35s ease;

    background:rgba(10,14,20,.45);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

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

}

#header.scrolled{

    height:64px;

background:rgba(12,16,24,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(30px);

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

    box-shadow:
        0 12px 40px rgba(0,0,0,.22);

}

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

.navbar{

    display:flex;

    justify-content:space-between;

    padding:0;

    align-items:center;

    position:relative;

}

.logo{

    font-size:1rem;

    font-weight:600;

    transition:var(--transition);

}

.logo:hover{

    color:var(--accent);

}

.nav-links{

    position:relative;

    display:flex;

    align-items:center;

    gap:2.2rem;

}

.nav-links li{

    position:relative;

}

.nav-link{

    position:relative;

    display:block;

    padding:.25rem 0;

    color:var(--text-secondary);

    transition:var(--transition);

}

.nav-link:hover{

    color:#fff;

    text-shadow:
        0 0 12px rgba(255,255,255,.15);

}

.nav-link.active{

    color:var(--text-primary);

}

.nav-indicator{

    position:absolute;

    bottom:-8px;

    height:2px;

    background:var(--accent);

    border-radius:999px;

    transition:

        left .35s cubic-bezier(.16,1,.3,1),

        width .35s cubic-bezier(.16,1,.3,1);

}

.nav-links a{

    position:relative;

    transition:.3s ease;

}

.nav-links a:not(.resume-btn)::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.3s ease;

}

.nav-links a:not(.resume-btn):hover::after{

    width:100%;

}

.nav-links a:not(.resume-btn).active::after{

    width:100%;

    box-shadow:
        0 0 8px rgba(79,125,255,.7),
        0 0 18px rgba(79,125,255,.35);

}

.resume-btn{

    padding:12px 22px;

    border-radius:999px;

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

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

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    color:#fff;

    font-weight:600;

    transition:all .35s ease;

}

.resume-btn:hover{

    transform:translateY(-2px);

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

    border-color:rgba(79,125,255,.65);

    box-shadow:
        0 0 18px rgba(79,125,255,.18),
        0 0 35px rgba(79,125,255,.12);

}
/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.menu-toggle{

    display:none;

    width:44px;

    height:44px;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

}

.menu-toggle span{

    width:24px;

    height:2px;

    background:white;

    transition:.35s;

}

.menu-toggle.active span:nth-child(1){

    transform:

        translateY(8px)

        rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:

        translateY(-8px)

        rotate(-45deg);

}
/* ==========================================================
   CONTAINER
========================================================== */

.container {
    width: min(1200px, 90%);
    margin-inline: auto;
}

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

section {
    padding-block: var(--section-padding);
    position: relative;
}

/* ==========================================================
   FLEX UTILITIES
========================================================== */

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.flex-column {
    display: flex;
    flex-direction: column;
}

/* ==========================================================
   GRID UTILITIES
========================================================== */

.grid {
    display: grid;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.section-label {

    display: inline-block;

    font-size: var(--fs-sm);

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: var(--letter-spacing);

    margin-bottom: var(--space-3);

}

.section-title {

    font-family: var(--font-heading);

    font-size: var(--fs-xl);

    font-weight: 700;

    line-height: 1.15;

    margin-bottom: var(--space-5);

}

.section-description {

    max-width: 700px;

    color: var(--text-secondary);

    font-size: var(--fs-base);

}

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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .6rem;

    padding: .9rem 1.7rem;

    border-radius: var(--radius-round);

    transition: var(--transition);

    font-weight: var(--fw-medium);

    white-space: nowrap;

}

.btn-primary {

    background: var(--accent);

    color: var(--white);

}

.btn-primary:hover {

    background: var(--accent-hover);

    transform: translateY(-2px);

}

.btn-outline {

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

    color: var(--text-primary);

    background: transparent;

}

.btn-outline:hover {

    border-color: var(--accent);

    color: var(--accent);

    transform: translateY(-2px);

}

/* ==========================================================
   DIVIDERS
========================================================== */

.divider {

    width: 100%;

    height: 1px;

    background: var(--border);

}

/* ==========================================================
   CARDS
========================================================== */

.card {

    background: var(--bg-secondary);

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

    border-radius: var(--radius-lg);

}

/* ==========================================================
   BADGES
========================================================== */

.badge {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    font-size: var(--fs-sm);

    color: var(--text-secondary);

}

/* ==========================================================
   AMBIENT GLOW
========================================================== */

.ambient-glow {

    position: absolute;

    width: 550px;

    height: 550px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(74,124,255,.18),
        transparent 70%
    );

    filter: blur(80px);

    pointer-events: none;

    z-index: -1;

}

/* ==========================================================
   IMAGE WRAPPER
========================================================== */

.image-wrapper {

    overflow: hidden;

    border-radius: var(--radius-lg);

}

.image-wrapper img {

    width: 100%;

    transition: transform .8s ease;

}

.image-wrapper:hover img {

    transform: scale(1.05);

}

/* ==========================================================
   LINK ANIMATION
========================================================== */

.text-link {

    display: inline-flex;

    align-items: center;

    gap: .35rem;

    transition: var(--transition);

}

.text-link:hover {

    color: var(--accent);

    gap: .6rem;

}

/* ==========================================================
   SPACING HELPERS
========================================================== */

.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.mb-3 { margin-bottom: var(--space-6); }
.mb-4 { margin-bottom: var(--space-8); }

.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-6); }
.mt-4 { margin-top: var(--space-8); }

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

.reveal {

    opacity: 0;

    transform: translateY(24px);

}

.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .6s cubic-bezier(.16,1,.3,1),
        transform .6s cubic-bezier(.16,1,.3,1);

}

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

#hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.hero-grid{

    display:grid;

    grid-template-columns:60% 40%;

    align-items:center;

    gap:6rem;

}

.hero-left{

    position:relative;

    z-index:2;

}

.hero-tag{

    display:flex;

    align-items:center;

    gap:.8rem;

    margin-bottom:1.5rem;

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.85rem;

}

.pulse-dot{

    width:8px;

    height:8px;

    background:var(--accent);

    border-radius:50%;

    animation:pulse 3s infinite;

}

.hero-heading{

    font-family:var(--font-heading);

    font-size:clamp(3.5rem,7vw,5.2rem);

    line-height:1.05;

    margin-bottom:2rem;

}

.hero-text{

    max-width:620px;

    color:var(--text-secondary);

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:2.5rem;

}

.hero-buttons{

    display:flex;

    gap:1rem;

    margin-bottom:3rem;

}

.hero-stack{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    padding-top:2rem;

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

}

.stack-item{

    display:flex;

    align-items:center;

    gap:.6rem;

    color:var(--text-muted);

}

.stack-item img{

    width:22px;

    filter:grayscale(1);

    transition:.35s;

}

.stack-item:hover img{

    filter:none;

}

.hero-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.hero-right blockquote{

    font-family:var(--font-heading);

    font-size:4rem;

    line-height:1.15;

    font-style:italic;

}

.hero-right span{

    margin-top:1rem;

    color:var(--text-muted);

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.8rem;

}

.hero-glow{

    position:absolute;

    width:700px;

    height:700px;

    background:

    radial-gradient(circle,

    rgba(74,124,255,.14),

    transparent 70%);

    filter:blur(70px);

    top:-220px;

    left:-180px;

    animation:floatGlow 12s ease-in-out infinite alternate;

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

.about-top{

    display:grid;

    grid-template-columns:35% 65%;

    gap:5rem;

    align-items:center;

}

.about-image{

    overflow:hidden;

    border-radius:24px;

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

    background:#111827;

    box-shadow:
        0 20px 50px rgba(0,0,0,.28);

}

.about-image img{

    width:100%;

    display:block;

    border-radius:16px;

    filter:none;

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

.about-image:hover img{

    transform:scale(1.02);

    box-shadow:
        0 25px 60px rgba(79,125,255,.15);

}

.about-title{

    font-family:var(--font-heading);

    font-size:3rem;

    line-height:1.15;

    margin-bottom:2rem;

}

.about-description{

    color:var(--text-secondary);

    max-width:700px;

    margin-bottom:2rem;

}

.about-status{

    display:flex;

    flex-wrap:wrap;

    gap:1.5rem;

    color:var(--text-muted);

}

.about-info{

    margin-top:5rem;

    display:grid;

    grid-template-columns:repeat(3,1fr);

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

}

.info-item{

    padding:1.5rem 0;

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

}

.info-label{

    display:block;

    color:var(--text-muted);

    font-size:.8rem;

    margin-bottom:.5rem;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.info-value{

    color:var(--text-primary);

}

/* ==========================================================
   TOOLBOX
========================================================== */

.toolbox{

    margin-top:4rem;

}

.tool-row{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:2rem;

    padding:1.5rem 0;

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

    align-items:center;

}

.tool-category{

    color:var(--text-muted);

    text-transform:uppercase;

    font-size:.8rem;

    letter-spacing:.08em;

}

.tool-items{

    display:flex;

    flex-wrap:wrap;

    gap:1.25rem 2rem;

}

.tool-item{

    display:flex;

    align-items:center;

    gap:.7rem;

    transition:var(--transition);

}

.tool-item:hover{

    transform:translateY(-3px);

}

.tool-item img{

    width:24px;

    height:24px;

    object-fit:contain;

    filter:grayscale(100%);

    transition:var(--transition);

}

.tool-item:hover img{

    filter:none;

}

.tool-item span{

    color:var(--text-secondary);

}

/* ==========================================================
   SELECTED WORK
========================================================== */

.project{

    width:min(1400px,92%);

    margin:7rem auto;

    display:grid;

    grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);

    gap:5rem;

    align-items:center;

}



/* ==========================================================
   PROJECT IMAGE
========================================================== */

.project-image{

    display:flex;

    justify-content:flex-start;

    align-items:center;

}
/* Browser */

.browser-frame{

    width:100%;

    max-width:760px;

    overflow:hidden;

    border-radius:22px;

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

    background:#161b22;

    box-shadow:
        0 25px 70px rgba(0,0,0,.35);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

/* Hover */

.project:hover .browser-frame{

    transform:translateY(-8px);

    box-shadow:

        0 40px 90px rgba(0,0,0,.45);

}

/* Header */

.browser-header{

    height:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    background:#111827;

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

}

/* Dots */

.browser-dots{

    display:flex;

    gap:8px;

}

.browser-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

}

.browser-dots span:nth-child(1){

    background:#ff5f57;

}

.browser-dots span:nth-child(2){

    background:#febc2e;

}

.browser-dots span:nth-child(3){

    background:#28c840;

}

/* Address */

.browser-address{

    color:#8b949e;

    font-size:.72rem;

    letter-spacing:.04em;

}

/* Screenshot */

.browser-frame img{

    display:block;

    width:100%;

    transition:.6s ease;

}

.project:hover .browser-frame img{

   transform:translateY(-10px);

    box-shadow:

        0 45px 100px rgba(0,0,0,.45);

}

.project-number{

    font-size:3rem;

    color:rgba(255,255,255,.18);

    line-height:1;

}

.project-content h3{

    font-family:var(--font-heading);

    font-size:2.3rem;

    margin:1rem 0;

}

.project-tagline{

    color:var(--text-secondary);

    margin-bottom:2rem;

    max-width:500px;

}

.project-highlights{

    display:grid;

    gap:.8rem;

    margin-bottom:2rem;

}

.project-highlights li{

    color:var(--text-secondary);

}

.project-stack{

    color:var(--accent);

    margin-bottom:2rem;

}

.project-links{

    display:flex;

    gap:2rem;

}

.project-links a{

    position:relative;

}

.project-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:1px;

    background:var(--accent);

    transition:var(--transition);

}

.project-links a:hover::after{

    width:100%;

}

/* ======================================
   JOURNEY
====================================== */

.journey-wrapper{

display:flex;

flex-direction:column;

gap:34px;

margin-top:80px;

}

.journey-card{

    width:100%;

    max-width:1050px;

    margin:0 auto;

    display:grid;

    grid-template-columns:120px 1fr;

    gap:36px;

    padding:28px 32px;

    border-radius:24px;

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

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.02),
        rgba(255,255,255,.01)
    );

    transition:.35s;

}

.journey-card:hover{

transform:translateY(-6px);

    border-color:rgba(79,125,255,.18);

    box-shadow:

        0 18px 45px rgba(0,0,0,.28);

}

.journey-icon{

width:58px;

height:58px;

display:flex;

justify-content:center;

align-items:center;

border-radius:20px;

background:

linear-gradient(
180deg,
rgba(79,125,255,.18),
rgba(79,125,255,.05)
);

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

}

.journey-icon svg{

width:26px;

height:26px;

color:#7EA3FF;

}

.journey-right p{

    max-width:700px;

    line-height:1.75;

}

.journey-year{

display:block;

margin-top:18px;

font-size:1.2rem;

font-weight:700;

color:#7EA3FF;

}

.journey-left{
    gap:12px;
}

.journey-stage{

display:block;

margin-top:8px;

color:#8f98ae;

letter-spacing:.08em;

text-transform:uppercase;

font-size:.78rem;

}

.journey-stack{

display:flex;

flex-wrap:wrap;

gap:12px;

margin:18px 0 14px;

}

.journey-stack span{

padding:8px 14px;

border-radius:999px;

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

color:#8EB1FF;

font-size:.82rem;

}

/* ==========================================================
   GITHUB
========================================================== */

.github-wrapper{

     display:grid;

    grid-template-columns:340px 1fr;

    gap:3rem;

    align-items:start;

    margin-top:4rem;

}

.github-profile{

    position:sticky;

    top:120px;

}

.github-profile img{

    width:110px;

    border-radius:50%;

    margin-bottom:1.5rem;

}

.github-profile h3{

    font-size:2rem;

    margin-bottom:.5rem;

}

.github-profile p{

    color:var(--text-secondary);

    margin-bottom:2rem;

}

.github-stats{

    display:flex;

    gap:2rem;

    margin-bottom:2rem;

}

.github-stats div{

    display:flex;

    flex-direction:column;

}

.github-stats span{

    font-size:2rem;

    color:var(--accent);

    font-weight:600;

}

.github-stats small{

    color:var(--text-muted);

}

.recent-repositories h3{

    margin-bottom:2rem;

}

#repo-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.repo{

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

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

    border-radius:18px;

    padding:22px;

    transition:.35s;

}

.repo:hover{

    transform:translateY(-6px);

    border-color:rgba(79,125,255,.35);

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

}
.repo-name{

    font-size:1.1rem;

    margin-bottom:.5rem;

}

.repo-description{

    color:var(--text-secondary);

    margin-bottom:.6rem;

}

.repo-language{

    color:var(--accent);

    font-size:.9rem;

}

/* ==========================================================
   CERTIFICATIONS
========================================================== */

.certification-list{

    margin-top:4rem;

}

.certificate{

    display:grid;

    grid-template-columns:60px 1fr auto;

    gap:2rem;

    align-items:center;

    padding:2rem 0;

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

}

.certificate:first-child{

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

}

.certificate-logo{

    display:flex;

    justify-content:center;

    align-items:center;

}

.certificate-logo img{

    width:34px;

    filter:grayscale(100%);

    transition:var(--transition);

}

.certificate:hover img{

    filter:none;

}

.certificate-content h3{

    font-size:1.2rem;

    margin-bottom:.35rem;

}

.certificate-content p{

    color:var(--text-muted);

}

.certificate a{

    color:var(--text-secondary);

    transition:var(--transition);

}

.certificate:hover a{

    color:var(--accent);

    transform:translateX(6px);

}

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

#contact{

    overflow:hidden;

}

.contact-wrapper{

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.contact-title{

    font-family:var(--font-heading);

    font-size:clamp(2.8rem,6vw,4.5rem);

    line-height:1.1;

    margin:1rem 0 2rem;

}

.contact-title span{

    color:var(--accent);

}

.contact-description{

    max-width:650px;

    margin:auto;

    color:var(--text-secondary);

    margin-bottom:4rem;

    font-size:1.1rem;

}

.contact-links{

    display:flex;

    flex-direction:column;

}

.contact-link{

    display:grid;

    grid-template-columns:150px 1fr auto;

    align-items:center;

    gap:2rem;

    padding:1.6rem 0;

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

    transition:var(--transition);

}

.contact-link:last-child{

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

}

.contact-link span:first-child{

    color:var(--text-muted);

    text-transform:uppercase;

    font-size:.8rem;

    letter-spacing:.08em;

}

.contact-link strong{

    justify-self:start;

    font-weight:500;

}

.contact-link span:last-child{

    font-size:1.4rem;

    transition:var(--transition);

}

.contact-link:hover{

    color:var(--accent);

}

.contact-link:hover span:last-child{

    transform:translateX(6px);

}

.contact-glow{

    right:-180px;

    bottom:-180px;

}

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

#footer{

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

   padding: 3rem 0 2rem;

}

.footer-wrapper{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:2rem;

}

.footer-left{

    color:var(--text-muted);

     opacity:.7;

    font-size:.9rem;

}

.footer-center{

     display:flex;

    justify-content:center;

    align-items:center;

    gap:2rem;

}

.footer-center a{

    color:var(--text-secondary);

    transition:var(--transition);

}

.footer-center a:hover{

    color:var(--accent);

}

.footer-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    text-align:right;

    gap:.4rem;

    min-width:220px;

}
.footer-bottom{

    margin-top:2.5rem;

    padding-top:2rem;

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

    text-align:center;

    color:var(--text-muted);

    font-size:.95rem;

    letter-spacing:.05em;

}

.footer-credit{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(79,125,255,.06);

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

    color:#dbe6ff;

}

/* ==========================================================
   PAGE LOADER
========================================================== */

#page-loader{

    position:fixed;

    inset:0;

    background:var(--bg-primary);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:opacity .6s ease,
               visibility .6s ease;

}

#page-loader.hidden{

    opacity:0;

    visibility:hidden;

}

.loader-content{

    text-align:center;

}

.loader-content h1{

    font-family:var(--font-heading);

    font-size:5rem;

    letter-spacing:.08em;

    margin-bottom:1rem;

    animation:loaderScale .9s ease;

}

.loader-content p{

    color:var(--text-muted);

    letter-spacing:.15em;

    text-transform:uppercase;

    font-size:.8rem;

    animation:loaderFade 1.2s ease;

}

@keyframes loaderScale{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes loaderFade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   CUSTOM CURSOR
========================================================== */

#cursor-dot{

    position:fixed;

    top:0;
    left:0;

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--accent);

    pointer-events:none;

    z-index:99999;

    transform:translate(-50%,-50%);

}

#cursor-ring{

    position:fixed;

    top:0;
    left:0;

    width:34px;
    height:34px;

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

    border-radius:50%;

    pointer-events:none;

    z-index:99998;

    transform:translate(-50%,-50%);

    transition:

        width .25s,

        height .25s,

        border-color .25s,

        background .25s;

}

/* Hover State */

#cursor-ring.active{

    width:52px;

    height:52px;

    border-color:var(--accent);

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

}

#scroll-progress{

position:fixed;

top:0;

left:0;

height:2px;

background:var(--accent);

width:0;

z-index:999999;

}