* {
 box-sizing: border-box;
}

html,
body {
 margin: 0;
 padding: 0;
 min-height: 100%;
}

body {
 font-family: Arial, Helvetica, sans-serif;
 color: #ffffff;
 background:
   linear-gradient(rgba(5, 14, 34, 0.70), rgba(5, 14, 34, 0.88)),
   url("../images/header-background.jpg") center center / cover fixed no-repeat;
}

/* Navigation */

#nav-wrap {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 20;
 padding: 18px 24px;
 background: linear-gradient(rgba(2, 8, 20, 0.55), rgba(2, 8, 20, 0));
}

.nav {
 display: flex;
 justify-content: center;
 gap: 34px;
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav a {
 color: #ffffff;
 text-decoration: none;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 5px;
 text-transform: uppercase;
}

.nav .current a,
.nav a:hover {
 color: #ff7a1a;
}

/* Hero */

.page-header {
 min-height: 52vh;
 position: relative;
}

.hero {
 min-height: 52vh;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 110px 24px 60px;
}

.hero-content {
 max-width: 900px;
}

.eyebrow {
 margin: 0 0 14px;
 color: #7fdcff;
 font-size: 13px;
 font-weight: 800;
 letter-spacing: 5px;
 text-transform: uppercase;
}

.hero h1 {
 margin: 0;
 font-size: clamp(56px, 8vw, 110px);
 line-height: 1;
 text-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.hero-description {
 max-width: 720px;
 margin: 22px auto 0;
 font-family: Georgia, "Times New Roman", serif;
 font-size: 22px;
 line-height: 1.55;
 color: rgba(255, 255, 255, 0.88);
}

/* Main */

.projects-page {
 max-width: 1260px;
 margin: 0 auto;
 padding: 30px 28px 80px;
}

.projects-intro {
 text-align: center;
 margin-bottom: 26px;
}

.projects-intro h2 {
 margin: 0 0 10px;
 font-size: 34px;
}

.projects-intro p {
 margin: 0;
 color: rgba(255, 255, 255, 0.75);
 font-family: Georgia, "Times New Roman", serif;
 font-size: 18px;
}

/* Filters */

.filters {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 12px;
 margin: 34px 0 38px;
}

.filter-btn {
 border: 1px solid rgba(255, 255, 255, 0.24);
 background: rgba(255, 255, 255, 0.08);
 color: #ffffff;
 padding: 10px 18px;
 border-radius: 999px;
 cursor: pointer;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 2px;
 text-transform: uppercase;
 backdrop-filter: blur(12px);
 transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.filter-btn:hover {
 transform: translateY(-2px);
 background: rgba(255, 255, 255, 0.15);
}

.filter-btn.active {
 color: #06101f;
 background: #7fdcff;
 border-color: #7fdcff;
}

/* Project grid */

.projects-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 22px;
}

.project-card {
 position: relative;
 min-height: 310px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 26px;
 border: 1px solid rgba(255, 255, 255, 0.16);
 border-radius: 26px;
 background:
   radial-gradient(circle at top right, rgba(127, 220, 255, 0.20), transparent 32%),
   rgba(5, 15, 35, 0.58);
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
 backdrop-filter: blur(18px);
 overflow: hidden;
 transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.project-card::before {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 45%);
 opacity: 0;
 transition: opacity 180ms ease;
 pointer-events: none;
}

.project-card:hover {
 transform: translateY(-8px);
 border-color: rgba(127, 220, 255, 0.55);
 background:
   radial-gradient(circle at top right, rgba(127, 220, 255, 0.28), transparent 35%),
   rgba(8, 23, 52, 0.72);
}

.project-card:hover::before {
 opacity: 1;
}

.project-card.featured {
 grid-column: span 2;
 background:
   radial-gradient(circle at top right, rgba(255, 122, 26, 0.28), transparent 34%),
   radial-gradient(circle at bottom left, rgba(127, 220, 255, 0.24), transparent 34%),
   rgba(5, 15, 35, 0.62);
}

.project-icon {
 width: 62px;
 height: 62px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 26px;
 border-radius: 18px;
 background: rgba(255, 255, 255, 0.13);
 font-size: 31px;
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.project-type {
 margin: 0 0 10px;
 color: #7fdcff;
 font-size: 12px;
 font-weight: 900;
 letter-spacing: 3px;
 text-transform: uppercase;
}

.project-content h3 {
 margin: 0 0 14px;
 font-size: 30px;
}

.project-content p:last-child {
 margin: 0;
 color: rgba(255, 255, 255, 0.78);
 font-family: Georgia, "Times New Roman", serif;
 font-size: 17px;
 line-height: 1.55;
}

.project-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 margin-top: 34px;
 padding-top: 18px;
 border-top: 1px solid rgba(255, 255, 255, 0.12);
 color: rgba(255, 255, 255, 0.50);
 font-size: 12px;
 font-weight: 700;
}

.project-link {
 color: #ffffff;
 text-decoration: none;
 font-size: 12px;
 font-weight: 900;
 letter-spacing: 2px;
 text-transform: uppercase;
}

.project-link:hover {
 color: #ff7a1a;
}

/* JS filtering */

.project-card.hidden {
 display: none;
}

/* Responsive */

@media (max-width: 980px) {
 .projects-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .project-card.featured {
  grid-column: span 2;
 }
}

@media (max-width: 680px) {
 .nav {
  gap: 16px;
  overflow-x: auto;
  justify-content: flex-start;
  padding-bottom: 8px;
 }

 .nav a {
  font-size: 10px;
  letter-spacing: 3px;
  white-space: nowrap;
 }

 .hero {
  min-height: 46vh;
  padding-top: 100px;
 }

 .hero-description {
  font-size: 18px;
 }

 .projects-page {
  padding: 22px 16px 56px;
 }

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

 .project-card.featured {
  grid-column: span 1;
 }

 .project-footer {
  align-items: flex-start;
  flex-direction: column;
 }
}