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

body{

font-family:"Montserrat",sans-serif;

background:#f4f1eb;

color:#111;

}


/* PAGE */

.projects-page{

position:relative;

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

padding:
120px 24px;

overflow:hidden;

background:
linear-gradient(
135deg,
#f6f3ee 0%,
#ece6dc 45%,
#f8f5f0 100%
);

}


/* BACKGROUND GLOW */

.projects-page::before{

content:"";

position:absolute;

top:-280px;
right:-220px;

width:720px;
height:720px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(225,151,2,.20) 0%,
rgba(225,151,2,0) 72%
);

filter:blur(10px);

pointer-events:none;

}

.projects-page::after{

content:"";

position:absolute;

bottom:-340px;
left:-340px;

width:820px;
height:820px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(224,123,0,.10) 0%,
rgba(224,123,0,0) 72%
);

filter:blur(16px);

pointer-events:none;

}


/* NOISE */

.projects-page__noise{

position:absolute;
inset:0;

opacity:.03;

background-image:
radial-gradient(#000 1px, transparent 1px);

background-size:
18px 18px;

pointer-events:none;

}


/* CONTENT */

.projects-page__content{

position:relative;

max-width:920px;
width:100%;

padding:
72px 68px;

border-radius:38px;

background:
rgba(255,255,255,.68);

backdrop-filter:
blur(24px);

border:
1px solid rgba(255,255,255,.65);

box-shadow:
0 24px 80px rgba(15,23,42,.08),
0 4px 18px rgba(0,0,0,.04),
inset 0 1px 0 rgba(255,255,255,.9);

overflow:hidden;

}


/* TOP ACCENT */

.projects-page__content::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
#f0c36a 0%,
#e19702 35%,
rgba(225,151,2,0) 100%
);

}


/* BADGE */

.projects-page__badge{

display:inline-flex;
align-items:center;
justify-content:center;

padding:
11px 18px;

margin-bottom:28px;

border-radius:999px;

background:
rgba(225,151,2,.12);

border:
1px solid rgba(225,151,2,.18);

font-size:12px;
font-weight:800;

letter-spacing:.18em;
text-transform:uppercase;

color:#c77d00;

}


/* TITLE */

.projects-page__title{

font-size:
clamp(2.6rem, 5vw, 5.2rem);

font-weight:800;

line-height:1.02;

letter-spacing:-.05em;

color:#111;

margin-bottom:28px;

}


/* LEAD */

.projects-page__lead{

max-width:760px;

font-size:
clamp(1.02rem,1.3vw,1.15rem);

line-height:1.9;

color:
rgba(17,17,17,.72);

margin-bottom:42px;

}


/* PANEL */

.projects-page__panel{

position:relative;

max-width:760px;

padding:
30px 34px;

border-radius:26px;

background:
rgba(255,255,255,.52);

border:
1px solid rgba(255,255,255,.62);

backdrop-filter:
blur(16px);

box-shadow:
0 14px 40px rgba(15,23,42,.05);

margin-bottom:42px;

overflow:hidden;

}


/* PANEL LINE */

.projects-page__panel-line{

width:74px;
height:3px;

margin-bottom:18px;

border-radius:999px;

background:
linear-gradient(
90deg,
#e19702 0%,
rgba(225,151,2,.12) 100%
);

}


/* PANEL TEXT */

.projects-page__panel-text{

font-size:
clamp(1rem,1.2vw,1.08rem);

line-height:1.9;

color:
rgba(17,17,17,.72);

}


/* BOTTOM */

.projects-page__bottom{

display:flex;
align-items:center;
gap:16px;

flex-wrap:wrap;

}


/* STATUS */

.projects-page__status{

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

letter-spacing:.08em;
text-transform:uppercase;

color:
rgba(17,17,17,.46);

}


/* DOT */

.projects-page__dot{

width:6px;
height:6px;

border-radius:50%;

background:#e19702;

}


/* MOBILE */

@media (max-width:768px){

.projects-page{

padding:
90px 18px;

}

.projects-page__content{

padding:
42px 24px;

border-radius:28px;

}

.projects-page__title{

font-size:
clamp(2.2rem,11vw,3.8rem);

margin-bottom:22px;

}

.projects-page__lead{

font-size:15px;

line-height:1.8;

margin-bottom:34px;

}

.projects-page__panel{

padding:
24px 22px;

border-radius:22px;

margin-bottom:34px;

}

.projects-page__panel-text{

font-size:15px;

line-height:1.8;

}

.projects-page__bottom{

gap:12px;

}

.projects-page__status{

font-size:11px;

}

}