:root{
    --bg:#03060c;
    --bg-soft:#060b16;
    --panel:#0a1220;
    --panel-2:#0d1729;
    --border:#16233a;
    --border-hi:#26406b;
    --text:#e7edf7;
    --muted:#8090ac;
    --muted-dim:#586882;
    --accent:#2f6fff;
    --accent-2:#00d4ff;
    --accent-soft:rgba(47,111,255,0.12);
    --font-display:'Space Grotesk', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --font-body:'Inter', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
line-height:1.6;
overflow-x:hidden;
}
#particle-canvas{
position:fixed;
top:0;left:0;
width:100%;height:100%;
z-index:0;
pointer-events:none;
}
.bg-grid{
position:fixed;
inset:0;
z-index:0;
background-image:
linear-gradient(rgba(47,111,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(47,111,255,0.045) 1px, transparent 1px);
background-size:48px 48px;
mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 0%, transparent 75%);
pointer-events:none;
}
.content{
position:relative;
z-index:1;
}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;text-decoration:none;}
.wrap{
max-width:1080px;
margin:0 auto;
padding:0 32px;
}
/* ---------- nav ---------- */
nav{
position:fixed;
top:0;left:0;right:0;
z-index:50;
backdrop-filter:blur(14px);
background:rgba(3,6,12,0.72);
border-bottom:1px solid var(--border);
}
nav .wrap{
display:flex;
align-items:center;
justify-content:space-between;
height:64px;
}
.logo{
font-family:var(--font-mono);
font-size:15px;
font-weight:600;
color:var(--text);
display:flex;
align-items:center;
gap:8px;
}
.logo .dot{
width:7px;height:7px;border-radius:50%;
background:var(--accent-2);
box-shadow:0 0 8px var(--accent-2);
}
.nav-links{
display:flex;
gap:36px;
font-family:var(--font-mono);
font-size:13px;
color:var(--muted);
}
.nav-links a{
position:relative;
transition:color .2s;
}
.nav-links a:hover{color:var(--accent-2);}
.nav-links a::before{
content:'./';
color:var(--muted-dim);
}
@media (max-width:700px){ .nav-links{display:none;} }
/* ---------- hero ---------- */
header.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
padding-top:64px;
position:relative;
}
.eyebrow{
font-family:var(--font-mono);
font-size:13px;
color:var(--accent-2);
letter-spacing:.04em;
display:flex;
align-items:center;
gap:10px;
margin-bottom:22px;
}
.eyebrow .bracket{color:var(--muted-dim);}
.cursor-blink{
display:inline-block;
width:8px;height:16px;
background:var(--accent-2);
animation:blink 1s step-end infinite;
vertical-align:middle;
}
@keyframes blink{50%{opacity:0;}}
h1.title{
font-family:var(--font-display);
font-weight:700;
font-size:clamp(38px, 7vw, 76px);
line-height:1.04;
letter-spacing:-.01em;
max-width:820px;
}
h1.title .name-line{display:block;}
h1.title .accent-text{
background:linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.hero-role{
font-family:var(--font-mono);
font-size:clamp(14px,2vw,18px);
color:var(--muted);
margin-top:22px;
max-width:640px;
}
.hero-role .pipe{color:var(--border-hi);margin:0 10px;}
.hero-summary{
margin-top:26px;
max-width:560px;
color:var(--muted);
font-size:15.5px;
}
.hero-cta{
margin-top:40px;
display:flex;
gap:16px;
flex-wrap:wrap;
}
.btn{
font-family:var(--font-mono);
font-size:13.5px;
padding:13px 26px;
border-radius:6px;
border:1px solid var(--border-hi);
transition:all .2s ease;
display:inline-flex;
align-items:center;
gap:8px;
}
.btn-primary{
background:var(--accent);
border-color:var(--accent);
color:#fff;
box-shadow:0 0 0 0 rgba(47,111,255,0.5);
}
.btn-primary:hover{
background:var(--accent-2);
border-color:var(--accent-2);
box-shadow:0 0 24px rgba(0,212,255,0.35);
transform:translateY(-1px);
}
.btn-ghost{
color:var(--text);
background:rgba(255,255,255,0.02);
}
.btn-ghost:hover{
border-color:var(--accent-2);
color:var(--accent-2);
}
.hero-meta{
position:absolute;
bottom:40px;
left:32px;
right:32px;
max-width:1080px;
margin:0 auto;
display:flex;
justify-content:space-between;
font-family:var(--font-mono);
font-size:11.5px;
color:var(--muted-dim);
}
@media (max-width:700px){ .hero-meta{display:none;} }
/* ---------- section shell ---------- */
section{
padding:120px 0;
position:relative;
border-top:1px solid var(--border);
}
.sec-head{
display:flex;
align-items:baseline;
gap:16px;
margin-bottom:52px;
}
.sec-num{
font-family:var(--font-mono);
font-size:13px;
color:var(--accent-2);
}
.sec-title{
font-family:var(--font-display);
font-size:clamp(26px,4vw,36px);
font-weight:600;
}
.sec-line{
flex:1;
height:1px;
background:linear-gradient(90deg, var(--border-hi), transparent);
}
/* ---------- about ---------- */
.about-grid{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:60px;
}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }
.about-text p{
color:var(--muted);
font-size:16px;
margin-bottom:18px;
}
.about-text strong{color:var(--text);font-weight:500;}
.stat-box{
border:1px solid var(--border);
border-radius:8px;
padding:20px;
background:var(--panel);
margin-bottom:14px;
}
.stat-box .k{
font-family:var(--font-mono);
font-size:11px;
color:var(--muted-dim);
text-transform:uppercase;
letter-spacing:.06em;
}
.stat-box .v{
font-family:var(--font-display);
font-size:22px;
margin-top:6px;
color:var(--accent-2);
}
/* ---------- skills (config-file style) ---------- */
.config-panel{
background:var(--panel);
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
}
.config-panel .titlebar{
display:flex;
align-items:center;
gap:8px;
padding:12px 18px;
border-bottom:1px solid var(--border);
font-family:var(--font-mono);
font-size:12px;
color:var(--muted-dim);
}
.titlebar .tdot{width:9px;height:9px;border-radius:50%;background:var(--border-hi);}
.config-body{
padding:28px 32px;
font-family:var(--font-mono);
font-size:14.5px;
}
.config-row{
display:grid;
grid-template-columns:160px 1fr;
gap:18px;
padding:9px 0;
border-bottom:1px dashed var(--border);
align-items:baseline;
}
.config-row:last-child{border-bottom:none;}
.config-key{color:var(--accent-2);}
.config-val{color:var(--muted);}
.config-val .item{
color:var(--text);
background:rgba(47,111,255,0.1);
border:1px solid rgba(47,111,255,0.25);
border-radius:4px;
padding:2px 8px;
margin:2px 6px 2px 0;
display:inline-block;
font-size:13px;
}
@media (max-width:600px){
.config-row{grid-template-columns:1fr;gap:4px;}
}
/* ---------- experience ---------- */
.exp-item{
display:grid;
grid-template-columns:200px 1fr;
gap:32px;
padding:32px 0;
border-bottom:1px solid var(--border);
}
.exp-item:first-child{padding-top:0;}
.exp-item:last-child{border-bottom:none;}
@media (max-width:700px){ .exp-item{grid-template-columns:1fr;gap:10px;} }
.exp-period{
font-family:var(--font-mono);
font-size:12.5px;
color:var(--muted-dim);
}
.exp-role{
font-family:var(--font-display);
font-size:19px;
font-weight:600;
color:var(--text);
}
.exp-org{
font-family:var(--font-mono);
font-size:13px;
color:var(--accent-2);
margin-top:4px;
margin-bottom:14px;
}
.exp-bullets{list-style:none;}
.exp-bullets li{
color:var(--muted);
font-size:14.5px;
padding-left:18px;
position:relative;
margin-bottom:8px;
}
.exp-bullets li::before{
content:'▹';
position:absolute;left:0;
color:var(--accent);
}
/* ---------- featured project ---------- */
.featured{
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
border:1px solid var(--border-hi);
border-radius:12px;
overflow:hidden;
background:linear-gradient(160deg, var(--panel-2), var(--panel));
}
@media (max-width:820px){ .featured{grid-template-columns:1fr;} }
.featured-visual{
position:relative;
min-height:260px;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at 30% 20%, rgba(0,212,255,0.15), transparent 55%),
radial-gradient(circle at 80% 80%, rgba(47,111,255,0.18), transparent 55%);
border-right:1px solid var(--border);
}
@media (max-width:820px){ .featured-visual{border-right:none;border-bottom:1px solid var(--border);} }
.featured-visual .glyph{
font-family:var(--font-display);
font-size:110px;
font-weight:700;
color:transparent;
-webkit-text-stroke:1.5px rgba(0,212,255,0.4);
}
.featured-body{
padding:44px;
}
.featured-tag{
font-family:var(--font-mono);
font-size:12px;
color:var(--accent-2);
margin-bottom:14px;
display:block;
}
.featured-body h3{
font-family:var(--font-display);
font-size:26px;
margin-bottom:14px;
}
.featured-body p{
color:var(--muted);
font-size:14.5px;
margin-bottom:20px;
}
.tech-tags{
display:flex;flex-wrap:wrap;gap:8px;
margin-bottom:26px;
}
.tech-tags span{
font-family:var(--font-mono);
font-size:11.5px;
color:var(--muted);
border:1px solid var(--border-hi);
padding:4px 10px;
border-radius:20px;
}
/* ---------- projects grid ---------- */
.proj-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:24px;
}
@media (max-width:700px){ .proj-grid{grid-template-columns:1fr;} }
.proj-card{
border:1px solid var(--border);
border-radius:10px;
padding:28px;
background:var(--panel);
transition:border-color .25s, transform .25s;
display:flex;
flex-direction:column;
min-height:200px;
}
.proj-card:hover{
border-color:var(--accent-2);
transform:translateY(-3px);
}
.proj-card .proj-index{
font-family:var(--font-mono);
font-size:11.5px;
color:var(--muted-dim);
margin-bottom:14px;
}
.proj-card h4{
font-family:var(--font-display);
font-size:19px;
margin-bottom:10px;
}
.proj-card p{
color:var(--muted);
font-size:14px;
flex:1;
}
.proj-card .proj-link{
margin-top:18px;
font-family:var(--font-mono);
font-size:12.5px;
color:var(--accent-2);
display:inline-flex;
align-items:center;
gap:6px;
}
.proj-card .proj-link svg{width:12px;height:12px;}
/* ---------- contact ---------- */
.contact-section{
text-align:center;
padding-bottom:100px;
}
.contact-section .sec-head{justify-content:center;}
.contact-section h2.big{
font-family:var(--font-display);
font-size:clamp(30px,5.5vw,52px);
font-weight:700;
max-width:640px;
margin:0 auto 26px;
}
.contact-section .accent-text{
background:linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact-links{
display:flex;
gap:16px;
justify-content:center;
flex-wrap:wrap;
margin-top:36px;
}
footer{
border-top:1px solid var(--border);
padding:28px 0;
}
footer .wrap{
display:flex;
justify-content:space-between;
font-family:var(--font-mono);
font-size:12px;
color:var(--muted-dim);
}
@media (max-width:600px){ footer .wrap{flex-direction:column;gap:8px;text-align:center;} }
/* reveal on scroll */
.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
.reveal{opacity:1;transform:none;transition:none;}
.cursor-blink{animation:none;}
}
:focus-visible{
outline:2px solid var(--accent-2);
outline-offset:3px;
}