:root {

  --bg: #ffffff;

  --surface: #fafafa;
  --surface-hover: #f5f5f5;

  --border: #e5e7eb;

  --text: #111827;
  --muted: #6b7280;

  --accent: #111827;

  --radius: 24px;

  --shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.04);

}

/* ---------------- */
/* RESET */
/* ---------------- */

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

html {
  scroll-behavior: smooth;
}

body {

  font-family:
    Inter,
    system-ui,
    sans-serif;

  background: var(--bg);

  color: var(--text);

  line-height: 1.7;

  overflow-x: hidden;

}

/* ---------------- */
/* GLOBAL */
/* ---------------- */

.container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

}

.narrow {

  max-width: 850px;

}

.section {

  padding: 120px 0;

}

.section-header {

  margin-bottom: 40px;

}

.section-header h2 {

  font-size: 2rem;

  letter-spacing: -0.03em;

}

.section-label {

  display: inline-flex;

  padding: 8px 14px;

  border-radius: 999px;

  background: #f3f4f6;

  font-size: .85rem;

  margin-bottom: 20px;

}

/* ---------------- */
/* HEADER */
/* ---------------- */

.header {

  position: sticky;

  top: 0;

  z-index: 100;

  backdrop-filter: blur(10px);

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

  border-bottom: 1px solid rgba(229,231,235,.8);

}

.nav {

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.logo {

  text-decoration: none;

  color: var(--text);

  font-weight: 700;

  font-size: 1rem;

}

.nav-link {

  text-decoration: none;

  color: var(--muted);

  transition: .2s;

}

.nav-link:hover {

  color: var(--text);

}

/* ---------------- */
/* HERO */
/* ---------------- */

.hero {

  position: relative;

  padding: 160px 0;

  overflow: hidden;

}

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top center,
      rgba(59,130,246,.08),
      transparent 60%
    );

  pointer-events: none;

}

.hero::after {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(
      rgba(0,0,0,.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0,0,0,.025) 1px,
      transparent 1px
    );

  background-size: 40px 40px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 40%,
      transparent 90%
    );

  pointer-events: none;

}

.hero-content {

  position: relative;

  z-index: 2;

  max-width: 900px;

}

.hero-badge {

  display: inline-flex;

  padding: 8px 14px;

  border-radius: 999px;

  background: #f3f4f6;

  margin-bottom: 24px;

  font-size: .85rem;

}

.hero h1 {

  font-size:
    clamp(4rem, 10vw, 7rem);

  line-height: .95;

  letter-spacing: -.06em;

  margin-bottom: 28px;

}

.hero-description {

  font-size: 1.35rem;

  max-width: 700px;

  color: var(--muted);

  margin-bottom: 40px;

}

.hero-button {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 14px 24px;

  border-radius: 999px;

  text-decoration: none;

  background: #111827;

  color: white;

  font-weight: 600;

  transition: .25s;

}

.hero-button:hover {

  transform: translateY(-2px);

}

.hero-stats {

  display: flex;

  gap: 60px;

  margin-top: 60px;

}

.hero-stat {

  color: var(--muted);

}

.hero-stat span {

  display: block;

  font-size: 2rem;

  font-weight: 700;

  color: var(--text);

}


/* ---------------- */
/* CARDS */
/* ---------------- */

.project-card,
.interest-card,
.building-card {

  background: white;

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

  border-radius: var(--radius);

  padding: 32px;

  transition: .25s ease;

}

.project-card:hover,
.interest-card:hover {

  transform: translateY(-4px);

  border-color: #d1d5db;

  box-shadow: var(--shadow);

}

.project-title {

  font-size: 1.15rem;

  line-height: 1.3;

  margin: 0;

  font-weight: 700;

  margin-bottom: 14px;

}

.project-description {

  color: var(--muted);

  margin-bottom: 20px;

}

.badge {

  display: inline-flex;

  padding: 7px 12px;

  border-radius: 999px;

  background: #f3f4f6;

  font-size: .8rem;

  margin-bottom: 20px;

}

.project-link {

  text-decoration: none;

  color: var(--text);

  font-weight: 600;

}

.project-link:hover {

  opacity: .8;

}

/* ---------------- */
/* GRID */
/* ---------------- */

.projects-grid {

  display: grid;

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

  gap: 24px;

  width: 100%;

}

.project-card {

  width: 100%;

  min-height: 220px;

}

.interests-grid {

  display: grid;

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

  gap: 24px;

}

.interest-card h3 {

  margin-bottom: 12px;

}

.interest-card p {

  color: var(--muted);

}

/* ---------------- */
/* BUILDING */
/* ---------------- */

.building-card {

  max-width: 800px;

}

.building-card h2 {

  margin-bottom: 14px;

  font-size: 2rem;

}

.building-card p {

  color: var(--muted);

  margin-bottom: 24px;

}

.building-status {

  display: inline-flex;

  padding: 10px 16px;

  border-radius: 999px;

  background: #eef2ff;

  color: #4338ca;

  font-size: .85rem;

  font-weight: 600;

}

/* ---------------- */
/* CONTENT */
/* ---------------- */

.content-block p {

  margin-top: 18px;

  color: var(--muted);

  font-size: 1.05rem;

}

/* ---------------- */
/* PHILOSOPHY */
/* ---------------- */

.philosophy {

  text-align: center;

}

.philosophy-content {

  max-width: 950px;

  margin: 0 auto;

}

.philosophy-quote {

  font-size:
    clamp(2.5rem, 5vw, 4.5rem);

  line-height: 1.15;

  letter-spacing: -.04em;

}

.philosophy-description {

  margin-top: 40px;

  color: var(--muted);

  font-size: 1.2rem;

}

/* ---------------- */
/* FOOTER */
/* ---------------- */

footer {

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

  padding: 60px 0;

}

.footer-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.footer-content p {

  color: var(--muted);

}

.footer-content a {

  text-decoration: none;

  color: var(--muted);

}

.footer-content a:hover {

  color: var(--text);

}

/* ---------------- */
/* RESPONSIVE */
/* ---------------- */

@media (max-width: 1100px) {

  .featured-layout {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 768px) {

  .hero {

    padding: 120px 0;

  }

  .hero-description {

    font-size: 1.1rem;

  }

  .hero-stats {

    flex-direction: column;

    gap: 24px;

  }

  .section {

    padding: 90px 0;

  }

  .footer-content {

    flex-direction: column;

    gap: 20px;

    align-items: flex-start;

  }

}


@media (max-width: 1200px) {

  .projects-grid {

    grid-template-columns:
      repeat(2, 1fr) !important;

  }

}

@media (max-width: 768px) {

  .projects-grid {

    grid-template-columns:
      1fr !important;

  }

}

.featured-card .project-title {

  font-size: 2rem;

  margin-bottom: 18px;

}

.featured-card .project-description {

  font-size: 1.1rem;

  max-width: 500px;

}

.project-header {

  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 20px;

}

.project-logo {

  width: 56px;

  height: 56px;

  border-radius: 14px;

  object-fit: cover;

}

.featured-card {

  min-height: 420px;

  padding: 48px;

}

.featured-card .project-logo {

  width: 72px;

  height: 72px;

  border-radius: 18px;

}