/*
Theme Name: Rifat Cyber Portfolio
Theme URI: https://rifatexe143.com/
Author: Rifat ExE
Author URI: https://rifatexe143.com/
Description: Cyber portfolio theme with boot screen, glass UI, live GitHub projects, and background phonk music. Built for Rifat ExE.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: rifat-cyber
Tags: dark, portfolio, one-column, custom-background
*/


:root{
--bg:#000;
--white:#fff;
--text:#f5f5f5;
--muted:#777;
--muted2:#555;
--line:rgba(255,255,255,.09);
--line2:rgba(255,255,255,.22);
--glass:rgba(10,10,10,.72);
--glass2:rgba(255,255,255,.035);
--radius:22px;
--container:1180px;
--shadow:0 25px 80px rgba(0,0,0,.8);
--ease:.35s cubic-bezier(.2,.8,.2,1);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

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

body{
width:100%;
max-width:100%;
min-height:100vh;
background:#000;
color:var(--text);
font-family:"Inter",sans-serif;
line-height:1.6;
overflow-x:hidden;
overscroll-behavior-x:none;
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

body.booting{
overflow:hidden;
}

a{
color:inherit;
text-decoration:none;
}

button,input,textarea,select{
font:inherit;
}

input,textarea{
font-size:16px!important;
}

button{
cursor:pointer;
}

img{
max-width:100%;
}

::selection{
background:#fff;
color:#000;
}

.boot{
position:fixed;
inset:0;
z-index:999999;
background:#000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
transition:opacity 1s ease,visibility 1s ease;
}

.boot.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.boot-bg{
position:absolute;
inset:0;
background:
radial-gradient(circle at center,rgba(255,255,255,.09),transparent 27%),
radial-gradient(circle at 20% 80%,rgba(255,255,255,.035),transparent 30%),
#000;
}

.boot-grid{
position:absolute;
inset:-30%;
opacity:.5;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:55px 55px;
transform:perspective(700px) rotateX(62deg) translateY(18%);
transform-origin:center bottom;
animation:gridBoot 7s linear infinite;
}

@keyframes gridBoot{
to{background-position:0 55px}
}

.boot-scan{
position:absolute;
left:0;
right:0;
top:-5%;
height:2px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
box-shadow:0 0 20px rgba(255,255,255,.4);
opacity:.4;
animation:scanBoot 4s linear infinite;
}

@keyframes scanBoot{
to{transform:translateY(110vh)}
}

.boot-noise{
position:absolute;
inset:0;
opacity:.025;
background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,#fff 3px);
animation:noise .15s steps(2) infinite;
pointer-events:none;
}

@keyframes noise{
to{transform:translateY(4px)}
}

.boot-vignette{
position:absolute;
inset:0;
background:radial-gradient(circle,transparent 0,transparent 42%,rgba(0,0,0,.85) 100%);
pointer-events:none;
}

.boot-corner{
position:absolute;
z-index:5;
font-family:"JetBrains Mono",monospace;
font-size:8px;
letter-spacing:1.5px;
color:#444;
}

.boot-corner::before{
content:"";
display:inline-block;
width:5px;
height:5px;
border:1px solid #555;
margin-right:7px;
transform:rotate(45deg);
}

.bt1{top:25px;left:25px}
.bt2{top:25px;right:25px}
.bt3{bottom:25px;left:25px}
.bt4{bottom:25px;right:25px}

.boot-center{
position:relative;
z-index:10;
width:min(92vw,620px);
text-align:center;
}

.boot-hud{
position:relative;
width:220px;
height:220px;
margin:auto;
display:grid;
place-items:center;
}

.hud{
position:absolute;
inset:0;
border-radius:50%;
}

.hud1{
border:1px solid rgba(255,255,255,.18);
animation:rotate 8s linear infinite;
}

.hud2{
inset:15px;
border:1px dashed rgba(255,255,255,.25);
animation:rotateReverse 12s linear infinite;
}

.hud3{
inset:32px;
border:1px solid rgba(255,255,255,.1);
animation:rotate 5s linear infinite;
}

.hud4{
inset:45px;
border:1px solid rgba(255,255,255,.06);
box-shadow:0 0 40px rgba(255,255,255,.05);
animation:hudPulse 2s ease-in-out infinite;
}

@keyframes rotate{
to{transform:rotate(360deg)}
}

@keyframes rotateReverse{
to{transform:rotate(-360deg)}
}

@keyframes hudPulse{
50%{transform:scale(1.06);opacity:.45}
}

.hud1::before,
.hud1::after,
.hud2::before,
.hud2::after{
content:"";
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:#fff;
box-shadow:0 0 18px #fff;
}

.hud1::before{top:-4px;left:50%}
.hud1::after{bottom:-4px;right:25%}
.hud2::before{left:-4px;top:50%}
.hud2::after{right:-4px;top:25%}

.radar{
position:absolute;
inset:52px;
border-radius:50%;
overflow:hidden;
background:repeating-radial-gradient(circle,transparent 0 15px,rgba(255,255,255,.06) 16px 17px);
}

.radar::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:50%;
height:1px;
transform-origin:left center;
background:linear-gradient(90deg,rgba(255,255,255,.8),transparent);
box-shadow:0 0 12px #fff;
animation:radar 2s linear infinite;
}

@keyframes radar{
to{transform:rotate(360deg)}
}

.radar-dot{
position:absolute;
width:4px;
height:4px;
border-radius:50%;
background:#fff;
box-shadow:0 0 12px #fff;
animation:dotPulse 1.5s infinite;
}

.radar-dot:nth-child(1){left:32%;top:35%}
.radar-dot:nth-child(2){left:68%;top:55%;animation-delay:.4s}
.radar-dot:nth-child(3){left:42%;top:72%;animation-delay:.8s}

@keyframes dotPulse{
50%{opacity:.2;transform:scale(.5)}
}

.boot-core{
position:relative;
width:105px;
height:105px;
border:1px solid rgba(255,255,255,.5);
border-radius:50%;
display:grid;
place-items:center;
background:radial-gradient(circle,rgba(255,255,255,.1),rgba(0,0,0,.96) 67%);
box-shadow:0 0 35px rgba(255,255,255,.12),inset 0 0 35px rgba(255,255,255,.05);
}

.boot-core::before{
content:"";
position:absolute;
inset:-8px;
border:1px solid rgba(255,255,255,.08);
border-radius:50%;
}

.core-line{
position:absolute;
width:100%;
height:1px;
background:#fff;
box-shadow:0 0 15px #fff;
animation:coreScan 1.7s linear infinite;
}

@keyframes coreScan{
from{transform:translateY(-48px);opacity:0}
30%{opacity:1}
to{transform:translateY(48px);opacity:0}
}

.core-text{
font-family:"JetBrains Mono",monospace;
font-weight:700;
font-size:23px;
letter-spacing:3px;
text-shadow:0 0 15px #fff;
}

.boot-logo{
margin-top:20px;
font-family:"Space Grotesk",sans-serif;
font-size:clamp(44px,9vw,76px);
font-weight:800;
letter-spacing:-5px;
line-height:1;
}

.boot-logo span{
color:#555;
}

.boot-sub{
margin-top:12px;
font-family:"JetBrains Mono",monospace;
font-size:9px;
letter-spacing:2px;
color:#666;
}

.boot-terminal{
height:105px;
margin:25px auto 16px;
width:min(100%,460px);
padding:13px 15px;
text-align:left;
overflow:hidden;
border:1px solid var(--line);
border-radius:13px;
background:rgba(0,0,0,.75);
font-family:"JetBrains Mono",monospace;
font-size:9px;
line-height:1.8;
color:#666;
}

.boot-terminal .line{
white-space:nowrap;
overflow:hidden;
animation:terminalIn .3s ease both;
}

.boot-terminal .line::before{
content:"> ";
color:#fff;
}

@keyframes terminalIn{
from{opacity:0;transform:translateX(-10px)}
to{opacity:1;transform:none}
}

.progress-info{
display:flex;
justify-content:space-between;
font-family:"JetBrains Mono",monospace;
font-size:9px;
color:#555;
margin-bottom:7px;
}

.progress{
height:4px;
border-radius:99px;
background:rgba(255,255,255,.07);
overflow:hidden;
}

.progress-bar{
width:0;
height:100%;
background:#fff;
box-shadow:0 0 10px #fff,0 0 25px rgba(255,255,255,.5);
transition:width .1s linear;
}

.progress-segments{
display:grid;
grid-template-columns:repeat(20,1fr);
gap:3px;
margin-top:7px;
}

.progress-segments span{
height:2px;
background:rgba(255,255,255,.08);
transition:background .15s ease;
}

.progress-segments span.active{
background:#fff;
box-shadow:0 0 5px rgba(255,255,255,.5);
}

.online{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:15px;
font-family:"JetBrains Mono",monospace;
font-size:9px;
letter-spacing:2px;
color:#777;
opacity:0;
transform:translateY(8px);
transition:.5s ease;
}

.online.show{
opacity:1;
transform:none;
}

.online i{
font-size:6px;
color:#fff;
text-shadow:0 0 10px #fff;
animation:pulse 1s infinite;
}

@keyframes pulse{
50%{opacity:.3}
}

.boot-actions{
display:flex;
justify-content:center;
gap:8px;
margin-top:17px;
}

.boot-btn{
padding:8px 13px;
border:1px solid var(--line);
border-radius:9px;
background:rgba(255,255,255,.025);
color:#666;
font-family:"JetBrains Mono",monospace;
font-size:8px;
letter-spacing:1px;
transition:.3s ease;
}

.boot-btn:hover{
color:#fff;
border-color:var(--line2);
background:rgba(255,255,255,.07);
transform:translateY(-2px);
}

.cyber-bg,
.grid-bg,
.stars,
.particles,
.scanline,
.mouse-glow{
position:fixed;
inset:0;
pointer-events:none;
}

.cyber-bg{
z-index:-10;
overflow:hidden;
background:
radial-gradient(circle at 50% -20%,rgba(255,255,255,.08),transparent 30%),
#000;
}

.cyber-bg::before,
.cyber-bg::after{
content:"";
position:absolute;
width:45vw;
height:45vw;
border-radius:50%;
filter:blur(100px);
background:rgba(255,255,255,.07);
animation:floatGlow 14s ease-in-out infinite alternate;
}

.cyber-bg::before{
left:-15vw;
top:10vh;
}

.cyber-bg::after{
right:-15vw;
bottom:-10vh;
animation-delay:-7s;
}

@keyframes floatGlow{
50%{
transform:translate3d(12%,-8%,0) scale(1.2);
opacity:.8;
}
}

.grid-bg{
z-index:-9;
opacity:.7;
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:60px 60px;
mask-image:radial-gradient(circle,black,transparent 78%);
-webkit-mask-image:radial-gradient(circle,black,transparent 78%);
animation:gridMove 16s linear infinite;
}

@keyframes gridMove{
to{background-position:60px 60px}
}

.stars{
z-index:-8;
overflow:hidden;
}

.star{
position:absolute;
width:2px;
height:2px;
border-radius:50%;
background:#fff;
box-shadow:0 0 8px #fff;
animation:twinkle var(--duration) ease-in-out infinite alternate;
}

@keyframes twinkle{
to{opacity:.8;transform:scale(1.5)}
}

.particles{
z-index:-7;
overflow:hidden;
}

.particle{
position:absolute;
border-radius:50%;
background:#fff;
box-shadow:0 0 15px #fff;
animation:particleFloat linear infinite;
}

@keyframes particleFloat{
0%{transform:translateY(110vh);opacity:0}
50%{opacity:.7}
100%{transform:translateY(-15vh) translateX(100px);opacity:0}
}

.scanline{
z-index:20;
height:2px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
opacity:.18;
animation:scan 8s linear infinite;
}

@keyframes scan{
to{transform:translateY(105vh)}
}

.mouse-glow{
z-index:-1;
width:450px;
height:450px;
inset:auto;
border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.08),transparent 68%);
transform:translate(-50%,-50%);
}

nav{
position:fixed;
inset:0 0 auto;
height:76px;
z-index:100;
display:flex;
align-items:center;
background:rgba(0,0,0,.72);
border-bottom:1px solid var(--line);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}

.nav-inner{
width:min(calc(100% - 36px),var(--container));
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
}

.brand{
font-family:"Space Grotesk",sans-serif;
font-size:22px;
font-weight:800;
letter-spacing:-.8px;
}

.brand span{
color:#777;
}

.nav-links{
display:flex;
align-items:center;
gap:26px;
color:#aaa;
font-size:13px;
font-weight:600;
}

.nav-links a{
transition:.3s ease;
}

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

.nav-github{
display:flex;
align-items:center;
gap:8px;
padding:10px 16px;
border:1px solid var(--line2);
border-radius:999px;
background:rgba(255,255,255,.035);
}

.nav-github:hover{
background:#fff;
color:#000!important;
transform:translateY(-2px);
}

.mobile-menu{
display:none;
width:42px;
height:42px;
border:1px solid var(--line);
border-radius:12px;
background:rgba(255,255,255,.03);
color:#fff;
}

.container{
width:min(calc(100% - 36px),var(--container));
margin:auto;
}

section{
padding:110px 0;
position:relative;
}

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding:140px 0 90px;
}

.hero-grid{
display:grid;
grid-template-columns:1fr;
gap:40px;
align-items:center;
max-width:780px;
}
.hero-content{width:100%;}

.eyebrow{
display:inline-flex;
align-items:center;
gap:9px;
padding:8px 13px;
border:1px solid var(--line);
border-radius:999px;
background:rgba(255,255,255,.025);
color:#bbb;
font-family:"JetBrains Mono",monospace;
font-size:11px;
}

.status-dot{
width:7px;
height:7px;
border-radius:50%;
background:#fff;
box-shadow:0 0 12px #fff;
animation:pulse 1.6s infinite;
}

.hero h1{
margin-top:24px;
font-family:"Space Grotesk",sans-serif;
font-size:clamp(60px,9vw,120px);
line-height:.88;
letter-spacing:-6px;
}

.hero h1 span{
color:#666;
}

.hero-description{
margin-top:30px;
max-width:620px;
color:#999;
font-size:18px;
line-height:1.8;
}

.typing-text{
color:#fff;
}

.cursor{
display:inline-block;
width:9px;
height:1em;
margin-left:4px;
background:#fff;
animation:blink .8s step-end infinite;
}

@keyframes blink{
50%{opacity:0}
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:34px;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 21px;
border:1px solid transparent;
border-radius:13px;
font-size:14px;
font-weight:700;
transition:var(--ease);
}

.btn-primary{
background:#fff;
color:#000;
}

.btn-primary:hover{
transform:translateY(-4px);
box-shadow:0 15px 40px rgba(255,255,255,.2);
}

.btn-outline{
color:#fff;
border-color:var(--line2);
background:rgba(255,255,255,.025);
}

.btn-outline:hover{
transform:translateY(-4px);
background:rgba(255,255,255,.08);
}

.profile-wrap{
display:flex;
justify-content:center;
position:relative;
}

.orbit{
position:absolute;
width:420px;
height:420px;
border:1px solid rgba(255,255,255,.08);
border-radius:50%;
animation:rotate 16s linear infinite;
}

.orbit-two{
position:absolute;
width:500px;
height:250px;
border:1px solid rgba(255,255,255,.06);
border-radius:50%;
transform:rotate(55deg);
animation:orbitReverse 22s linear infinite;
}

@keyframes orbitReverse{
to{transform:rotate(-305deg)}
}

.profile-card{
position:relative;
width:min(100%,370px);
padding:15px;
border:1px solid var(--line2);
border-radius:30px;
background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.01));
box-shadow:var(--shadow);
transform:rotate(2deg);
transition:transform .2s ease;
overflow:hidden;
z-index:2;
}

.profile-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
transparent 25%,
rgba(255,255,255,.08) 50%,
transparent 75%
);
transform:translateX(-100%);
transition:.8s ease;
}

.profile-card:hover::before{
transform:translateX(100%);
}

.profile-image{
position:relative;
z-index:1;
width:100%;
aspect-ratio:1;
display:block;
object-fit:cover;
border-radius:22px;
background:#111;
}

.profile-bottom{
position:relative;
z-index:1;
padding:20px 8px 6px;
display:flex;
align-items:center;
justify-content:space-between;
}

.profile-bottom strong{
font-family:"Space Grotesk",sans-serif;
font-size:19px;
}

.profile-bottom small{
display:block;
margin-top:3px;
color:#777;
}

.verified{
width:35px;
height:35px;
display:grid;
place-items:center;
border:1px solid var(--line2);
border-radius:50%;
}

.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:25px;
margin-bottom:45px;
}

.section-kicker{
color:#666;
font-family:"JetBrains Mono",monospace;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:9px;
}

.section-title{
font-family:"Space Grotesk",sans-serif;
font-size:clamp(36px,5vw,60px);
line-height:1;
letter-spacing:-3px;
}

.section-description{
max-width:450px;
color:#777;
font-size:14px;
}

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.stat{
position:relative;
padding:24px;
border:1px solid var(--line);
border-radius:18px;
background:var(--glass);
transition:var(--ease);
overflow:hidden;
}

.stat::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
background:linear-gradient(90deg,transparent,#fff,transparent);
transform:scaleX(0);
transition:.4s ease;
}

.stat:hover{
transform:translateY(-8px);
border-color:var(--line2);
}

.stat:hover::after{
transform:scaleX(1);
}

.stat strong{
display:block;
font-family:"Space Grotesk",sans-serif;
font-size:31px;
}

.stat span{
color:#666;
font-size:11px;
text-transform:uppercase;
letter-spacing:1px;
}

.about-grid{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:16px;
}

.about-main{
position:relative;
min-height:390px;
padding:40px;
border:1px solid var(--line);
border-radius:26px;
background:
radial-gradient(circle at 90% 10%,rgba(255,255,255,.07),transparent 30%),
linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
overflow:hidden;
}

.about-main::before{
content:"";
position:absolute;
width:180px;
height:180px;
right:-70px;
bottom:-70px;
border:1px solid rgba(255,255,255,.08);
border-radius:50%;
box-shadow:
0 0 0 25px rgba(255,255,255,.015),
0 0 0 50px rgba(255,255,255,.01);
}

.about-number{
font-family:"JetBrains Mono",monospace;
color:#555;
font-size:11px;
letter-spacing:3px;
margin-bottom:25px;
}

.about-main h3{
max-width:650px;
font-family:"Space Grotesk",sans-serif;
font-size:clamp(32px,5vw,55px);
line-height:1;
letter-spacing:-2.5px;
margin-bottom:25px;
}

.about-main h3 span{
color:#666;
}

.about-main p{
position:relative;
z-index:1;
max-width:720px;
color:#777;
font-size:14px;
line-height:1.9;
margin-bottom:15px;
}

.about-main strong{
color:#fff;
}

.about-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:28px;
}

.about-tags span{
padding:7px 10px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(255,255,255,.025);
color:#777;
font-family:"JetBrains Mono",monospace;
font-size:8px;
letter-spacing:1px;
transition:.3s ease;
}

.about-tags span:hover{
color:#fff;
border-color:var(--line2);
transform:translateY(-3px);
}

.about-side{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.about-card{
min-height:185px;
padding:24px;
display:flex;
flex-direction:column;
justify-content:space-between;
border:1px solid var(--line);
border-radius:20px;
background:var(--glass);
transition:var(--ease);
}

.about-card:hover{
transform:translateY(-7px);
border-color:var(--line2);
background:rgba(255,255,255,.05);
}

.about-card i{
font-size:23px;
}

.about-card small{
display:block;
margin-bottom:6px;
color:#555;
font-family:"JetBrains Mono",monospace;
font-size:8px;
letter-spacing:1.5px;
}

.about-card strong{
font-family:"Space Grotesk",sans-serif;
font-size:14px;
}

.dashboard{
display:grid;
grid-template-columns:1.4fr .6fr;
gap:14px;
}

.dashboard-main,
.dashboard-side{
border:1px solid var(--line);
border-radius:24px;
background:var(--glass);
overflow:hidden;
}

.dashboard-main{
padding:28px;
}

.dash-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}

.dash-title{
font-family:"Space Grotesk",sans-serif;
font-size:20px;
}

.live{
font-family:"JetBrains Mono",monospace;
font-size:9px;
color:#777;
}

.live i{
font-size:6px;
color:#fff;
margin-right:6px;
animation:pulse 1s infinite;
}

.bars{
height:180px;
display:flex;
align-items:flex-end;
gap:10px;
padding:10px 0;
}

.bar{
flex:1;
min-height:15px;
border:1px solid rgba(255,255,255,.1);
background:linear-gradient(to top,rgba(255,255,255,.03),rgba(255,255,255,.15));
border-radius:6px 6px 2px 2px;
animation:barPulse 2s ease-in-out infinite alternate;
}

.bar:nth-child(1){height:38%}
.bar:nth-child(2){height:60%;animation-delay:.1s}
.bar:nth-child(3){height:45%;animation-delay:.2s}
.bar:nth-child(4){height:75%;animation-delay:.3s}
.bar:nth-child(5){height:52%;animation-delay:.4s}
.bar:nth-child(6){height:90%;animation-delay:.5s}
.bar:nth-child(7){height:67%;animation-delay:.6s}
.bar:nth-child(8){height:82%;animation-delay:.7s}
.bar:nth-child(9){height:58%;animation-delay:.8s}
.bar:nth-child(10){height:94%;animation-delay:.9s}
.bar:nth-child(11){height:72%;animation-delay:1s}
.bar:nth-child(12){height:87%;animation-delay:1.1s}

@keyframes barPulse{
to{opacity:.55;transform:scaleY(.85)}
}

.dash-labels{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}

.dash-mini{
padding:14px;
border:1px solid var(--line);
border-radius:13px;
}

.dash-mini small{
display:block;
color:#555;
font-family:"JetBrains Mono",monospace;
font-size:8px;
margin-bottom:5px;
}

.dash-mini strong{
font-family:"Space Grotesk",sans-serif;
font-size:18px;
}

.dashboard-side{
padding:24px;
display:flex;
flex-direction:column;
gap:12px;
}

.node{
padding:15px;
border:1px solid var(--line);
border-radius:14px;
background:rgba(255,255,255,.02);
}

.node-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
}

.node-name{
font-family:"JetBrains Mono",monospace;
font-size:9px;
color:#777;
}

.node-status{
font-size:8px;
color:#aaa;
}

.node-line{
height:3px;
background:rgba(255,255,255,.07);
border-radius:99px;
overflow:hidden;
}

.node-line span{
display:block;
height:100%;
width:var(--width);
background:#fff;
box-shadow:0 0 10px #fff;
}

.services{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.service{
position:relative;
min-height:250px;
padding:28px;
border:1px solid var(--line);
border-radius:22px;
background:
linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.008));
overflow:hidden;
transition:var(--ease);
}

.service:hover{
transform:translateY(-9px);
border-color:var(--line2);
box-shadow:var(--shadow);
}

.service-number{
position:absolute;
right:20px;
top:18px;
font-family:"JetBrains Mono",monospace;
font-size:9px;
color:#444;
}

.service-icon{
width:52px;
height:52px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:15px;
margin-bottom:25px;
background:rgba(255,255,255,.035);
}

.service-icon i{
font-size:20px;
}

.service h3{
font-family:"Space Grotesk",sans-serif;
font-size:20px;
margin-bottom:9px;
}

.service p{
color:#666;
font-size:12px;
line-height:1.8;
}

.project-tools{
display:flex;
gap:10px;
margin-bottom:28px;
}

.search-box{
flex:1;
position:relative;
}

.search-box i{
position:absolute;
top:50%;
left:16px;
transform:translateY(-50%);
color:#666;
}

.search-box input{
width:100%;
padding:14px 18px 14px 45px;
border:1px solid var(--line);
border-radius:13px;
outline:none;
background:rgba(5,5,5,.8);
color:#fff;
}

.project-count{
display:flex;
align-items:center;
justify-content:center;
min-width:130px;
padding:0 17px;
border:1px solid var(--line);
border-radius:13px;
color:#888;
font-family:"JetBrains Mono",monospace;
font-size:12px;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.project{
position:relative;
display:flex;
flex-direction:column;
min-height:270px;
padding:25px;
border:1px solid var(--line);
border-radius:var(--radius);
background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.008));
overflow:hidden;
transition:.3s ease;
}

.project::after{
content:"";
position:absolute;
width:100%;
height:1px;
left:0;
top:0;
background:linear-gradient(90deg,transparent,#fff,transparent);
transform:scaleX(0);
transition:.4s ease;
}

.project:hover{
transform:translateY(-9px);
border-color:var(--line2);
box-shadow:var(--shadow);
}

.project:hover::after{
transform:scaleX(1);
}

.project-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:25px;
}

.repo-icon{
width:44px;
height:44px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:13px;
background:rgba(255,255,255,.04);
}

.repo-link{
color:#777;
}

.repo-link:hover{
color:#fff;
}

.project h3{
font-family:"Space Grotesk",sans-serif;
font-size:22px;
margin-bottom:10px;
word-break:break-word;
}

.project p{
color:#777;
font-size:13px;
line-height:1.7;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.project-bottom{
margin-top:auto;
padding-top:25px;
display:flex;
align-items:center;
justify-content:space-between;
}

.language{
display:flex;
align-items:center;
gap:7px;
color:#aaa;
font-size:12px;
}

.language-dot{
width:8px;
height:8px;
border-radius:50%;
background:#fff;
box-shadow:0 0 10px rgba(255,255,255,.6);
}

.stars-count{
color:#777;
font-size:12px;
}

.loading{
grid-column:1/-1;
min-height:200px;
display:grid;
place-items:center;
color:#666;
text-align:center;
}
.focus-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.focus-card{
padding:30px;
border:1px solid var(--line);
border-radius:22px;
background:var(--glass);
transition:.3s ease;
}

.focus-card:hover{
border-color:var(--line2);
transform:translateY(-6px);
}

.focus-card h3{
font-family:"Space Grotesk",sans-serif;
font-size:24px;
margin-bottom:20px;
}

.focus-list{
display:flex;
flex-direction:column;
gap:12px;
}

.focus-item{
display:flex;
align-items:center;
gap:12px;
padding:12px;
border:1px solid var(--line);
border-radius:12px;
color:#888;
font-size:12px;
}

.focus-item i{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:8px;
background:rgba(255,255,255,.04);
color:#fff;
}

.focus-item strong{
color:#ddd;
}
.timeline{
position:relative;
max-width:900px;
margin:auto;
}

.timeline::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:1px;
background:linear-gradient(
to bottom,
transparent,
rgba(255,255,255,.2),
transparent
);
}

.timeline-item{
position:relative;
width:50%;
padding:0 40px 45px;
}

.timeline-item:nth-child(odd){
left:0;
text-align:right;
}

.timeline-item:nth-child(even){
left:50%;
}

.timeline-dot{
position:absolute;
top:5px;
width:11px;
height:11px;
border:2px solid #000;
border-radius:50%;
background:#fff;
box-shadow:0 0 15px #fff;
}

.timeline-item:nth-child(odd) .timeline-dot{
right:-6px;
}

.timeline-item:nth-child(even) .timeline-dot{
left:-5px;
}

.timeline-year{
font-family:"JetBrains Mono",monospace;
font-size:10px;
letter-spacing:2px;
color:#555;
margin-bottom:8px;
}

.timeline-item h3{
font-family:"Space Grotesk",sans-serif;
font-size:21px;
margin-bottom:8px;
}

.timeline-item p{
color:#666;
font-size:12px;
line-height:1.8;
}
.skills{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.skill{
position:relative;
padding:24px;
border:1px solid var(--line);
border-radius:18px;
background:var(--glass);
transition:var(--ease);
}

.skill:hover{
transform:translateY(-8px);
border-color:var(--line2);
}

.skill i{
font-size:24px;
margin-bottom:17px;
}

.skill h3{
font-size:16px;
margin-bottom:5px;
}

.skill p{
color:#666;
font-size:12px;
}

.stack-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
}

.stack-item{
min-height:120px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
border:1px solid var(--line);
border-radius:17px;
background:var(--glass);
transition:.3s ease;
}

.stack-item:hover{
transform:translateY(-6px);
border-color:var(--line2);
background:rgba(255,255,255,.05);
}

.stack-item i{
font-size:26px;
}

.stack-item span{
font-family:"JetBrains Mono",monospace;
font-size:8px;
color:#666;
letter-spacing:1px;
}

.philosophy{
padding:55px;
border:1px solid var(--line);
border-radius:28px;
background:
radial-gradient(circle at center,rgba(255,255,255,.06),transparent 45%),
linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
text-align:center;
overflow:hidden;
}

.philosophy small{
font-family:"JetBrains Mono",monospace;
font-size:9px;
color:#555;
letter-spacing:3px;
}

.philosophy h2{
margin:18px auto;
max-width:800px;
font-family:"Space Grotesk",sans-serif;
font-size:clamp(35px,6vw,65px);
line-height:1;
letter-spacing:-3px;
}

.philosophy h2 span{
color:#666;
}

.philosophy p{
max-width:650px;
margin:auto;
color:#666;
font-size:13px;
line-height:1.9;
}

.contact-grid{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:45px;
}

.contact-info{
display:flex;
flex-direction:column;
gap:12px;
}

.contact-card{
display:flex;
align-items:center;
gap:16px;
padding:17px;
border:1px solid var(--line);
border-radius:16px;
background:var(--glass);
transition:var(--ease);
}

.contact-card:hover{
transform:translateX(7px);
border-color:var(--line2);
}

.contact-icon{
width:43px;
height:43px;
flex-shrink:0;
display:grid;
place-items:center;
border-radius:12px;
background:rgba(255,255,255,.05);
}

.contact-card small{
display:block;
color:#555;
font-family:"JetBrains Mono",monospace;
font-size:10px;
text-transform:uppercase;
letter-spacing:1px;
}

.contact-card strong{
display:block;
font-size:13px;
word-break:break-word;
}

.contact-form{
padding:28px;
border:1px solid var(--line);
border-radius:22px;
background:var(--glass);
}

.form-group{
margin-bottom:13px;
}

.form-group label{
display:block;
margin-bottom:7px;
color:#777;
font-size:11px;
}

.form-group input,
.form-group textarea{
width:100%;
padding:13px 14px;
border:1px solid var(--line);
border-radius:12px;
outline:none;
background:#050505;
color:#fff;
transition:.3s ease;
}

.form-group input:focus,
.form-group textarea:focus{
border-color:rgba(255,255,255,.35);
box-shadow:0 0 0 3px rgba(255,255,255,.03);
}

.form-group textarea{
min-height:130px;
resize:vertical;
}

footer{
padding:35px 0;
border-top:1px solid var(--line);
color:#555;
font-size:12px;
}

.footer-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.footer-social{
display:flex;
gap:10px;
}

.footer-social a{
width:36px;
height:36px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:10px;
transition:.3s ease;
}

.footer-social a:hover{
background:#fff;
color:#000;
transform:translateY(-5px) rotate(8deg);
}

.reveal{
opacity:0;
transform:translateY(45px) scale(.98);
filter:blur(8px);
transition:
opacity .9s ease,
transform .9s cubic-bezier(.2,.8,.2,1),
filter .9s ease;
}

.reveal.show{
opacity:1;
transform:none;
filter:blur(0);
}

/* =========================================================
DEV FLOW (added)
========================================================= */

.flow{
position:relative;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:0;
}

.flow::before{
content:"";
position:absolute;
left:8%;
right:8%;
top:42px;
height:1px;
background:linear-gradient(90deg,transparent,#333,#fff,#333,transparent);
}

.flow-step{
position:relative;
z-index:1;
text-align:center;
}

.flow-node{
width:84px;
height:84px;
margin:auto;
display:grid;
place-items:center;
border:1px solid var(--line2);
border-radius:50%;
background:#030303;
box-shadow:0 0 0 8px rgba(255,255,255,.015);
font-family:"JetBrains Mono",monospace;
font-size:11px;
transition:.35s ease;
}

.flow-step:hover .flow-node{
background:#fff;
color:#000;
box-shadow:0 0 35px rgba(255,255,255,.15);
transform:scale(1.08);
}

.flow-step h3{
margin-top:18px;
font-family:"Space Grotesk",sans-serif;
font-size:15px;
}

.flow-step p{
margin:6px auto 0;
max-width:150px;
color:#555;
font-size:10px;
}

@media(max-width:800px){

.flow{
grid-template-columns:1fr;
gap:25px;
}

.flow::before{
left:50%;
top:42px;
bottom:42px;
width:1px;
height:auto;
}

}

/* =========================================================
TERMINAL (added)
========================================================= */

.terminal-window{
border:1px solid var(--line2);
border-radius:20px;
overflow:hidden;
background:#030303;
box-shadow:var(--shadow);
}

.terminal-head{
height:45px;
display:flex;
align-items:center;
gap:7px;
padding:0 16px;
border-bottom:1px solid var(--line);
}

.terminal-head span{
width:7px;
height:7px;
border-radius:50%;
background:#444;
}

.terminal-title{
margin-left:8px;
font-family:"JetBrains Mono",monospace;
font-size:8px;
color:#555;
}

.terminal-body{
padding:22px;
min-height:300px;
font-family:"JetBrains Mono",monospace;
font-size:11px;
line-height:2;
color:#777;
}

.term-line{
white-space:pre-wrap;
}

.term-prompt{
color:#fff;
}

.term-dim{
color:#444;
}

.term-cursor{
display:inline-block;
width:7px;
height:14px;
background:#fff;
vertical-align:-2px;
animation:blink .8s step-end infinite;
}

.terminal-input{
display:flex;
gap:8px;
align-items:center;
margin-top:5px;
}

.terminal-input input{
flex:1;
border:0;
outline:0;
background:transparent;
color:#fff;
font-family:"JetBrains Mono",monospace;
font-size:11px!important;
}

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

@media(max-width:1050px){

.stack-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:950px){

.hero-grid{
grid-template-columns:1fr;
text-align:center;
}

.hero-description{
margin-left:auto;
margin-right:auto;
}

.hero-buttons{
justify-content:center;
}

.profile-wrap{
order:-1;
}

.profile-card{
width:min(290px,75vw);
}

.orbit{
width:340px;
height:340px;
}

.orbit-two{
width:400px;
height:200px;
}

.projects-grid,
.skills{
grid-template-columns:repeat(2,1fr);
}

.contact-grid{
grid-template-columns:1fr;
}

.about-grid{
grid-template-columns:1fr;
}

.dashboard{
grid-template-columns:1fr;
}

.services{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:700px){

html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

.container,
.nav-inner{
width:min(calc(100% - 26px),var(--container));
}

nav{
height:68px;
}

.nav-links{
position:absolute;
top:68px;
left:13px;
right:13px;
display:none;
flex-direction:column;
align-items:stretch;
gap:0;
padding:10px;
background:rgba(3,3,3,.97);
border:1px solid var(--line);
border-radius:16px;
box-shadow:var(--shadow);
}

.nav-links.active{
display:flex;
}

.nav-links a{
padding:13px;
border-radius:10px;
}

.nav-github{
justify-content:center;
margin-top:5px;
}

.mobile-menu{
display:grid;
place-items:center;
}

.hero{
min-height:auto;
padding:125px 0 70px;
}

.hero h1{
font-size:clamp(52px,17vw,78px);
letter-spacing:-4px;
}

section{
padding:85px 0;
}

.section-head{
display:block;
}

.section-description{
margin-top:15px;
}

.stats{
grid-template-columns:repeat(2,1fr);
}

.projects-grid{
grid-template-columns:1fr;
}

.contact-form{
padding:20px;
}

.footer-inner{
flex-direction:column;
text-align:center;
}

.mouse-glow{
display:none;
}

.profile-card{
transform:none!important;
transition:none;
}

.profile-card:hover{
transform:none!important;
}

.services{
grid-template-columns:1fr;
}

.focus-grid{
grid-template-columns:1fr;
}

.stack-grid{
grid-template-columns:repeat(2,1fr);
}

.dashboard-main{
padding:20px;
}

.dash-labels{
grid-template-columns:repeat(2,1fr);
}

.timeline::before{
left:8px;
}

.timeline-item,
.timeline-item:nth-child(even),
.timeline-item:nth-child(odd){
width:100%;
left:0;
padding-left:35px;
padding-right:0;
text-align:left;
}

.timeline-item .timeline-dot,
.timeline-item:nth-child(odd) .timeline-dot,
.timeline-item:nth-child(even) .timeline-dot{
left:3px;
right:auto;
}

.philosophy{
padding:35px 22px;
}

}

@media(max-width:430px){

.hero-buttons .btn{
width:100%;
}

.skills{
grid-template-columns:1fr;
}

.project-tools{
flex-direction:column;
}

.project-count{
height:44px;
}

.orbit{
width:280px;
height:280px;
}

.orbit-two{
width:330px;
height:160px;
}

.boot-hud{
width:175px;
height:175px;
}

.boot-core{
width:85px;
height:85px;
}

.boot-logo{
font-size:48px;
}

.boot-terminal{
height:88px;
font-size:8px;
}

.boot-corner{
font-size:6px;
}

.bt1,
.bt2{
top:15px;
}

.bt3,
.bt4{
bottom:15px;
}

.bt1,
.bt3{
left:12px;
}

.bt2,
.bt4{
right:12px;
}

.about-side{
grid-template-columns:1fr;
}

.stack-grid{
grid-template-columns:repeat(2,1fr);
}

.bars{
gap:5px;
}

.bar:nth-child(n+9){
display:none;
}

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
}

}

/* Music toggle */
.music-toggle{
position:fixed;
bottom:22px;
right:22px;
z-index:1000;
width:52px;
height:52px;
border-radius:50%;
border:1px solid var(--line2);
background:rgba(0,0,0,.75);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
color:#fff;
display:grid;
place-items:center;
font-size:18px;
box-shadow:0 10px 30px rgba(0,0,0,.5);
transition:.3s ease;
}
.music-toggle:hover{
transform:scale(1.08);
background:#fff;
color:#000;
}
.music-toggle.playing{
border-color:rgba(255,255,255,.45);
box-shadow:0 0 20px rgba(255,255,255,.2);
}
.music-toggle.playing i{
animation:musicPulse 1s ease-in-out infinite;
}
@keyframes musicPulse{
50%{transform:scale(1.15);opacity:.7}
}
#ytMusic{
position:fixed;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
bottom:0;
left:0;
border:0;
}