body{
    margin:0;
    /* font-family:Inter,system-ui; */
    font-family:'IBM Plex Sans', sans-serif;
    background:#020617;
    color:white;

    /* letter-spacing:-0.2px; */
}

/* NAVBAR */
.navbar{
    position:sticky;
    top:0;
    backdrop-filter:blur(10px);
    background:rgba(2,6,23,0.7);
    border-bottom:1px solid rgba(14,165,233,.2);
    z-index:999;
}

.nav-inner{
    max-width:1100px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;

}

.logo{
    font-weight:bold;
    font-size:20px;
}

.nav-links a{
    margin-left:25px;
    text-decoration:none;
    color:#cbd5e1;
    transition:.3s;
}

.nav-links a:hover{
    color:#38bdf8;
}


/* HERO */

.hero{
    min-height:70vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    background:radial-gradient(circle at top,#0ea5e9,#020617 60%);
    padding-top:100px;
}


.hero-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:35px;
    max-width:1100px;
    margin:auto;
    /* transform:translateY(-35px); */
}

.hero-photo img{
    width:200px;
    height:200px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #0ea5e9;

    /* subtle premium glow */
    box-shadow:0 0 45px rgba(14,165,233,.35);
}

.hero-text{
    max-width:480px;
}

.hero-text h1{
    font-size:46px;
    line-height:1.1;
    letter-spacing:-0.5px;
    /* white-space:nowrap; */
}

.hero-headline{
    /* font-size:48px; */
    font-size:clamp(32px, 6vw, 48px);
    text-align:center;
    max-width:900px;
    margin:0 auto 0px auto;
    line-height:1.05;
    letter-spacing:-1px;
}

.subtitle{
    font-size:21px;
    color:#7dd3fc;
    margin:12px 0;
}

.hero-text p{
    color:#cbd5e1;
    font-size:17.5px;
    max-width:500px;
}

.identity{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    font-size:20px;
}

.name{
    font-weight:600;
    color:#e6edf3;
}

.role{
    color:#94a3b8;
    font-weight:500;
}

.divider{
    color:#38bdf8;
}

/* .cta-group{
    margin-top:25px;
} */

.cta-group{
    margin-top:25px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    /* justify-content:center; */
}

@media(max-width:600px){
    .cta-group{
        justify-content:center;
    }
}

.cta{
    background:#0ea5e9;
    padding:14px 26px;
    border-radius:12px;
    text-decoration:none;
    color:white;
    font-weight:bold;
    margin-right:12px;
    transition:.25s ease;
}

.cta:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(14,165,233,.35);
}

.cta-outline{
    border:2px solid #0ea5e9;
    padding:12px 24px;
    border-radius:12px;
    text-decoration:none;
    color:#38bdf8;

    transition:.25s ease;
}

.cta-outline:hover{
    background:rgba(14,165,233,.08);
    transform:translateY(-2px);
}

.cta-outline:active{
    transform:scale(.97);
}

/* SECTIONS */
.section{
    max-width:1100px;
    margin:auto;
    /* padding:100px 20px; */
    padding:130px 20px;
    position:relative;
}

.section::before{
    content:"";
    position:absolute;
    top:30px;
    left:50%;
    transform:translateX(-50%);
    width:60%;
    height:1px;
    background:linear-gradient(
    90deg,
    transparent,
    rgba(14,165,233,.35),
    transparent
    );
}

h2{
    font-size:40px;
    margin-bottom:30px;
}

/* ABOUT */
#about{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:left;
    /* background:#040b1a; */
    /* background: radial-gradient(circle at 15% 10%, rgba(14,165,233,.08), transparent 35%), #020617; */
    /* background:radial-gradient(circle at top,#0ea5e9,#020617 60%); */
    /* background:#020817;
    border-top:1px solid rgba(255,255,255,0.04);
    border-bottom:1px solid rgba(255,255,255,0.04); */
    /* background:radial-gradient(circle at top,#0ea5e9,#020617 60%); */

    background:radial-gradient(circle at 80% 20%, rgba(14,165,233,.10), transparent 40%);

    border-top:1px solid rgba(255,255,255,0.04);
    border-bottom:1px solid rgba(255,255,255,0.04);
}

/* .about-text{
    max-width:720px;
    line-height:1.75;
    font-size:18px;
    margin-bottom:20px;
} */

.about-text{
    max-width:720px;
    font-size:18px;
    line-height:1.8;
    color:#cbd5e1;
    margin-bottom:22px;
    text-align:left;
}


/* VIDEO */
.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
    gap:30px;
}

video, iframe{
    width:100%;
    border-radius:20px;
    border:1px solid #0ea5e9;
}

.video-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    border: 1px solid #0ea5e9;
    display: block;
}

.systems-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
    /* gap:48px; */

    /* grid-template-columns:repeat(auto-fit, minmax(380px, 1fr));
    gap:48px; */


    /* grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); */
    /* grid-template-columns:repeat(2, 2fr); */
    gap:32px;

    margin-top:50px;
}

/* CONTACT */

/* .contact-strip{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:26px;
    margin:40px auto 20px;
    width:100%;
} */

/* .contact-strip{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:26px;
    margin:70px auto 30px;
    width:100%;
    position:relative;
} */

.contact-strip{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    margin:45px auto 18px; /* reduced vertical space */
    width:100%;
    position:relative;
}


/* .contact-strip::before{
    content:"";
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    width:60%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(14,165,233,.35),
        transparent
    );
} */

.contact-strip::before{
    content:"";
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    width:65%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(148,163,184,.35),
        transparent
    );
}


/* .contact-strip img{
    width:22px;
    filter:invert(80%) brightness(1.2);
    opacity:.85;
    transition:.25s;
} */
/* .contact-icon{
    width:54px;
    height:54px;


    filter:invert(80%) brightness(1.2);

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

    border-radius:50%;

    background:rgba(14,165,233,.08);
    border:1px solid rgba(14,165,233,.25);

    cursor:pointer;
    transition:all .28s ease;
} */

.contact-icon{

    width:24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    filter:invert(80%) brightness(1.2);
    cursor:pointer;
    transition:all .25s ease;
}

.contact-icon:active{
    transform:scale(.9);
}

.contact-icon img{
    width:24px;
}


.contact-icon:hover{

    transform:translateY(-6px) scale(1.06);

    filter:
        invert(100%)
        drop-shadow(0 8px 18px rgba(14,165,233,.55));


    /* background:#0ea5e9;

    box-shadow:
        0 10px 25px rgba(14,165,233,.45),
        0 0 18px rgba(14,165,233,.35); */
}

/* CONTACT */

/* .contact a{
    display:block;
    margin:8px 0;
    color:#38bdf8;
    text-decoration:none;
} */

/* FOOTER */

/* footer{
    text-align:center;
    padding:50px;
    color:#64748b;
} */

footer{
    text-align:center;
    padding:22px 0 40px; /* smaller top padding */
    color:#64748b;
    position:relative;
}

footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:65%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(148,163,184,.35),
        transparent
    );
}


/* MOBILE */

@media(max-width:900px){

    .hero{
        padding-top:70px;
    }

    .hero-inner{
        flex-direction:column;
        text-align:center;
        gap:28px;
    }

    .hero-photo img{
        width:150px;
        height:150px;
    }

    .subtitle{
        font-size:18px;
    }

    .hero-text p{
        font-size:16px;
    }

    .section{
        padding:80px 20px;
    }

    .nav-inner{
        flex-direction:column;
        gap:12px;
    }

    .nav-links a{
        margin-left:14px;
    }

    .identity{
        flex-direction:column;
        gap:4px;
    }

    .divider{
        display:none;
    }

    #systems h2{
        text-align:center;
    }

    .section-sub{
        text-align:center;
        margin-left:auto;
        margin-right:auto;
    }

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

}

/* @media(max-width:700px){

.nav-inner{
    flex-direction:column;
    gap:12px;
}

.nav-links a{
    margin-left:14px;
}

} */

.resume-link{
    color:#38bdf8;
    font-weight:600;
}

.authority{
    margin-top:10px;
    color:#7dd3fc;
    font-weight:500;
}

.availability{
    margin-top:6px;
    color:#94a3b8;
    font-size:15px;
}