/* =========================================
   VARIABLES
========================================= */
:root{
    --bg:#050806;
    --bg2:#0a100c;
    --card:#0c130f;
    --card-2:#0f1a13;
    --text:#f4f8f4;
    --muted:#87968b;
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.18);
    --green:#5cff78;
    --green-2:#18c944;
    --green-glow:rgba(92,255,120,.25);
    --white:#fff;
    --shadow-lg:0 35px 90px rgba(0,0,0,.35);
    --radius-lg:24px;
    --radius-md:16px;
    --radius-sm:12px;
    --ease:cubic-bezier(.2,.8,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
}

[data-theme="light"]{
    --bg:#f4f8f5;
    --bg2:#e8f0ea;
    --card:#ffffff;
    --card-2:#f7fbf8;
    --text:#0c130e;
    --muted:#5a665d;
    --line:rgba(10,30,15,.10);
    --line-strong:rgba(10,30,15,.2);
    --green:#0f9e40;
    --green-2:#0a7d2e;
    --green-glow:rgba(15,158,64,.18);
    --white:#0a130c;
    --shadow-lg:0 35px 90px rgba(10,40,20,.12);
}

/* =========================================
   RESET
========================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
    width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
    scroll-padding-top:100px;
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
    font-family:"Vazirmatn",system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    transition:background .4s ease,color .4s ease;
    -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg,video{max-width:100%;height:auto;display:block}
ul{list-style:none}

::selection{background:var(--green);color:#061008}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--green),var(--green-2));
    border-radius:10px;
    border:2px solid var(--bg2);
}
::-webkit-scrollbar-thumb:hover{background:var(--green)}

:focus-visible{
    outline:2px solid var(--green);
    outline-offset:3px;
    border-radius:6px;
}

/* =========================================
   LOADER
========================================= */
.loader{
    position:fixed;inset:0;z-index:9999;
    display:grid;place-items:center;
    background:var(--bg);
    transition:opacity .6s ease,visibility .6s ease;
}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.loader-logo{
    width:70px;height:70px;display:grid;place-items:center;
    border-radius:20px;background:var(--green);color:#061008;
    font-size:36px;font-weight:900;
    animation:loaderPop .8s var(--ease-out);
}
@keyframes loaderPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.loader-bar{
    width:180px;height:3px;border-radius:3px;
    background:var(--line);overflow:hidden;
}
.loader-bar span{
    display:block;height:100%;width:40%;
    background:linear-gradient(90deg,transparent,var(--green),transparent);
    animation:loaderSlide 1.2s ease-in-out infinite;
}
@keyframes loaderSlide{0%{transform:translateX(-150%)}100%{transform:translateX(400%)}}

/* =========================================
   SKIP LINK
========================================= */
.skip-link{
    position:absolute;top:-100px;right:20px;
    padding:12px 18px;background:var(--green);color:#061008;
    border-radius:10px;font-weight:700;z-index:10000;
    transition:top .3s;
}
.skip-link:focus{top:20px}

/* =========================================
   SCROLL PROGRESS
========================================= */
.scroll-progress{
    position:fixed;top:0;right:0;height:3px;width:0%;
    background:linear-gradient(90deg,var(--green),var(--green-2));
    z-index:999;box-shadow:0 0 10px var(--green-glow);
    transition:width .1s linear;
}

/* =========================================
   BACKGROUND BLOBS
========================================= */
.blobs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{
    position:absolute;border-radius:50%;
    filter:blur(80px);opacity:.35;
    animation:blobFloat 20s ease-in-out infinite;
}
.blob-1{width:400px;height:400px;background:var(--green);top:-100px;right:-100px}
.blob-2{width:350px;height:350px;background:#18c944;bottom:-80px;left:-80px;animation-delay:-7s}
.blob-3{width:300px;height:300px;background:#5cff78;top:40%;left:30%;opacity:.12;animation-delay:-14s}
@keyframes blobFloat{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(30px,-40px) scale(1.1)}
    66%{transform:translate(-30px,30px) scale(.95)}
}
[data-theme="light"] .blob{opacity:.18}

/* =========================================
   NOISE
========================================= */
.noise{
    position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================
   CURSOR
========================================= */
.cursor-glow{
    position:fixed;width:340px;height:340px;border-radius:50%;
    pointer-events:none;z-index:0;
    background:radial-gradient(circle,var(--green-glow),transparent 65%);
    transform:translate(-50%,-50%);
    transition:opacity .4s;
    will-change:left,top;
}

/* =========================================
   HEADER
========================================= */
.header{
    position:sticky;top:15px;z-index:50;
    width:min(1200px,calc(100% - 35px));
    height:72px;margin:15px auto 0;
    padding:0 13px 0 22px;
    display:flex;align-items:center;justify-content:space-between;
    border:1px solid var(--line);border-radius:20px;
    background:color-mix(in srgb,var(--bg) 75%,transparent);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transition:all .4s var(--ease);
}
.header.scrolled{
    height:64px;border-color:var(--line-strong);
    box-shadow:0 10px 40px rgba(0,0,0,.2);
}

.logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:900;letter-spacing:1px}
.logo>span:last-child>span{color:var(--green)}
.logo-box{
    width:38px;height:38px;display:grid;place-items:center;
    border-radius:11px;background:var(--green);color:#061008;
    transition:transform .4s var(--ease);
}
.logo:hover .logo-box{transform:rotate(-12deg) scale(1.08)}

nav{display:flex;align-items:center;gap:3px}
nav a{
    padding:9px 12px;border-radius:10px;
    color:var(--muted);font-size:12px;font-weight:500;
    transition:all .3s var(--ease);position:relative;
}
nav a:hover,nav a.active{color:var(--text);background:var(--card)}
nav a.active{color:var(--green)}
nav a.active::after{
    content:"";position:absolute;bottom:4px;left:50%;
    width:16px;height:2px;transform:translateX(-50%);
    background:var(--green);border-radius:2px;
}

.header-actions{display:flex;gap:8px;align-items:center}

.theme-button,.menu-button{
    width:42px;height:42px;border:1px solid var(--line);
    border-radius:12px;background:var(--card);color:var(--text);
    display:grid;place-items:center;transition:all .35s var(--ease);
}
.theme-button:hover{
    color:var(--green);border-color:var(--green);
    transform:rotate(15deg) scale(1.05);
}
.menu-button{display:none;position:relative}
.menu-button span{
    position:absolute;width:18px;height:2px;
    background:currentColor;border-radius:2px;
    transition:all .3s var(--ease);
}
.menu-button span:nth-child(1){transform:translateY(-6px)}
.menu-button span:nth-child(3){transform:translateY(6px)}
.menu-button.active span:nth-child(1){transform:rotate(45deg)}
.menu-button.active span:nth-child(2){opacity:0}
.menu-button.active span:nth-child(3){transform:rotate(-45deg)}

/* =========================================
   HERO
========================================= */
.hero{
    width:min(1200px,calc(100% - 35px));
    min-height:calc(100vh - 90px);margin:auto;
    display:grid;grid-template-columns:1fr 1fr;
    align-items:center;gap:50px;position:relative;
    padding:70px 0 100px;
}

.hero-grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:65px 65px;
    mask-image:linear-gradient(to bottom,black,transparent 80%);
    -webkit-mask-image:linear-gradient(to bottom,black,transparent 80%);
    pointer-events:none;
}

.status{
    display:inline-flex;align-items:center;gap:9px;
    padding:8px 14px;border:1px solid var(--line);
    border-radius:100px;background:var(--card);
    color:var(--muted);font-size:11px;margin-bottom:25px;
    animation:heroFade .8s var(--ease-out) both;
}
.status span:first-child{
    width:7px;height:7px;border-radius:50%;
    background:var(--green);box-shadow:0 0 18px var(--green);
    animation:pulse 2s infinite;
}
@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.4;transform:scale(.7)}
}

.hero h1{
    font-size:clamp(48px,7vw,94px);
    line-height:1.08;letter-spacing:-4px;font-weight:500;
}
.hero h1 .line{display:block;animation:heroFade 1s var(--ease-out) both}
.hero h1 .line:nth-child(2){animation-delay:.15s}
.hero h1 strong{color:var(--green);font-weight:900;position:relative}
@keyframes heroFade{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

.hero-content>p{
    max-width:610px;margin:28px 0 32px;
    color:var(--muted);font-size:14px;line-height:2;
    animation:heroFade 1s var(--ease-out) .3s both;
}

.hero-buttons{
    display:flex;gap:10px;flex-wrap:wrap;
    animation:heroFade 1s var(--ease-out) .45s both;
}

.button{
    padding:13px 22px;border-radius:13px;
    border:1px solid var(--line);font-size:12px;font-weight:600;
    transition:all .35s var(--ease);
    position:relative;overflow:hidden;
    display:inline-flex;align-items:center;gap:8px;
    isolation:isolate;
}
.button::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.25),transparent 50%);
    opacity:0;transition:opacity .3s;z-index:-1;
}
.button:hover::before{opacity:1}
.button.primary{
    background:var(--green);border-color:var(--green);
    color:#061008;font-weight:800;
    box-shadow:0 8px 30px rgba(50,220,80,.2);
}
.button.primary:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 50px rgba(50,220,80,.35);
}
.button.secondary:hover{
    border-color:var(--green);color:var(--green);
    transform:translateY(-4px);
}

.hero-meta{
    display:flex;gap:45px;margin-top:55px;
    animation:heroFade 1s var(--ease-out) .6s both;
}
.hero-meta>div{display:flex;flex-direction:column;position:relative}
.hero-meta strong{color:var(--green);font-size:23px;font-weight:900;display:inline}
.hero-meta>div>span:not(.label){
    color:var(--green);font-size:16px;font-weight:700;
    margin-inline-start:2px;
}
.hero-meta .label{color:var(--muted);font-size:10px;margin-top:2px}

/* HERO ART */
.hero-art{height:570px;position:relative;display:grid;place-items:center}
.circle{
    position:absolute;border-radius:50%;
    border:1px solid rgba(100,255,120,.08);
    will-change:transform;
}
.circle-one{width:470px;height:470px;animation:rotateCircle 20s linear infinite}
.circle-two{width:350px;height:350px;border-style:dashed;animation:rotateCircle 14s linear infinite reverse}
@keyframes rotateCircle{to{transform:rotate(360deg)}}

.code-card{
    width:420px;min-height:350px;
    position:relative;z-index:3;
    border:1px solid rgba(255,255,255,.11);
    border-radius:22px;background:rgba(9,15,11,.85);
    box-shadow:0 40px 100px rgba(0,0,0,.45),0 0 80px rgba(50,255,80,.05);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transform:rotate(-3deg);transition:transform .6s var(--ease);
    will-change:transform;
}
.code-card:hover{transform:rotate(0) translateY(-10px)}

.code-top{
    height:48px;padding:0 17px;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;align-items:center;justify-content:space-between;
    color:#6e7d73;font-size:9px;
    font-family:"JetBrains Mono",monospace;
}
.window-buttons{display:flex;gap:6px}
.window-buttons i{width:8px;height:8px;border-radius:50%;background:#445047}
.window-buttons i:nth-child(1){background:#ff5f57}
.window-buttons i:nth-child(2){background:#febc2e}
.window-buttons i:nth-child(3){background:#28c840}

.code{
    padding:32px 28px;direction:ltr;text-align:left;
    font-family:"JetBrains Mono",monospace;
    font-size:13px;line-height:2.1;overflow-x:auto;
}
.code code{font-family:inherit}

.purple{color:#c792ea}
.green{color:#70ff88}
.yellow{color:#ffd479}
.white{color:#f5f7f5}
.comment{color:#5d7063;font-style:italic}

.floating-tag{
    position:absolute;z-index:5;padding:11px 15px;
    display:flex;align-items:center;gap:7px;
    border:1px solid var(--line);border-radius:12px;
    background:color-mix(in srgb,var(--card) 82%,transparent);
    backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
    color:var(--muted);font-size:10px;font-weight:600;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    animation:float 5s ease-in-out infinite;
    will-change:transform;
}
.floating-tag span{color:var(--green)}
.tag-one{top:18%;right:0}
.tag-two{bottom:22%;left:0;animation-delay:-2s}
.tag-three{bottom:7%;right:12%;animation-delay:-3.5s}
@keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-12px)}
}

/* =========================================
   SECTIONS
========================================= */
.section{
    width:min(1200px,calc(100% - 35px));
    margin:auto;padding:130px 0;
}

.section-top{
    display:flex;align-items:center;gap:12px;
    color:var(--muted);font-size:10px;letter-spacing:2px;
    margin-bottom:60px;font-family:"JetBrains Mono",monospace;font-weight:700;
}
.number{color:var(--green);font-weight:900}

/* ABOUT */
.about-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:120px}
.about-title>span{color:var(--muted);font-size:18px}
.about-title h2{
    font-size:clamp(80px,12vw,170px);line-height:.8;
    color:var(--green);letter-spacing:-10px;font-weight:900;
}
.about-text{padding-top:15px}
.about-text .large{
    font-size:25px;line-height:1.8;color:var(--text);
    margin-bottom:25px;font-weight:500;
}
.about-text p:not(.large){color:var(--muted);font-size:13px;max-width:650px;line-height:2}
.about-line{display:flex;align-items:center;gap:15px;margin-top:40px}
.about-line span{width:50px;height:1px;background:var(--green);position:relative}
.about-line span::after{
    content:"";position:absolute;inset:0;
    background:var(--green);animation:lineGrow 3s ease-in-out infinite;
}
@keyframes lineGrow{
    0%,100%{opacity:.3;width:0}
    50%{opacity:1;width:100%}
}
.about-line b{
    color:var(--muted);font-size:9px;letter-spacing:2px;
    font-family:"JetBrains Mono",monospace;
}

/* SKILLS */
.skills-title h2,
.projects-header h2,
.journey-header h2{
    font-size:clamp(42px,6vw,76px);
    line-height:1.2;letter-spacing:-4px;font-weight:500;
}
.skills-title h2 span,
.projects-header h2 span,
.journey-header h2 span{color:var(--green);font-weight:900}

.skills-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:10px;margin-top:60px;
}
.skill-card{
    min-height:270px;padding:23px;position:relative;
    overflow:hidden;border:1px solid var(--line);
    border-radius:20px;background:var(--card);
    transition:all .45s var(--ease);
}
.skill-card::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),var(--green-glow),transparent 40%);
    opacity:0;transition:opacity .4s;pointer-events:none;
}
.skill-card:hover::before{opacity:1}
.skill-card:hover{
    transform:translateY(-10px);border-color:var(--green);
    box-shadow:var(--shadow-lg);
}
.skill-number{color:var(--green);font-size:9px;font-family:"JetBrains Mono",monospace}
.skill-icon{
    margin-top:35px;font-family:"JetBrains Mono",monospace;
    color:var(--green);font-size:29px;font-weight:900;
}
.skill-card h3{margin-top:15px;font-size:20px}
.skill-card p{color:var(--muted);font-size:11px}
.skill-line{
    position:absolute;bottom:23px;left:23px;right:23px;
    height:2px;background:var(--line);border-radius:2px;overflow:hidden;
}
.skill-line span{
    display:block;height:100%;width:0;
    background:linear-gradient(90deg,var(--green),var(--green-2));
    transition:width 1.2s var(--ease-out);
    box-shadow:0 0 10px var(--green-glow);
}
.skill-card.visible .skill-line span{width:var(--w,65%)}

/* PROJECTS */
.projects-header{
    display:flex;justify-content:space-between;
    align-items:end;gap:30px;
}
.projects-header p{max-width:300px;color:var(--muted);font-size:12px}

.project-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:13px;margin-top:60px;
}
.project-card{
    border:1px solid var(--line);border-radius:23px;
    overflow:hidden;background:var(--card);
    transition:all .5s var(--ease);position:relative;
    transform-style:preserve-3d;
}
.project-card::after{
    content:"";position:absolute;inset:0;border-radius:23px;
    background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),var(--green-glow),transparent 40%);
    opacity:0;transition:opacity .4s;pointer-events:none;
}
.project-card:hover::after{opacity:1}
.project-card:hover{
    border-color:rgba(92,255,120,.45);
    box-shadow:var(--shadow-lg);
}
.project-visual{
    height:250px;position:relative;
    display:grid;place-items:center;overflow:hidden;
}
.project-visual::before{
    content:"";position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:30px 30px;
}
.rubika{background:radial-gradient(circle,#195d2c,#08100b 65%)}
.self-rubika{background:radial-gradient(circle,#164b29,#070d09 65%)}
.splus{background:radial-gradient(circle,#245b32,#080e0a 65%)}
.project-orb{
    width:170px;height:170px;position:absolute;border-radius:50%;
    border:1px solid rgba(100,255,120,.2);
    box-shadow:0 0 70px rgba(80,255,100,.1);
    animation:pulseOrb 4s ease-in-out infinite;
}
@keyframes pulseOrb{50%{transform:scale(1.15);opacity:.5}}
.project-logo{
    position:relative;z-index:2;font-size:75px;font-weight:900;
    color:var(--green);text-shadow:0 0 50px rgba(80,255,100,.25);
    transition:transform .5s var(--ease);
}
.project-card:hover .project-logo{transform:scale(1.1) rotate(-5deg)}
.project-index{
    position:absolute;top:18px;left:20px;
    color:rgba(255,255,255,.5);font-size:9px;
    font-family:"JetBrains Mono",monospace;
}
.project-body{padding:25px}
.project-category{
    color:var(--green);font-size:8px;letter-spacing:1.5px;
    font-family:"JetBrains Mono",monospace;font-weight:700;
}
.project-body h3{margin:8px 0;font-size:22px}
.project-body p{color:var(--muted);font-size:11px;line-height:2}
.project-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:17px}
.project-tags span{
    padding:5px 9px;border-radius:7px;background:var(--bg2);
    color:var(--muted);font-size:8px;font-weight:600;
    font-family:"JetBrains Mono",monospace;
}
.project-footer{
    margin:0 25px;padding:15px 0;
    border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
}
.project-footer span{
    color:var(--muted);font-size:8px;letter-spacing:1px;
    font-family:"JetBrains Mono",monospace;
}
.project-footer b{color:var(--green);font-size:20px;transition:transform .3s var(--ease)}
.project-card:hover .project-footer b{transform:translate(-5px,-5px)}

/* JOURNEY */
.journey-header{margin-bottom:60px}
.timeline{max-width:850px;margin:auto;position:relative}
.timeline::before{
    content:"";position:absolute;top:0;bottom:0;right:24px;
    width:1px;background:var(--line);
}
.timeline-item{
    display:grid;grid-template-columns:50px 1fr;
    gap:30px;position:relative;padding-bottom:55px;
}
.timeline-dot{
    width:50px;height:50px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:50%;
    background:var(--card);color:var(--green);font-size:10px;
    font-family:"JetBrains Mono",monospace;font-weight:700;
    position:relative;z-index:2;transition:all .4s var(--ease);
}
.timeline-item:hover .timeline-dot{
    border-color:var(--green);
    box-shadow:0 0 30px var(--green-glow);transform:scale(1.1);
}
.timeline-item div:last-child{padding-top:4px}
.timeline-item div:last-child>span{
    color:var(--green);font-size:8px;letter-spacing:2px;
    font-family:"JetBrains Mono",monospace;font-weight:700;
}
.timeline-item h3{font-size:22px;margin:5px 0}
.timeline-item p{color:var(--muted);font-size:11px;line-height:1.9}
.timeline-item.future .timeline-dot{
    border-color:var(--green);box-shadow:0 0 30px var(--green-glow);
}

/* CONTACT */
.contact-box{
    min-height:540px;padding:70px;position:relative;
    overflow:hidden;border:1px solid var(--line);
    border-radius:30px;
    background:
        radial-gradient(circle at 80% 30%,var(--green-glow),transparent 35%),
        var(--card);
}
.contact-decoration{
    position:absolute;width:500px;height:500px;
    border:1px solid rgba(90,255,120,.08);
    border-radius:50%;left:-180px;bottom:-250px;
    animation:rotateCircle 40s linear infinite;
}
.contact-small{
    color:var(--green);font-size:9px;letter-spacing:2px;
    font-family:"JetBrains Mono",monospace;font-weight:700;
}
.contact-box h2{
    margin-top:20px;font-size:clamp(48px,7vw,95px);
    line-height:1.1;letter-spacing:-5px;font-weight:500;
}
.contact-box h2 span{color:var(--green);font-weight:900}
.contact-box>p{
    max-width:550px;color:var(--muted);font-size:13px;
    margin:25px 0 35px;line-height:2;
}
.contact-buttons{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:10px;max-width:700px;
}
.contact-button{
    display:flex;align-items:center;gap:13px;
    padding:15px;border:1px solid var(--line);
    border-radius:15px;background:rgba(255,255,255,.02);
    transition:all .35s var(--ease);
    position:relative;overflow:hidden;
}
.contact-button:hover{
    border-color:var(--green);transform:translateY(-5px);
    box-shadow:0 15px 40px rgba(0,0,0,.2);
}
.contact-icon{
    width:42px;height:42px;display:grid;place-items:center;
    border-radius:12px;background:var(--green-glow);
    color:var(--green);flex-shrink:0;
    transition:transform .35s var(--ease);
}
.contact-button:hover .contact-icon{transform:scale(1.1) rotate(-8deg)}
.contact-button div:nth-child(2){display:flex;flex-direction:column}
.contact-button small{
    color:var(--muted);font-size:7px;letter-spacing:1px;
    font-family:"JetBrains Mono",monospace;
}
.contact-button strong{font-size:12px}
.contact-button>span{
    margin-right:auto;color:var(--green);
    transition:transform .3s var(--ease);
}
.contact-button:hover>span{transform:translate(-3px,-3px)}

/* FOOTER */
footer{
    width:min(1200px,calc(100% - 35px));
    margin:auto;padding:35px 0 45px;
    border-top:1px solid var(--line);
    display:grid;grid-template-columns:1fr 1fr 1fr;
    align-items:center;gap:20px;
}
.footer-logo{
    font-size:18px;font-weight:900;
    display:flex;align-items:center;gap:8px;
}
.footer-logo span{
    display:inline-grid;place-items:center;
    width:30px;height:30px;border-radius:9px;
    background:var(--green);color:#061008;font-size:15px;
}
.footer-center{text-align:center;color:var(--muted);font-size:10px}
.footer-center b{
    color:var(--green);display:inline-block;
    animation:heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat{
    0%,100%{transform:scale(1)}
    30%{transform:scale(1.25)}
}
.footer-right{
    text-align:left;color:var(--muted);font-size:10px;
    font-family:"JetBrains Mono",monospace;
}

/* BACK TO TOP */
.back-to-top{
    position:fixed;bottom:30px;left:30px;
    width:48px;height:48px;border-radius:14px;
    background:var(--green);color:#061008;font-size:20px;
    font-weight:900;display:grid;place-items:center;
    box-shadow:0 10px 30px rgba(50,220,80,.3);
    opacity:0;visibility:hidden;transform:translateY(20px);
    transition:all .4s var(--ease);z-index:40;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-5px) scale(1.05)}

/* TOAST */
.toast{
    position:fixed;bottom:30px;right:30px;
    padding:14px 20px;background:var(--card);
    border:1px solid var(--green);border-radius:12px;
    color:var(--text);font-size:12px;
    box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(20px);
    transition:all .4s var(--ease);z-index:60;
    display:flex;align-items:center;gap:10px;
}
.toast::before{
    content:"●";color:var(--green);
    animation:pulse 1.5s infinite;
}
.toast.show{opacity:1;visibility:visible;transform:translateY(0)}

/* REVEAL */
.reveal{
    opacity:0;transform:translateY(35px);
    transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* =========================================
   RESPONSIVE
========================================= */
@media (min-width:1400px){
    .header,.hero,.section,footer{width:min(1350px,calc(100% - 70px))}
    .hero{min-height:800px}
    .hero h1{font-size:100px}
    .code-card{width:470px}
    .project-visual{height:280px}
}

@media (min-width:1800px){
    .header,.hero,.section,footer{width:min(1500px,calc(100% - 100px))}
    .hero h1{font-size:110px}
    .section{padding-top:160px;padding-bottom:160px}
}

@media (max-width:1200px){
    .header,.hero,.section,footer{width:calc(100% - 50px)}
    .hero{gap:25px}
    .hero h1{font-size:clamp(55px,7vw,82px)}
    .skills-grid{grid-template-columns:repeat(2,1fr)}
    .project-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1024px){
    .header{padding:0 12px 0 18px}
    .hero{grid-template-columns:1fr;min-height:auto;padding-top:80px}
    .hero-content{max-width:800px}
    .hero-art{height:530px;margin-top:20px}
    .about-layout{grid-template-columns:1fr;gap:60px}
    .about-title h2{font-size:110px}
    .contact-box{padding:55px}
}

@media (max-width:768px){
    .header,.hero,.section,footer{width:calc(100% - 30px)}
    .header{
        top:8px;margin-top:8px;height:64px;
        border-radius:16px;padding:0 10px 0 16px;
    }
    nav{
        position:fixed;top:80px;right:15px;left:15px;
        flex-direction:column;align-items:stretch;
        gap:4px;padding:15px;
        background:color-mix(in srgb,var(--bg) 95%,transparent);
        backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
        border:1px solid var(--line);border-radius:18px;
        box-shadow:var(--shadow-lg);
        opacity:0;visibility:hidden;transform:translateY(-15px);
        transition:all .35s var(--ease);
        max-height:calc(100vh - 100px);overflow-y:auto;
    }
    nav.open{opacity:1;visibility:visible;transform:translateY(0)}
    nav a{padding:12px 16px;font-size:14px}
    nav a.active::after{display:none}
    nav a.active{background:var(--green-glow);color:var(--green)}
    .menu-button{display:grid}
    .theme-button,.menu-button{width:40px;height:40px}
    .logo{font-size:17px}
    .hero{padding-top:65px;padding-bottom:60px}
    .hero h1{font-size:clamp(48px,11vw,72px);letter-spacing:-4px}
    .hero-content>p{font-size:13px;max-width:100%}
    .hero-buttons{width:100%}
    .button{flex:1;text-align:center;justify-content:center}
    .hero-meta{gap:30px;margin-top:40px}
    .hero-art{height:430px}
    .code-card{width:min(90%,390px);min-height:320px}
    .circle-one{width:390px;height:390px}
    .circle-two{width:290px;height:290px}
    .floating-tag{font-size:9px;padding:9px 11px}
    .section{padding:90px 0}
    .about-title h2{font-size:clamp(80px,20vw,120px)}
    .about-text .large{font-size:20px}
    .skills-grid{grid-template-columns:1fr 1fr;gap:10px}
    .project-grid{grid-template-columns:1fr}
    .projects-header{display:block}
    .projects-header p{margin-top:20px}
    .contact-box{padding:45px 30px;border-radius:24px}
    .contact-box h2{font-size:clamp(48px,11vw,80px)}
    .contact-buttons{grid-template-columns:1fr}
    .back-to-top{width:44px;height:44px;bottom:20px;left:20px}
    .toast{right:20px;bottom:20px;left:20px;font-size:11px}
}

@media (max-width:600px){
    .header,.hero,.section,footer{width:calc(100% - 22px)}
    .header{height:60px;padding:0 9px 0 13px;border-radius:15px}
    .logo-box{width:34px;height:34px;border-radius:9px}
    .theme-button,.menu-button{width:38px;height:38px;border-radius:10px}
    .hero{padding-top:55px}
    .status{font-size:9px;padding:7px 12px}
    .hero h1{font-size:clamp(43px,14vw,64px);letter-spacing:-3px}
    .hero-content>p{font-size:12px;line-height:2;margin-top:22px}
    .hero-buttons{flex-direction:column}
    .button{width:100%;flex:none}
    .hero-meta{justify-content:space-between;gap:10px;margin-top:35px}
    .hero-meta strong{font-size:20px}
    .hero-meta .label{font-size:8px}
    .hero-art{height:390px;margin-top:10px}
    .code-card{width:94%;min-height:285px;border-radius:17px;transform:none!important}
    .code{padding:22px 16px;font-size:clamp(8px,2.5vw,11px);line-height:2}
    .code-top{height:42px}
    .circle-one{width:330px;height:330px}
    .circle-two{width:245px;height:245px}
    .floating-tag{font-size:8px;padding:8px 9px}
    .tag-one{top:5%;right:0}
    .tag-two{bottom:15%;left:0}
    .tag-three{bottom:2%;right:3%}
    .section{padding:75px 0}
    .section-top{font-size:8px;margin-bottom:35px}
    .skills-title h2,
    .projects-header h2,
    .journey-header h2{font-size:clamp(38px,11vw,60px);letter-spacing:-3px}
    .skills-grid{grid-template-columns:1fr}
    .skill-card{min-height:210px}
    .project-visual{height:220px}
    .project-body{padding:21px}
    .project-footer{margin:0 21px}
    .timeline::before{right:20px}
    .timeline-item{grid-template-columns:42px 1fr;gap:20px;padding-bottom:40px}
    .timeline-dot{width:42px;height:42px;font-size:8px}
    .timeline-item h3{font-size:18px}
    .timeline-item p{font-size:10px;line-height:2}
    .contact-box{padding:38px 20px;border-radius:22px}
    .contact-box h2{font-size:clamp(43px,13vw,65px);letter-spacing:-3px}
    .contact-box>p{font-size:11px;line-height:2}
    .contact-button{padding:12px}
    .contact-icon{width:38px;height:38px}
    footer{padding:30px 0 35px;grid-template-columns:1fr;text-align:center;gap:12px}
    .footer-logo{justify-content:center}
    .footer-right{text-align:center}
}

@media (max-width:380px){
    .header,.hero,.section,footer{width:calc(100% - 16px)}
    .hero h1{font-size:42px;letter-spacing:-2px}
    .hero-meta{gap:7px}
    .hero-meta strong{font-size:17px}
    .hero-meta .label{font-size:7px}
    .hero-art{height:350px}
    .code-card{min-height:250px}
    .code{font-size:7px;padding:18px 12px}
    .circle-one{width:290px;height:290px}
    .circle-two{width:215px;height:215px}
    .floating-tag{transform:scale(.85)}
    .about-title h2{font-size:80px}
    .contact-box h2{font-size:42px}
}

@media (max-height:500px) and (orientation:landscape){
    .header{position:relative}
    .hero{min-height:auto;padding-top:50px}
    .hero-art{height:400px}
    .section{padding:70px 0}
}

@media (hover:none){
    .cursor-glow{display:none}
    .project-card:hover,.skill-card:hover,.code-card:hover{transform:none}
    .blob{animation:none}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
    .blob{animation:none}
    .reveal{opacity:1;transform:none}
}

[data-theme="light"] .code-card{background:#101611;color:#fff}
[data-theme="light"] .code .white{color:#fff}
[data-theme="light"] .code-top{color:#8b988f}
[data-theme="light"] .floating-tag{background:rgba(255,255,255,.92)}
[data-theme="light"] .hero-grid{
    background-image:
        linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);
}
[data-theme="light"] .project-logo{text-shadow:0 0 50px rgba(80,255,100,.35)}
[data-theme="light"] .header{box-shadow:0 4px 20px rgba(10,40,20,.06)}

/* نوار پیشرفت اسکرول در RTL از راست پر می‌شود */
.scroll-progress{right:auto;left:0}

/* اضافه: مدیریت عکس در کارت پروژه */
.project-logo-img{
    position:relative;
    z-index:2;
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:20px;
    border:2px solid rgba(92,255,120,.3);
    box-shadow:0 0 50px rgba(80,255,100,.25);
    transition:transform .5s var(--ease);
    background:#0a100c;
}
.project-card:hover .project-logo-img{
    transform:scale(1.1) rotate(-3deg);
}

/* آیکون عکس در مهارت */
.skill-icon-img{
    margin-top:35px;
    width:44px;
    height:44px;
    object-fit:cover;
    border-radius:12px;
    border:1px solid rgba(92,255,120,.25);
}

/* اسکرول‌بار پنل */
.adm-body::-webkit-scrollbar{width:6px}