*{
box-sizing:border-box;
}

body{

font-family:'Inter',sans-serif;

margin:0;

background:#f5f7fa;

color:#1f2937;

}

html{
scroll-padding-top:80px;
scroll-behavior:smooth;
}

/* NAVBAR */

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 60px;

background:white;

border-bottom:1px solid #e5e7eb;

position:sticky;

top:0;

z-index:10;

}

.nav-links a{

margin-right:28px;

text-decoration:none;

color:#374151;

font-weight:500;

font-size:15px;

}

.nav-links a:hover{

color:#2563eb;

}

.nav-name{

font-weight:600;

font-size:18px;

}



/* PAGE WIDTH */

.container{

max-width:1000px;

margin:auto;

padding:80px 20px;

}



/* HERO SECTION */

.hero{

background:#f9fafb;

}

.hero h1{

font-size:46px;

line-height:1.25;

margin-bottom:20px;

}

.hero-text{

font-size:18px;

color:#4b5563;

max-width:600px;

}

.hero-buttons{

margin-top:30px;

}

.btn-primary{

background:#2563eb;

color:white;

padding:12px 20px;

border-radius:6px;

text-decoration:none;

margin-right:10px;

font-weight:500;

}

.btn-primary:hover{

background:#1d4ed8;

}

.btn-secondary{

border:2px solid #2563eb;

color:#2563eb;

padding:10px 18px;

border-radius:6px;

text-decoration:none;

font-weight:500;

}

.btn-secondary:hover{

background:#2563eb;

color:white;

}



/* PROJECTS */

.projects h2{

font-size:30px;

margin-bottom:40px;

}

.project-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.card{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 10px 20px rgba(0,0,0,.05);

transition:.2s;

}

.card:hover{

transform:translateY(-4px);

}

.card h3{

margin-top:0;

}

.card a{

text-decoration:none;

color:#2563eb;

font-weight:500;

}



/* FOOTER */

footer{

text-align:center;

padding:40px;

background:#111;

color:#aaa;

margin-top:80px;

}

/* PROJECTS */

.project-hero {
max-width: 900px;
margin: 120px auto 80px auto;
padding: 0 20px;
text-align: center;
}

.project-hero h1 {
font-size: 48px;
font-weight: 600;
margin-bottom: 10px;
}

.project-tagline {
font-size: 18px;
color: #666;
margin-bottom: 30px;
}

.project-links {
display: flex;
justify-content: center;
gap: 15px;
}

.project-section {
max-width: 750px;
margin: 60px auto;
padding: 0 20px;
}

.project-section h2 {
font-size: 28px;
margin-bottom: 15px;
}

.project-section p {
line-height: 1.7;
color: #444;
}

.tech-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}

.tech-card {
padding: 10px 16px;
background: #f3f3f3;
border-radius: 6px;
font-size: 14px;
}

.feature-list {
margin-top: 15px;
padding-left: 20px;
}

.feature-list li {
margin-bottom: 10px;
}

.image-placeholder {
margin-top: 20px;
height: 260px;
background: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #888;
}

.footer {
margin-top: 80px;
padding: 30px;
text-align: center;
color: #777;
font-size: 14px;
}

/* Screenshot layout */

.screenshot-grid{ 
display:flex; 
gap:50px; 
justify-content:center; 
flex-wrap:wrap; 
margin-top:30px; } 

.screenshot-card{ 
text-align:center; 
max-width:300px; 
} 

.screenshot-card img{ 
width:100%; 
height:320px; 
object-fit:contain; 
background:white; 
padding:10px; 
border-radius:10px; 
box-shadow:0 8px 20px rgba(0,0,0,0.08); 
transition:transform .2s; } 

.screenshot-card img:hover{
transform:scale(1.02);
transition:transform .2s;
}

.screenshot-card p{ 
margin-top:12px; 
font-size:14px; 
color:#666; 
}

/* Wide screenshots (for desktop apps like Outlined) */

.wide-screenshot{
width:100%;
height:auto;
object-fit:contain;
box-shadow:0 12px 30px rgba(0,0,0,0.12);
}

/* PRODUCT PAGE LAYOUT */

.product-page{
max-width:1100px;
margin:120px auto;
padding:0 20px;
}

.product-layout{
display:grid;
grid-template-columns:55% 45%;
gap:80px;
align-items:center;
}

/* IMAGE AREA */

.product-images{
display:flex;
align-items:center;
justify-content:center;
}

.product-main-image{
width:100%;
max-width:600px;
border-radius:14px;
box-shadow:0 20px 50px rgba(0,0,0,0.12);
}


/* PRODUCT INFO */

.product-info h1{
font-size:36px;
margin-bottom:8px;
}

.product-subtitle{
color:#666;
margin-bottom:20px;
}

.product-price{
font-size:20px;
font-weight:600;
margin-bottom:20px;
}

.product-description{
line-height:1.7;
margin-bottom:25px;
color:#444;
}

.feature-list-product{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:30px;
}

.product-buttons{
display:flex;
gap:12px;
margin-bottom:25px;
}

.product-meta{
color:#666;
font-size:14px;
}

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

/* Tablets */

@media (max-width: 1000px) {

.navbar{
padding:18px 30px;
}

.container{
padding:60px 20px;
}

.product-layout{
grid-template-columns:1fr;
gap:40px;
}

.product-images{
order:-1;
}

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

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

}


/* Phones */

@media (max-width: 700px) {

.navbar{
flex-direction:column;
align-items:flex-start;
gap:10px;
padding:16px 20px;
}

.nav-links{
display:flex;
flex-wrap:wrap;
gap:14px;
}

.nav-links a{
margin-right:0;
font-size:14px;
}

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

.hero-text{
font-size:16px;
}

.project-hero{
margin:80px auto 60px auto;
}

.project-links{
flex-direction:column;
gap:12px;
}

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

.screenshot-grid{
gap:30px;
}

.product-buttons{
flex-direction:column;
}

.product-main-image{
max-width:100%;
}

}


/* Ultra-wide monitors */

@media (min-width: 1600px){

.container{
max-width:1200px;
}

.project-hero{
max-width:1000px;
}

.project-section{
max-width:900px;
}

}