/* ══════════════════════════════════════
DESIGN TOKENS
══════════════════════════════════════ */
:root {
--bg: #020408;
--bg2: #040810;
--bg3: #060d18;
--cyan: #39FF14;
--cyan2: #00FF66;
--purple: #7b2fff;
--pink: #ff2d7a;
--green: #00ff88;
--text: #dde8f5;
--muted: #4a5568;
--muted2: #8899aa;
--glass: rgba(57,255,20,0.04);
--glass-b: rgba(57,255,20,0.12);
--glow: rgba(57,255,20,0.2);
--f-display:'Exo 2',sans-serif;
--f-body: 'Rajdhani',sans-serif;
--f-mono: 'Share Tech Mono',monospace;
--r: 10px;
--r-sm: 6px;
--ease: cubic-bezier(0.4,0,0.2,1);
--spring: cubic-bezier(0.34,1.56,0.64,1);
}
/* ══════════════════════════════════════
RESET
══════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:80px}
body{
background:var(--bg);
color:var(--text);
font-family:var(--f-body);
overflow-x:hidden;
cursor:none;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
strong{color:var(--cyan)}
em{
font-style:normal;
background:linear-gradient(135deg,var(--cyan),var(--purple));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:2px}
/* ══════════════════════════════════════
BOOT SCREEN
══════════════════════════════════════ */
#boot-screen{
position:fixed;inset:0;
background:var(--bg);
z-index:9999;
display:flex;align-items:center;justify-content:center;
transition:opacity .8s ease,visibility .8s ease;
}
#boot-screen.done{opacity:0;visibility:hidden;pointer-events:none}
#boot-canvas{position:absolute;inset:0;width:100%;height:100%}
.boot-ui{
position:relative;z-index:2;
text-align:center;width:360px;
}
.boot-hex{
width:80px;height:80px;
margin:0 auto 28px;
animation:hex-spin 8s linear infinite;
filter:drop-shadow(0 0 12px var(--cyan));
}
@keyframes hex-spin{to{transform:rotate(360deg)}}
.boot-lines{
font-family:var(--f-mono);font-size:11px;
color:var(--muted2);
margin-bottom:24px;
height:130px;overflow:hidden;
text-align:left;
padding:0 8px;
}
.boot-line-item{
line-height:2;
animation:fade-in-line .25s ease both;
}
.boot-line-item.ok::before{content:'[OK] ';color:var(--green)}
.boot-line-item.warn::before{content:'[>>] ';color:var(--cyan)}
.boot-line-item.init::before{content:'[..] ';color:var(--muted2)}
@keyframes fade-in-line{
from{opacity:0;transform:translateX(-10px)}
to{opacity:1;transform:translateX(0)}
}
.boot-bar-wrap{
display:flex;align-items:center;gap:14px;
justify-content:center;margin-bottom:16px;
}
.boot-bar{
flex:1;max-width:260px;height:2px;
background:rgba(57,255,20,.1);
border-radius:1px;overflow:hidden;
}
.boot-fill{
height:100%;width:0%;
background:linear-gradient(90deg,var(--cyan),var(--cyan2));
border-radius:1px;
}
.boot-pct{
font-family:var(--f-mono);font-size:12px;
color:var(--cyan);min-width:40px;text-align:left;
}
.boot-skip{
font-family:var(--f-mono);font-size:10px;
letter-spacing:3px;color:var(--muted);
animation:blink-op 1.4s ease-in-out infinite;
cursor:pointer;margin-top:4px;
}
.boot-skip:hover{color:var(--cyan)}
@keyframes blink-op{0%,100%{opacity:.25}50%{opacity:.85}}
/* ══════════════════════════════════════
CUSTOM CURSOR
══════════════════════════════════════ */
#cur-dot{
position:fixed;width:8px;height:8px;
background:var(--cyan);border-radius:50%;
pointer-events:none;z-index:9990;
transform:translate(-50%,-50%);
box-shadow:0 0 10px var(--cyan);
transition:width .2s,height .2s,background .2s,box-shadow .2s;
will-change:left,top;
}
#cur-ring{
position:fixed;width:32px;height:32px;
border:1px solid rgba(57,255,20,.5);
border-radius:50%;pointer-events:none;z-index:9989;
transform:translate(-50%,-50%);
transition:width .25s,height .25s,border-color .25s;
will-change:left,top;
}
body.cur-hover #cur-dot{width:14px;height:14px;background:var(--cyan2);box-shadow:0 0 18px var(--cyan2)}
body.cur-hover #cur-ring{width:50px;height:50px;border-color:rgba(57,255,20,.8)}
/* ══════════════════════════════════════
SCROLL PROGRESS BAR
══════════════════════════════════════ */
#scroll-prog{
position:fixed;top:0;left:0;height:2px;width:0%;
background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
z-index:8000;
box-shadow:0 0 8px var(--cyan);
transition:width .06s linear;
pointer-events:none;
}
/* ══════════════════════════════════════
NAVIGATION
══════════════════════════════════════ */
#nav{
position:fixed;top:0;left:0;right:0;
display:flex;align-items:center;justify-content:space-between;
padding:20px 60px;z-index:1000;
transition:background .4s ease,padding .4s ease,box-shadow .4s ease;
}
#nav.scrolled{
background:rgba(2,4,8,.95);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
padding:12px 60px;
border-bottom:1px solid rgba(57,255,20,.08);
box-shadow:0 4px 40px rgba(0,0,0,.6);
}
.nav-logo{
font-family:var(--f-display);font-weight:900;font-size:20px;
color:var(--cyan);text-shadow:0 0 20px var(--cyan);
letter-spacing:2px;cursor:pointer;user-select:none;
transition:text-shadow .3s;
}
.nav-logo:hover{text-shadow:0 0 35px var(--cyan),0 0 60px rgba(57,255,20,.4)}
.logo-bracket{color:var(--purple)}
.nav-list{display:flex;gap:4px;list-style:none}
.nav-link{
font-family:var(--f-mono);font-size:11px;letter-spacing:2px;
padding:8px 14px;border-radius:var(--r-sm);
color:var(--muted2);
transition:color .3s,background .3s;
position:relative;
display:block;
}
.nav-link::after{
content:attr(data-label);
font-size:9px;color:var(--cyan);
margin-left:4px;opacity:0;
transition:opacity .3s;
}
.nav-link:hover,.nav-link.active{color:var(--cyan);background:rgba(57,255,20,.07)}
.nav-link:hover::after,.nav-link.active::after{opacity:.7}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-status{
display:flex;align-items:center;gap:8px;
font-family:var(--f-mono);font-size:10px;
letter-spacing:2px;color:var(--green);
}
.status-pulse{
width:7px;height:7px;border-radius:50%;
background:var(--green);
box-shadow:0 0 8px var(--green);
animation:pulse-g 2s ease-in-out infinite;
flex-shrink:0;
}
@keyframes pulse-g{
0%,100%{box-shadow:0 0 6px var(--green)}
50%{box-shadow:0 0 18px var(--green),0 0 32px rgba(0,255,136,.4)}
}
.nav-burger{
display:none;flex-direction:column;gap:5px;
background:none;border:none;cursor:pointer;
padding:4px;
}
.nav-burger span{
display:block;width:22px;height:2px;
background:var(--cyan);border-radius:1px;
transition:transform .3s,opacity .3s;
}
/* ══════════════════════════════════════
HERO SECTION
══════════════════════════════════════ */
#hero{
min-height:100vh;
position:relative;
display:flex;align-items:center;
overflow:hidden;
}
#hero-canvas{
position:absolute;inset:0;
width:100%;height:100%;
z-index:0;pointer-events:none;
}
.hero-body{
position:relative;z-index:2;
max-width:1280px;margin:0 auto;
padding:120px 60px 80px;
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
}
/* ── Hero Text ── */
.hero-text{flex:1;min-width:0}
.hero-badge{
display:inline-flex;align-items:center;gap:10px;
background:rgba(57,255,20,.06);
border:1px solid rgba(57,255,20,.2);
padding:7px 18px;border-radius:100px;
font-family:var(--f-mono);font-size:10px;
letter-spacing:3px;color:var(--cyan);
margin-bottom:28px;
animation:fadeUp .8s ease .4s both;
}
.badge-blink{animation:blink-op .5s steps(1) infinite}
.hero-h1{
font-family:var(--f-display);font-weight:900;
line-height:1;margin-bottom:22px;
}
.h1-line{
display:block;
font-size:clamp(2.4rem,5.5vw,5rem);
color:var(--muted2);letter-spacing:5px;
animation:fadeUp .8s ease .6s both;
}
.h1-name{
display:block;
font-size:clamp(4rem,10vw,9rem) !important;
color:var(--text) !important;
text-shadow:0 0 60px rgba(57,255,20,.25),0 0 120px rgba(57,255,20,.08);
letter-spacing:3px !important;
animation:fadeUp .8s ease .8s both !important;
cursor:default;
}
.hero-role-line{
font-family:var(--f-mono);
font-size:clamp(.95rem,2vw,1.35rem);
color:var(--muted2);
margin-bottom:22px;
animation:fadeUp .8s ease 1s both;
display:flex;align-items:center;gap:8px;
flex-wrap:wrap;
}
.role-pre{color:var(--cyan)}
#typed-output{color:var(--cyan2)}
.typed-cur{color:var(--cyan);animation:blink-op .5s steps(1) infinite}
.hero-sub{
max-width:500px;font-size:1.02rem;line-height:1.9;
color:var(--muted2);margin-bottom:38px;
animation:fadeUp .8s ease 1.2s both;
font-weight:400;
}
.hero-sub em{
-webkit-text-fill-color:unset;
background:none;
color:var(--cyan);
font-style:italic;
}
.hero-ctas{
display:flex;gap:14px;flex-wrap:wrap;
margin-bottom:42px;
animation:fadeUp .8s ease 1.4s both;
}
.cta-primary{
display:inline-flex;align-items:center;gap:10px;
background:linear-gradient(135deg,var(--cyan),var(--purple));
color:#020408;
font-family:var(--f-mono);font-size:12px;
font-weight:700;letter-spacing:3px;
padding:14px 30px;border-radius:var(--r-sm);
position:relative;overflow:hidden;
transition:transform .35s var(--spring),box-shadow .35s;
border:none;cursor:pointer;
}
.cta-primary:hover{
transform:translateY(-3px);
box-shadow:0 0 40px rgba(57,255,20,.5),0 8px 32px rgba(0,0,0,.4);
}
.cta-glare{
position:absolute;inset:0;
background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);
transform:translateX(-150%);
transition:transform .55s ease;
pointer-events:none;
}
.cta-primary:hover .cta-glare{transform:translateX(150%)}
.cta-inner{position:relative;z-index:1}
.cta-ghost{
display:inline-flex;align-items:center;
border:1px solid rgba(57,255,20,.35);
color:var(--cyan);
font-family:var(--f-mono);font-size:12px;
letter-spacing:3px;
padding:14px 30px;border-radius:var(--r-sm);
transition:.35s;background:transparent;
cursor:pointer;
}
.cta-ghost:hover{
background:rgba(57,255,20,.09);
border-color:var(--cyan);
transform:translateY(-3px);
box-shadow:0 0 24px rgba(57,255,20,.2);
}
/* Social chips */
.hero-socials{
display:flex;gap:10px;flex-wrap:wrap;
animation:fadeUp .8s ease 1.6s both;
}
.hsoc{
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
background:rgba(57,255,20,.06);
border:1px solid rgba(57,255,20,.15);
border-radius:var(--r-sm);
color:var(--muted2);
transition:.3s;
}
.hsoc:hover{
border-color:var(--cyan);color:var(--cyan);
background:rgba(57,255,20,.14);
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(57,255,20,.15);
}
.hsoc svg,.hsoc img{width:18px;height:18px}
/* ── Holographic Portrait ── */
.hero-portrait{
flex-shrink:0;
width:380px;height:440px;
position:relative;
animation:fadeUp .8s ease 1.1s both;
}
.holo-ring{
position:absolute;border-radius:50%;
border:1px solid transparent;
top:50%;left:50%;
animation:ring-spin linear infinite;
pointer-events:none;
}
.holo-r1{
width:290px;height:290px;
margin-left:-145px;margin-top:-145px;
border-color:rgba(57,255,20,.18);
animation-duration:14s;
}
.holo-r2{
width:360px;height:360px;
margin-left:-180px;margin-top:-180px;
border-top-color:var(--cyan);
border-right-color:transparent;
border-bottom-color:var(--purple);
border-left-color:transparent;
animation-duration:9s;
animation-direction:reverse;
}
.holo-r3{
width:430px;height:430px;
margin-left:-215px;margin-top:-215px;
border-color:rgba(123,47,255,.12);
animation-duration:22s;
}
@keyframes ring-spin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
.holo-particles{
position:absolute;inset:0;
pointer-events:none;z-index:3;
}
.holo-dot{
position:absolute;border-radius:50%;
width:3px;height:3px;
background:var(--cyan);
box-shadow:0 0 6px var(--cyan);
animation:holo-float linear infinite;
}
@keyframes holo-float{
0%{transform:translate(0,0) scale(1);opacity:.7}
50%{transform:translate(var(--fx,12px),var(--fy,-18px)) scale(1.5);opacity:1}
100%{transform:translate(0,0) scale(1);opacity:.7}
}
.portrait-frame{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:230px;height:275px;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(57,255,20,.35);
box-shadow:
0 0 0 1px rgba(57,255,20,.08),
0 0 50px rgba(57,255,20,.22),
0 0 100px rgba(57,255,20,.08),
inset 0 0 40px rgba(0,0,0,.5);
z-index:4;
will-change:transform;
}
.portrait-img{
width:100%;height:100%;
object-fit:cover;
object-position:center 15%;
display:block;
}
.portrait-scanlines{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:repeating-linear-gradient(
0deg,transparent,transparent 2px,
rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px
);
}
.portrait-overlay{
position:absolute;inset:0;z-index:3;pointer-events:none;
background:linear-gradient(to bottom,transparent 55%,rgba(57,255,20,.1) 100%);
}
.portrait-glitch{
position:absolute;inset:0;z-index:5;pointer-events:none;
opacity:0;mix-blend-mode:screen;
}
.portrait-glitch.glitch-active{
animation:glitch-anim .18s steps(3,end) both;
}
@keyframes glitch-anim{
0%{opacity:1;transform:translate(3px,-1px);clip-path:inset(0 0 80% 0);background:rgba(57,255,20,.3)}
33%{opacity:1;transform:translate(-3px,1px);clip-path:inset(40% 0 35% 0);background:rgba(255,45,122,.25)}
66%{opacity:1;transform:translate(2px,0);clip-path:inset(80% 0 0 0);background:rgba(123,47,255,.3)}
100%{opacity:0}
}
.holo-data{
position:absolute;
bottom:20px;left:50%;transform:translateX(-50%);
display:flex;gap:14px;
font-family:var(--f-mono);font-size:9px;
z-index:6;
background:rgba(2,4,8,.85);
backdrop-filter:blur(10px);
padding:8px 18px;
border-radius:100px;
border:1px solid rgba(57,255,20,.18);
white-space:nowrap;
}
.hd-item{display:flex;gap:6px;align-items:center}
.hd-k{color:var(--muted);letter-spacing:1px}
.hd-v{color:var(--cyan);letter-spacing:1px}
.hd-green{color:var(--green)!important}
/* Scroll hint */
.scroll-hint{
position:absolute;bottom:36px;left:50%;
transform:translateX(-50%);
display:flex;flex-direction:column;
align-items:center;gap:10px;
z-index:3;
animation:fadeUp .8s ease 2.2s both;
}
.sh-arrow{display:flex;flex-direction:column;align-items:center}
.sh-arrow span{
display:block;
width:10px;height:10px;
border-right:1.5px solid rgba(57,255,20,.6);
border-bottom:1.5px solid rgba(57,255,20,.6);
transform:rotate(45deg);
animation:arr-bounce .9s ease-in-out infinite;
}
.sh-arrow span:nth-child(2){
animation-delay:.18s;
margin-top:-5px;
opacity:.5;
}
@keyframes arr-bounce{
0%,100%{opacity:.3;transform:rotate(45deg) translateY(0)}
50%{opacity:1;transform:rotate(45deg) translateY(5px)}
}
.sh-txt{
font-family:var(--f-mono);font-size:9px;
letter-spacing:4px;color:var(--muted);
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}
/* ══════════════════════════════════════
SHARED SECTION STYLES
══════════════════════════════════════ */
.reveal-section{
min-height:100vh;
padding:130px 0 90px;
position:relative;
overflow:hidden;
}
.reveal-section::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse at 50% -5%,rgba(57,255,20,.04) 0%,transparent 65%);
pointer-events:none;
}
.sec-wrap{max-width:1200px;margin:0 auto;padding:0 60px}
.sec-tag{
font-family:var(--f-mono);font-size:11px;
color:var(--cyan);letter-spacing:4px;
margin-bottom:14px;display:block;
opacity:.8;
}
.sec-title{
font-family:var(--f-display);font-weight:900;
font-size:clamp(2rem,4.5vw,3.5rem);
line-height:1.06;margin-bottom:70px;
letter-spacing:2px;
}
/* Glass Card */
.glass{
background:rgba(57,255,20,.04);
border:1px solid rgba(57,255,20,.12);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-radius:var(--r);
transition:border-color .35s ease,box-shadow .35s ease;
}
.glass:hover{
border-color:rgba(57,255,20,.28);
box-shadow:0 0 30px rgba(57,255,20,.08);
}
/* Scroll reveal */
[data-reveal]{
opacity:0;
transform:translateY(38px);
transition:opacity .75s ease,transform .75s ease;
}
[data-reveal].revealed{
opacity:1;
transform:translateY(0);
}
/* ══════════════════════════════════════
ABOUT
══════════════════════════════════════ */
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
margin-bottom:70px;
align-items:start;
}
.about-bio{display:flex;flex-direction:column;gap:18px}
.bio-card{padding:26px 28px;position:relative;overflow:hidden}
.bio-card::before{
content:'';
position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--cyan),transparent);
transform:scaleX(0);
transition:transform .5s ease;
}
.bio-card:hover::before{transform:scaleX(1)}
.bio-card-tag{
font-family:var(--f-mono);font-size:9px;
letter-spacing:3px;color:var(--cyan);
margin-bottom:12px;display:block;
}
.bio-card p{font-size:.95rem;line-height:1.85;color:var(--muted2)}
.about-stats-panel{
display:grid;grid-template-columns:1fr 1fr;
gap:18px;align-content:start;
}
.stat-hex{
background:rgba(57,255,20,.04);
border:1px solid rgba(57,255,20,.12);
border-radius:var(--r);
padding:30px 20px;text-align:center;
position:relative;overflow:hidden;
transition:border-color .3s,transform .3s,box-shadow .3s;
cursor:default;
}
.stat-hex::after{
content:'';
position:absolute;bottom:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--cyan),var(--purple));
transform:scaleX(0);transition:transform .5s ease;
}
.stat-hex:hover::after{transform:scaleX(1)}
.stat-hex:hover{
border-color:rgba(57,255,20,.3);
transform:translateY(-5px);
box-shadow:0 12px 40px rgba(57,255,20,.12);
}
.sh-val{
font-family:var(--f-display);font-size:2.8rem;
font-weight:900;line-height:1;margin-bottom:10px;
background:linear-gradient(135deg,var(--cyan),var(--cyan2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.sh-key{
font-family:var(--f-mono);font-size:9px;
letter-spacing:2px;color:var(--muted2);
text-transform:uppercase;
}
/* Timeline */
.timeline-wrap{margin-top:60px}
.tl-title{
font-family:var(--f-mono);font-size:11px;
letter-spacing:4px;color:var(--cyan);
margin-bottom:40px;opacity:.8;
}
.timeline{
position:relative;
padding-left:50px;
display:flex;flex-direction:column;gap:0;
}
.timeline::before{
content:'';
position:absolute;left:14px;top:8px;
width:1px;
bottom:8px;
background:linear-gradient(to bottom,var(--cyan),var(--purple),transparent);
}
.tl-node{
display:grid;
grid-template-columns:44px auto 1fr;
align-items:start;
gap:16px;
margin-bottom:28px;
position:relative;
}
.tl-yr{
font-family:var(--f-mono);font-size:10px;
color:var(--cyan);letter-spacing:1px;
padding-top:20px;text-align:right;
grid-column:1;
}
.tl-dot-wrap{
position:absolute;left:-36px;top:17px;
}
.tl-dot{
width:13px;height:13px;border-radius:50%;
background:var(--bg);
border:2px solid var(--cyan);
box-shadow:0 0 12px var(--cyan);
transition:.3s;
}
.tl-dot.active{
background:var(--cyan);
animation:pulse-g 2s ease-in-out infinite;
}
.tl-card{
padding:20px 24px;
grid-column:3;
}
.tl-card h4{
font-family:var(--f-mono);font-size:11px;
letter-spacing:2px;color:var(--text);
margin-bottom:8px;
}
.tl-card p{font-size:.88rem;color:var(--muted2);line-height:1.65}
/* ══════════════════════════════════════
CAPABILITIES
══════════════════════════════════════ */
.capabilities-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.cap-card{
padding:28px 24px;
transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;
position:relative;
overflow:hidden;
}
.cap-card:hover{
transform:translateY(-3px);
}
.cap-card-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16px;
}
.cap-card-num{
font-family:var(--f-mono);
font-size:0.6rem;
color:var(--muted);
letter-spacing:1px;
}
.cap-card-status{
font-family:var(--f-mono);
font-size:0.5rem;
color:var(--cyan);
padding:2px 8px;
border:1px solid rgba(57,255,20,.12);
text-transform:uppercase;
letter-spacing:1px;
}
.cap-card-icon{
font-size:1.5rem;
color:var(--cyan);
margin-bottom:14px;
opacity:0.7;
}
.cap-card-title{
font-family:var(--f-display);
font-size:0.95rem;
font-weight:600;
margin-bottom:8px;
letter-spacing:1px;
}
.cap-card-desc{
font-family:var(--f-body);
font-size:.9rem;
color:var(--muted2);
line-height:1.6;
}
/* ══════════════════════════════════════
SKILLS
══════════════════════════════════════ */
.skill-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
gap:16px;
}
.sn{
background:rgba(57,255,20,.04);
border:1px solid rgba(57,255,20,.1);
border-radius:var(--r);
padding:24px 16px 20px;
text-align:center;
transition:border-color .3s,transform .3s var(--spring),box-shadow .3s;
cursor:default;
position:relative;overflow:hidden;
}
.sn:hover{
border-color:rgba(57,255,20,.4);
transform:translateY(-7px) scale(1.03);
box-shadow:0 14px 40px rgba(57,255,20,.15);
}
.sn-img{width:42px;height:42px;margin:0 auto 12px;object-fit:contain}
.sn-name{
display:block;
font-family:var(--f-mono);font-size:11px;
letter-spacing:1px;color:var(--text);
margin-bottom:14px;
}
.sn-bar{
height:2px;background:rgba(255,255,255,.07);
border-radius:1px;overflow:hidden;
}
.sn-fill{
height:100%;width:0%;
border-radius:1px;
background:linear-gradient(90deg,var(--cyan),var(--cyan2));
transition:width 1.6s ease .2s;
}
.sn.revealed .sn-fill{width:var(--pct)}
.sn-spot{
position:absolute;top:-25px;left:50%;
transform:translateX(-50%);
width:70px;height:70px;
background:radial-gradient(circle,rgba(57,255,20,.14),transparent 70%);
pointer-events:none;opacity:0;transition:.3s;
}
.sn:hover .sn-spot{opacity:1}
/* ══════════════════════════════════════
MISSIONS / PROJECTS
══════════════════════════════════════ */
.missions-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.mission-card{
padding:24px;
transition:all .35s ease;
overflow:hidden;
position:relative;
}
.mission-card:hover{
transform:translateY(-3px);
border-color:rgba(57,255,20,.38)!important;
box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(57,255,20,.08);
}
.mission-card-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
}
.mission-status{
display:flex;
align-items:center;
gap:8px;
}
.status-badge{
font-family:var(--f-mono);
font-size:0.5rem;
font-weight:600;
padding:2px 8px;
text-transform:uppercase;
letter-spacing:1px;
}
.status-live{
background:rgba(0,255,136,.1);
color:var(--green);
border:1px solid rgba(0,255,136,.15);
}
.status-dev{
background:rgba(255,193,7,.1);
color:#ffc107;
border:1px solid rgba(255,193,7,.15);
}
.status-tech{
font-family:var(--f-mono);
font-size:0.5rem;
color:var(--muted);
letter-spacing:1px;
}
.mission-num{
font-family:var(--f-mono);
font-size:0.6rem;
color:var(--muted2);
}
.mission-techs{
display:flex;
gap:6px;
margin-bottom:12px;
flex-wrap:wrap;
}
.mission-techs span{
font-family:var(--f-mono);
font-size:9px;letter-spacing:1px;
color:var(--purple);
background:rgba(123,47,255,.1);
border:1px solid rgba(123,47,255,.2);
padding:3px 10px;border-radius:100px;
}
.mission-title{
font-family:var(--f-display);
font-size:1rem;
font-weight:700;letter-spacing:2px;
margin-bottom:8px;
}
.mission-desc{
font-size:.88rem;
color:var(--muted2);
line-height:1.65;
margin-bottom:16px;
}
.mission-actions{
display:flex;
gap:8px;
}
.pl-live,.pl-gh{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--f-mono);font-size:10px;letter-spacing:2px;
padding:9px 16px;border-radius:var(--r-sm);
transition:.3s;
}
.pl-live{
background:rgba(57,255,20,.08);
border:1px solid rgba(57,255,20,.25);
color:var(--cyan);
}
.pl-live:hover{background:rgba(57,255,20,.18);border-color:var(--cyan)}
.pl-dot{
width:6px;height:6px;border-radius:50%;
background:var(--green);
box-shadow:0 0 7px var(--green);
flex-shrink:0;
}
.pl-gh{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);
color:var(--muted2);
}
.pl-gh:hover{border-color:var(--cyan);color:var(--cyan)}
/* ══════════════════════════════════════
METRICS
══════════════════════════════════════ */
.metrics-grid.inner{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;margin-bottom:60px;
}
.metric-card{
padding:36px 20px;text-align:center;
position:relative;overflow:hidden;
}
.metric-card::after{
content:'';
position:absolute;bottom:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--cyan),var(--purple));
transform:scaleX(0);transition:transform .5s ease;
}
.metric-card:hover::after{transform:scaleX(1)}
.metric-card:hover{
border-color:rgba(57,255,20,.3)!important;
transform:translateY(-5px);
}
.mc-icon{font-size:1.8rem;margin-bottom:12px;display:block}
.mc-val{
font-family:var(--f-display);font-size:2.9rem;font-weight:900;
background:linear-gradient(135deg,var(--cyan),var(--cyan2));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;line-height:1;margin-bottom:10px;
display:block;
}
.mc-label{
font-family:var(--f-body);font-size:1rem;
font-weight:600;color:var(--text);margin-bottom:6px;
}
.mc-sub{
font-family:var(--f-mono);font-size:9px;
letter-spacing:2px;color:var(--muted2);
}
/* Profiles panel */
.profiles-panel{margin-top:10px;margin-bottom:50px}
.pp-title{
font-family:var(--f-mono);font-size:10px;
letter-spacing:4px;color:var(--cyan);
margin-bottom:18px;opacity:.8;
}
.pp-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:14px;
}
.pp-card{
display:flex;align-items:center;gap:14px;
padding:18px 20px;transition:.3s;
}
.pp-card:hover{
border-color:rgba(57,255,20,.35)!important;
transform:translateX(6px);
}
.pp-card div{flex:1;min-width:0}
.pp-card strong{display:block;font-size:.92rem;color:var(--text);margin-bottom:2px}
.pp-card span{font-family:var(--f-mono);font-size:10px;color:var(--muted2)}
.pp-arr{font-size:1rem;color:var(--cyan);transition:.3s;flex-shrink:0}
.pp-card:hover .pp-arr{transform:translate(3px,-3px)}
/* Testimonials */
.testimonials-section{margin-bottom:0}
.testimonials-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}
.testimonial-card{
padding:24px;
transition:all .35s ease;
}
.testimonial-card:hover{
transform:translateY(-3px);
border-color:rgba(57,255,20,.28)!important;
box-shadow:0 0 30px rgba(57,255,20,.08);
}
.testimonial-stars{
color:#ffc107;
font-size:0.7rem;
margin-bottom:12px;
letter-spacing:2px;
}
.testimonial-text{
font-size:.88rem;
color:var(--muted2);
line-height:1.75;
margin-bottom:16px;
font-style:italic;
}
.testimonial-author{
display:flex;
align-items:center;
gap:12px;
}
.testimonial-avatar{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--cyan),var(--purple));
color:#020408;
font-family:var(--f-mono);font-size:0.7rem;
font-weight:700;flex-shrink:0;border-radius:50%;
}
.testimonial-name{
font-family:var(--f-mono);font-size:0.75rem;font-weight:600;
}
.testimonial-role{
font-family:var(--f-mono);
font-size:0.62rem;
color:var(--muted2);
}
/* ══════════════════════════════════════
CONTACT
══════════════════════════════════════ */
.contact-layout{
display:grid;
grid-template-columns:1fr 2fr;
gap:28px;
align-items:start;
}
.contact-meta{display:flex;flex-direction:column;gap:16px}
.cm-card{padding:28px}
.cm-status{
display:flex;align-items:center;gap:10px;
font-family:var(--f-mono);font-size:10px;
letter-spacing:2px;color:var(--green);
margin-bottom:18px;
}
.cm-card p{
font-size:.93rem;color:var(--muted2);
line-height:1.8;margin-bottom:22px;
}
.cm-info-row{
display:flex;align-items:center;gap:10px;
font-family:var(--f-mono);font-size:10px;
color:var(--muted2);letter-spacing:1px;
}
.cm-info-row svg{flex-shrink:0}
/* Terminal window */
.terminal-window{overflow:hidden}
.tw-header{
display:flex;align-items:center;gap:10px;
padding:10px 16px;
border-bottom:1px solid rgba(57,255,20,.1);
background:rgba(57,255,20,.03);
}
.tw-dots{display:flex;gap:6px}
.tw-dots span{width:10px;height:10px;border-radius:50%}
.tw-dots span:nth-child(1){background:#ff5f57}
.tw-dots span:nth-child(2){background:#febc2e}
.tw-dots span:nth-child(3){background:#28c840}
.tw-title{
font-family:var(--f-mono);font-size:10px;
color:var(--muted);flex:1;text-align:center;
}
.tw-body{
padding:16px;font-family:var(--f-mono);
font-size:11px;line-height:2;
}
.tw-prompt{color:var(--cyan)}
.tw-cmd{color:var(--cyan2)}
.tw-out{color:var(--muted2)}
.tw-green{color:var(--green)!important}
.tw-cursor-blink{color:var(--cyan);animation:blink-op .5s steps(1) infinite}
/* Contact Form */
.contact-form{padding:32px}
.cf-header{
font-family:var(--f-mono);font-size:10px;
letter-spacing:4px;color:var(--cyan);
margin-bottom:24px;display:block;
}
.cf-row{
display:grid;grid-template-columns:1fr 1fr;
gap:18px;margin-bottom:18px;
}
.cf-group{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.cf-group label{
font-family:var(--f-mono);font-size:9px;
letter-spacing:3px;color:var(--cyan);
}
.cf-group input,
.cf-group textarea{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.09);
border-radius:var(--r-sm);
color:var(--text);
font-family:var(--f-body);font-size:.95rem;
padding:12px 15px;
transition:.3s;resize:vertical;outline:none;
}
.cf-group input::placeholder,
.cf-group textarea::placeholder{color:var(--muted)}
.cf-group input:focus,
.cf-group textarea:focus{
border-color:var(--cyan);
box-shadow:0 0 20px rgba(57,255,20,.1);
background:rgba(57,255,20,.03);
}
.cf-submit{
width:100%;
justify-content:center;
background:linear-gradient(135deg,var(--cyan),var(--purple));
color:#020408;
font-family:var(--f-mono);font-size:12px;
font-weight:700;letter-spacing:3px;
padding:16px;border-radius:var(--r-sm);
border:none;cursor:pointer;
position:relative;overflow:hidden;
transition:transform .35s var(--spring),box-shadow .35s;
display:flex;align-items:center;
}
.cf-submit:hover{
transform:translateY(-3px);
box-shadow:0 0 40px rgba(57,255,20,.45);
}
.cf-glare{
position:absolute;inset:0;
background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
transform:translateX(-150%);transition:.55s;
pointer-events:none;
}
.cf-submit:hover .cf-glare{transform:translateX(150%)}
.cf-loader{
display:none;width:18px;height:18px;
border:2px solid rgba(2,4,8,.3);
border-top-color:#020408;
border-radius:50%;
animation:spin .5s linear infinite;
margin:0 auto;
}
.cf-submit.loading #cf-btn-text{display:none}
.cf-submit.loading .cf-loader{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.cf-msg{
font-family:var(--f-mono);font-size:11px;
padding:10px 0;text-align:center;min-height:30px;
letter-spacing:1px;
}
.cf-msg.ok{color:var(--green)}
.cf-msg.err{color:var(--pink)}
/* ══════════════════════════════════════
FOOTER
══════════════════════════════════════ */
#footer{
padding:50px 60px 40px;
border-top:1px solid rgba(57,255,20,.1);
background:rgba(2,4,8,.75);
position:relative;overflow:hidden;
text-align:center;
}
#foot-canvas{
position:absolute;inset:0;
width:100%;height:100%;
opacity:.35;pointer-events:none;
}
.foot-inner{position:relative;z-index:2}
.foot-logo{
font-family:var(--f-display);font-size:20px;
font-weight:900;color:var(--cyan);
text-shadow:0 0 18px var(--cyan);
margin-bottom:14px;letter-spacing:4px;
}
#footer p{
font-family:var(--f-mono);font-size:11px;
color:var(--muted2);margin-bottom:6px;
letter-spacing:1px;
}
.foot-legal{color:rgba(74,85,104,.4)!important}
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1100px){
.metrics-grid.inner{grid-template-columns:repeat(2,1fr)}
.hero-portrait{width:300px;height:360px}
.holo-r3{width:340px;height:340px;margin-left:-170px;margin-top:-170px}
.missions-grid{grid-template-columns:repeat(2,1fr)}
.capabilities-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
.about-grid{grid-template-columns:1fr}
.contact-layout{grid-template-columns:1fr}
.testimonials-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
#nav{padding:16px 24px}
#nav.scrolled{padding:12px 24px}
.nav-list{
display:none;flex-direction:column;
position:absolute;top:100%;left:0;right:0;
background:rgba(2,4,8,.97);
backdrop-filter:blur(20px);
padding:20px 24px;
border-bottom:1px solid rgba(57,255,20,.1);
gap:4px;
}
.nav-list.open{display:flex}
.nav-burger{display:flex}
.nav-status{display:none}
.hero-body{
flex-direction:column;
padding:110px 24px 80px;
text-align:center;
gap:40px;
}
.hero-portrait{
width:260px;height:300px;
margin:0 auto;
}
.holo-r1{width:230px;height:230px;margin-left:-115px;margin-top:-115px}
.holo-r2{width:280px;height:280px;margin-left:-140px;margin-top:-140px}
.holo-r3{width:310px;height:310px;margin-left:-155px;margin-top:-155px}
.portrait-frame{width:190px;height:230px}
.hero-socials{justify-content:center}
.hero-ctas{justify-content:center}
.hero-sub{margin-left:auto;margin-right:auto}
.sec-wrap{padding:0 24px}
.cf-row{grid-template-columns:1fr}
#footer{padding:36px 24px 30px}
body{cursor:auto}
#cur-dot,#cur-ring{display:none}
.holo-data{bottom:6px;font-size:8px;padding:6px 12px;gap:10px}
.missions-grid{grid-template-columns:1fr}
.capabilities-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
.about-stats-panel{grid-template-columns:1fr 1fr}
.metrics-grid.inner{grid-template-columns:1fr 1fr}
.skill-grid{grid-template-columns:repeat(2,1fr)}
.pp-grid{grid-template-columns:1fr}
.tl-node{grid-template-columns:36px auto 1fr}
.sec-title{margin-bottom:50px}
}