/* =====================================================
   PARHAM ALIPOUR PORTFOLIO
   AI / Founder / Algo Trader Theme
===================================================== */



:root {

    --bg-main: #030712;

    --bg-secondary: #0f172a;

    --surface:
    rgba(15,23,42,.75);

    --surface-light:
    rgba(30,41,59,.55);


    --border:
    rgba(148,163,184,.18);


    --text:
    #f8fafc;


    --text-muted:
    #cbd5e1;


    --cyan:
    #22d3ee;


    --purple:
    #8b5cf6;


    --green:
    #34d399;


    --shadow:
    0 20px 70px rgba(0,0,0,.45);

}






/* =====================================================
 RESET
===================================================== */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {


    background:


    radial-gradient(
        circle at top,
        #172554,
        var(--bg-main)
    );


    color:var(--text);


    font-family:
    Vazirmatn,
    sans-serif;


    overflow-x:hidden;


    min-height:100vh;


}





body.english {


    font-family:
    Inter,
    sans-serif;


}






body.english h1,
body.english h2,
body.english h3 {


    font-family:
    Poppins,
    sans-serif;


}







/* =====================================================
 BACKGROUND
===================================================== */


.ai-background {


    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-10;


}




.network-grid {


    position:absolute;

    inset:-100%;


    background:


    linear-gradient(
        rgba(34,211,238,.08) 1px,
        transparent 1px
    ),


    linear-gradient(
        90deg,
        rgba(34,211,238,.08) 1px,
        transparent 1px
    );


    background-size:
    80px 80px;


    transform:
    perspective(800px)
    rotateX(65deg);


    animation:
    gridMove 30s linear infinite;


}



@keyframes gridMove {


    from {

        transform:
        perspective(800px)
        rotateX(65deg)
        translateY(0);

    }


    to {

        transform:
        perspective(800px)
        rotateX(65deg)
        translateY(80px);

    }


}





.particles {


    position:absolute;

    inset:0;


    background-image:


    radial-gradient(
        var(--cyan) 1px,
        transparent 1px
    );


    background-size:
    45px 45px;


    opacity:.15;


    animation:
    particleMove 35s linear infinite;


}



@keyframes particleMove {


    from {

        background-position:
        0 0;

    }


    to {

        background-position:
        500px 500px;

    }

}





.ambient {


    position:absolute;

    width:600px;

    height:600px;


    border-radius:50%;


    filter:
    blur(140px);


    opacity:.2;


}



.ambient-one {


    background:
    var(--cyan);


    right:-250px;

    top:-250px;


}




.ambient-two {


    background:
    var(--purple);


    left:-250px;

    bottom:-250px;


}







/* =====================================================
 LANGUAGE SWITCH
===================================================== */


.language-switch {


    position:fixed;


    top:25px;


    left:50%;


    transform:
    translateX(-50%);


    display:flex;


    gap:12px;


    z-index:999;


}



.language-switch button {


    background:
    rgba(15,23,42,.8);


    color:white;


    border:

    1px solid var(--border);


    padding:
    10px 28px;


    border-radius:50px;


    cursor:pointer;


    backdrop-filter:
    blur(15px);


    transition:.3s;


}



.language-switch button:hover {


    background:
    var(--cyan);


    color:#020617;


}







/* =====================================================
 MAIN
===================================================== */


main {


    width:min(1200px,92%);


    margin-inline:auto;


}








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


.hero {


    min-height:100vh;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;


    padding-block:
    130px 80px;


}







.profile-halo {


    width:260px;


    height:260px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    position:relative;


}




.profile-halo::before {


    content:"";


    position:absolute;


    inset:-40px;


    border-radius:50%;


    background:


    radial-gradient(
        circle,
        rgba(34,211,238,.4),
        transparent 65%
    );


    filter:
    blur(30px);


}




.profile-halo::after {


    content:"";


    position:absolute;


    inset:-15px;


    border-radius:50%;


    border:

    1px solid

    rgba(34,211,238,.4);


    animation:
    rotateBorder 8s linear infinite;


}




@keyframes rotateBorder {


    to {

        transform:
        rotate(360deg);

    }


}





.profile-halo img {


    width:230px;


    height:230px;


    object-fit:cover;


    border-radius:50%;


    border:

    6px solid

    #020617;


    position:relative;


    z-index:2;


}








.hero-content {


    max-width:900px;


}



.hero h1 {


    margin-top:45px;


    font-size:
    clamp(42px,7vw,85px);


    font-weight:900;


}



.hero h2 {


    margin-top:25px;


    color:
    var(--cyan);


    font-size:
    clamp(20px,3vw,32px);


}



.hero p {


    margin:

    35px auto;


    line-height:

    2.3;


    color:

    var(--text-muted);


    font-size:18px;


}








.identity-tags {


    display:flex;


    flex-wrap:wrap;


    justify-content:center;


    gap:12px;


    margin-top:30px;


}



.identity-tags span {


    padding:

    10px 22px;


    border-radius:50px;


    background:

    rgba(34,211,238,.08);


    border:

    1px solid rgba(34,211,238,.25);


    color:

    var(--cyan);


}







.location {


    color:
    var(--text-muted);


    margin-bottom:30px;


}





.company-link {


    display:inline-flex;


    padding:

    16px 40px;


    border-radius:50px;


    border:

    1px solid var(--cyan);


    color:white;


    text-decoration:none;


    transition:.35s;


}



.company-link:hover {


    background:

    var(--cyan);


    color:#020617;


}








/* =====================================================
 SOCIAL
===================================================== */


.social-links {


    margin-top:60px;


    display:flex;


    flex-wrap:wrap;


    justify-content:center;


    gap:25px;


}




.social-item {


    width:230px;


    min-height:100px;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:15px;


    text-decoration:none;


    color:white;


    background:

    var(--surface);


    border:

    1px solid var(--border);


    border-radius:25px;


    backdrop-filter:

    blur(20px);


    transition:.35s;


}



.social-item img {


    width:45px;


    height:45px;


}



.social-item:hover {


    transform:

    translateY(-12px);


    border-color:

    var(--cyan);


    box-shadow:

    0 0 40px rgba(34,211,238,.25);


}








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


.section {


    padding-block:100px;


}




.section-header {


    text-align:center;


    margin-bottom:55px;


}



.section-header h2 {


    font-size:
    clamp(32px,5vw,48px);


}







.glass-panel,
.glass-card {


    background:

    var(--surface);


    border:

    1px solid var(--border);


    border-radius:30px;


    backdrop-filter:

    blur(20px);


}






.glass-panel {


    padding:45px;


}


.glass-panel p,
.glass-card p {


    color:

    var(--text-muted);


    line-height:

    2.2;


}








/* =====================================================
 TIMELINE
===================================================== */


.timeline {


    display:flex;


    flex-direction:column;


    gap:35px;


}



.timeline-item {


    display:grid;


    grid-template-columns:
    140px 1fr;


    gap:30px;


}



.timeline-year {


    color:

    var(--cyan);


    font-size:28px;


    font-weight:800;


}



.timeline-content {


    background:

    var(--surface);


    padding:35px;


    border-radius:25px;


    border:

    1px solid var(--border);


}





.timeline-content h3 {


    color:

    white;


    margin-bottom:20px;


}







/* =====================================================
 EXPERTISE
===================================================== */


.expertise-grid {


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(280px,1fr)
    );


    gap:25px;


}




.glass-card {


    padding:35px;


    transition:.35s;


}



.glass-card h3 {


    color:

    var(--cyan);


    margin-bottom:20px;


}



.glass-card:hover {


    transform:

    translateY(-12px);


    box-shadow:

    var(--shadow);


}







/* =====================================================
 PROJECTS
===================================================== */


#projects {


    display:grid;


    grid-template-columns:

    repeat(
        auto-fit,
        minmax(280px,1fr)
    );


    gap:25px;


}







/* =====================================================
 TECH STACK
===================================================== */


.tech-stack {


    display:flex;


    flex-wrap:wrap;


    justify-content:center;


    gap:15px;


}



.tech-stack span {


    padding:

    14px 25px;


    border-radius:50px;


    background:

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


    border:

    1px solid var(--border);


    color:white;


}








/* =====================================================
 LANGUAGE VISIBILITY
===================================================== */


.en-content {


    display:none;


}



body.english .fa-content {


    display:none;


}



body.english .en-content {


    display:inline;


}







footer {


    padding-block:60px;


    text-align:center;


    color:

    var(--text-muted);


}









/* =====================================================
 MOBILE
===================================================== */


@media(max-width:700px){


.profile-halo {

    width:190px;

    height:190px;

}


.profile-halo img {

    width:165px;

    height:165px;

}


.timeline-item {


    grid-template-columns:1fr;


}



.social-item {


    width:100%;


}


.glass-panel {


    padding:25px;


}


}