:root{

--bg:#050505;
--surface:#0d0d0d;
--surface-2:#111111;
--border:#1c1c1c;

--text:#ffffff;
--text-secondary:#9ca3af;

--radius:24px;

--container:1280px;

--transition:.35s ease;

}

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

html{
scroll-behavior:smooth;
}

body{

background:var(--bg);

color:var(--text);

font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"Segoe UI",
sans-serif;

line-height:1.7;

overflow-x:hidden;
}

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

img{
max-width:100%;
display:block;
}

.container{
width:100%;
max-width:var(--container);
margin:auto;
padding:0 32px;
}

section{
padding:120px 0;
}

.section-title{

font-size:56px;
font-weight:700;

line-height:1.1;

margin-bottom:24px;
}

.section-subtitle{

font-size:18px;

color:var(--text-secondary);

max-width:700px;
}

.card{

background:var(--surface);

border:1px solid var(--border);

border-radius:var(--radius);

transition:var(--transition);
}

.card:hover{

transform:translateY(-5px);

border-color:#333;
}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:999px;

font-weight:600;

transition:var(--transition);

cursor:pointer;
}

.btn-primary{

background:#fff;

color:#000;
}

.btn-primary:hover{

transform:translateY(-2px);
}

.btn-outline{

border:1px solid #333;

color:#fff;
}

.btn-outline:hover{

background:#111;
}

.grid{

display:grid;

gap:30px;
}

.text-secondary{
color:var(--text-secondary);
}

.site-header{

position:fixed;

top:0;
left:0;
right:0;

z-index:1000;

backdrop-filter:blur(20px);

background:rgba(5,5,5,.7);

border-bottom:1px solid var(--border);
}

.navbar{

height:80px;

display:flex;

justify-content:space-between;

align-items:center;
}

.logo{

font-size:20px;

font-weight:700;

letter-spacing:2px;
}

.nav-links{

display:flex;

gap:40px;
}

.nav-links a{

color:var(--text-secondary);

transition:var(--transition);
}

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


.hero{
min-height:100vh;
display:flex;
align-items:center;
position:relative;
}

.hero-title{
font-size:clamp(60px,10vw,120px);
line-height:0.95;
font-weight:700;
letter-spacing:-4px;
max-width:1000px;
}

.hero-subtitle{
margin-top:30px;
font-size:22px;
color:var(--text-secondary);
max-width:700px;
}

.hero-actions{
margin-top:50px;
display:flex;
gap:20px;
flex-wrap:wrap;
}

.section-header{
margin-bottom:70px;
}

.cards-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

.project-card{
overflow:hidden;
}

.project-card img{
width:100%;
height:250px;
object-fit:cover;
}

.project-body{
padding:24px;
}

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

.skill-chip{
padding:14px 22px;
background:#111;
border:1px solid #222;
border-radius:999px;
}

.testimonial-card{
padding:30px;
}

.cta{
text-align:center;
}

.cta h2{
font-size:72px;
line-height:1.1;
margin-bottom:30px;
}


/* ===========================
   PREMIUM BACKGROUND
=========================== */

body::before{

content:"";

position:fixed;

top:-20%;
left:-20%;

width:140%;
height:140%;

background:
radial-gradient(
circle at 20% 20%,
rgba(255,255,255,.04),
transparent 30%
),
radial-gradient(
circle at 80% 30%,
rgba(255,255,255,.03),
transparent 30%
),
radial-gradient(
circle at 50% 80%,
rgba(255,255,255,.02),
transparent 40%
);

pointer-events:none;

z-index:-1;
}

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

.hero{

padding-top:120px;

overflow:hidden;
}

.hero::after{

content:"";

position:absolute;

width:700px;
height:700px;

right:-250px;
top:-150px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.08),
transparent 70%
);

filter:blur(100px);
}

.hero-title{

background:
linear-gradient(
180deg,
#ffffff,
#b5b5b5
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero-subtitle{

font-size:22px;

line-height:1.8;
}

/* ===========================
   SECTION DIVIDER
=========================== */

section{

position:relative;
}

section::after{

content:"";

position:absolute;

bottom:0;
left:50%;

transform:translateX(-50%);

width:90%;
height:1px;

background:
linear-gradient(
90deg,
transparent,
#1f1f1f,
transparent
);
}

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

.service-card{

padding:40px;

background:
linear-gradient(
180deg,
#111,
#0a0a0a
);

border:1px solid #1c1c1c;

border-radius:28px;

transition:.4s;
}

.service-card:hover{

transform:translateY(-8px);

border-color:#333;
}

.service-icon{

font-size:34px;

margin-bottom:25px;

color:#fff;
}

.service-title{

font-size:24px;

margin-bottom:15px;
}

/* ===========================
   PROJECTS
=========================== */

.project-card{

background:#0b0b0b;

border-radius:28px;

overflow:hidden;

border:1px solid #1c1c1c;
}

.project-card img{

transition:.7s;
}

.project-card:hover img{

transform:scale(1.06);
}

.project-body{

padding:30px;
}

.project-body h3{

font-size:24px;

margin-bottom:15px;
}

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

.skill-chip{

background:
linear-gradient(
180deg,
#151515,
#0d0d0d
);

border:1px solid #222;

transition:.35s;
}

.skill-chip:hover{

transform:translateY(-4px);

border-color:#444;
}

/* ===========================
   TESTIMONIALS
=========================== */

.testimonial-card{

background:
linear-gradient(
180deg,
#101010,
#0a0a0a
);

border:1px solid #1f1f1f;

border-radius:28px;
}

.testimonial-card p{

color:#d4d4d4;
}

/* ===========================
   CTA
=========================== */

.cta{

padding:140px 0;
}

.cta h2{

font-size:clamp(48px,8vw,100px);

background:
linear-gradient(
180deg,
#fff,
#9e9e9e
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

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

.site-footer{

padding:80px 0;

border-top:1px solid #1a1a1a;

background:#080808;
}

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

@media(max-width:768px){

.section-title{

font-size:42px;
}

.hero-title{

font-size:60px;

letter-spacing:-2px;
}

.nav-links{

gap:20px;
}

.cta h2{

font-size:48px;
}
}


.project-hero{
padding-top:180px;
padding-bottom:100px;
text-align:center;
}

.project-title{
font-size:clamp(60px,10vw,120px);
line-height:.95;
margin-bottom:25px;
}

.project-subtitle{
max-width:800px;
margin:auto;
color:var(--text-secondary);
font-size:22px;
}

.project-actions{
margin-top:40px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.project-showcase{
padding-top:0;
}

.project-cover{
width:100%;
border-radius:32px;
border:1px solid #222;
}

.overview-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
}

.tech-stack{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-top:20px;
}

.tech-stack span{
padding:12px 20px;
border-radius:999px;
background:#111;
border:1px solid #222;
}

.project-block{
padding:100px 0;
}

.project-block p{
max-width:900px;
font-size:20px;
color:#c5c5c5;
}

.project-gallery{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(400px,1fr));
gap:30px;
}

.project-gallery img{
width:100%;
border-radius:24px;
}

.project-cta{
text-align:center;
padding:140px 0;
}

.project-cta h2{
font-size:64px;
max-width:900px;
margin:auto auto 20px;
}

.project-cta p{
max-width:700px;
margin:auto auto 40px;
color:var(--text-secondary);
}

@media(max-width:768px){

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

.project-title{
font-size:56px;
}

.project-cta h2{
font-size:42px;
}

}