/* =============================
GLOBAL
============================= */

html {
scroll-behavior: smooth;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

background:
radial-gradient(circle at 20% 20%, rgba(83,122,14,0.12), transparent 35%),
radial-gradient(circle at 80% 70%, rgba(83,122,14,0.08), transparent 40%),
#0b0f14;

color:#e5e7eb;

line-height:1.6;
}

.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

/* =============================
ACCENT COLOR
============================= */

:root{
--accent:#537A0E;
--accent-hover:#3f5e0b;
}

/* =============================
NAVBAR
============================= */

.navbar{
position:sticky;
top:0;

backdrop-filter: blur(14px);

background:rgba(10,15,20,0.75);

border-bottom:1px solid rgba(255,255,255,0.05);

z-index:1000;
}

.nav-container{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;

padding:18px 20px;
}

.nav-logo{
font-weight:600;
font-size:18px;
letter-spacing:0.5px;
color:white;
text-decoration:none;
transition:color .2s ease;
}

.nav-logo:hover{
color:#537A0E;
}

.nav-links a{
margin-left:26px;
text-decoration:none;

color:#9ca3af;

font-weight:500;

transition:all .25s ease;
}

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

.nav-links a::after{
content:"";
display:block;
height:2px;
width:0%;

background:#537A0E;

transition:0.3s;
}

.nav-links a:hover::after{
width:100%;
}

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

.hero{
padding:80px 0;
max-width:700px;
}

.hero-subtitle{
color:var(--accent);
font-weight:600;
margin-bottom:10px;
}

.hero h1{
font-size:48px;
margin-bottom:20px;
}

.hero p{
color:#94a3b8;
margin-bottom:30px;
}

/* =============================
BUTTONS
============================= */

.btn{
display:inline-block;
padding:12px 20px;
border-radius:6px;
text-decoration:none;
font-weight:500;
margin-right:10px;
}

.btn-primary{
background:var(--accent);
color:white;
}

.btn-primary:hover{
background:var(--accent-hover);
}

.btn-outline{
border:1px solid var(--accent);
color:var(--accent);
}

.btn-outline:hover{
background:var(--accent);
color:white;
}

/* =============================
METRICS
============================= */

.metrics{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:20px;
margin:60px 0;
}

.metric{
background:#020617;
padding:25px;
border-radius:8px;
border:1px solid #1e293b;
text-align:center;
}

.metric h3{
color:var(--accent);
font-size:22px;
margin-bottom:5px;
}

.metric span{
color:#94a3b8;
font-size:14px;
}

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

.skills-section{
margin:80px 0;
}

.skills-section h2{
font-size:28px;
margin-bottom:30px;
}

.skills-section p{
max-width:700px;
margin-bottom:30px;
color:#94a3b8;
line-height:1.7;
}

.skills-section h2::after{
content:"";
display:block;
width:60px;
height:3px;
background:#537A0E;
margin-top:8px;
}

/* =============================
PROJECT GRID
============================= */

.projects{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

/* =============================
CARDS
============================= */

.card{

background:linear-gradient(
145deg,
rgba(20,26,32,0.9),
rgba(12,16,20,0.9)
);

border:1px solid rgba(255,255,255,0.05);

border-radius:14px;

padding:26px;

transition:all .25s ease;

box-shadow:
0 4px 20px rgba(0,0,0,0.35);

}

.card:hover{

transform:translateY(-6px);

border-color:#537A0E;

box-shadow:
0 10px 35px rgba(0,0,0,0.55);

}

/* =============================
SKILLS TAGS
============================= */

.skills{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.skill{
background:#1e293b;
padding:6px 10px;
border-radius:6px;
font-size:13px;
}

/* =============================
CONTACT
============================= */

.contact{
text-align:center;
margin-top:80px;
}

.contact a{
margin:0 12px;
color:var(--accent);
text-decoration:none;
}

.contact a:hover{
text-decoration:underline;
}

/* =============================
FOOTER
============================= */

footer{
margin-top:40px;
color:#64748b;
font-size:14px;
}

/* =============================
ANIMATIONS
============================= */

.fade-in{
opacity:0;
animation:fade 1s forwards;
}

.delay-1{
animation-delay:0.3s;
}

.delay-2{
animation-delay:0.6s;
}

@keyframes fade{
to{
opacity:1;
}
}

/* =============================
RESPONSIVE
============================= */

@media(max-width:768px){

.hero h1{
font-size:36px;
}

.nav-links a{
margin-left:14px;
}

}

/* =========================
ARCHITECTURE DIAGRAM
========================= */

.architecture{
margin-top:40px;
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

.arch-layer{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}

.arch-grid{
margin-top:10px;
}

.arch-box{

background:#11161d;

border:1px solid rgba(255,255,255,0.08);

padding:16px 22px;

border-radius:10px;

text-align:center;

min-width:160px;

font-weight:500;

transition:0.2s;

}

.arch-box span{
display:block;
font-size:13px;
margin-top:5px;
color:#9ca3af;
}

.arch-box:hover{
border-color:#537A0E;
transform:translateY(-3px);
}

.arch-connector{
width:2px;
height:30px;
background:#537A0E;
opacity:0.7;
}