/* =========================
   GLOBAL
========================= */

:root {
  --navy: #102f55;
  --navy-dark: #0a1f38;
  --blue: #24588f;
  --blue-light: #dce8f3;

  --text: #1b2733;
  --muted: #5f6b76;

  --background: #ffffff;
  --background-alt: #f5f8fb;

  --border: #d8e0e7;

  --max-width: 1180px;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: var(--text);
  background: var(--background);

  line-height: 1.6;
}


a {
  color: inherit;
}


.container {
  width: min(90%, var(--max-width));
  margin: 0 auto;
}



/* =========================
   NAVIGATION
========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  background: rgba(255, 255, 255, 0.95);

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

  backdrop-filter: blur(10px);
}


.nav-container {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


.site-name {
  text-decoration: none;

  font-size: 1rem;
  font-weight: 750;

  letter-spacing: 0.02em;

  color: var(--navy);
}


.main-nav {
  display: flex;
  gap: 2rem;
}


.main-nav a {
  text-decoration: none;

  font-size: 0.9rem;
  font-weight: 600;

  color: var(--muted);

  transition:
    color 0.2s ease;
}


.main-nav a:hover {
  color: var(--navy);
}



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

.hero {
  min-height: 690px;

  display: flex;
  align-items: center;

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 55%,
      #f2f7fb 100%
    );
}


.hero-content {
  position: relative;
  z-index: 2;

  padding-top: 6rem;
  padding-bottom: 6rem;
}


.eyebrow {
  margin-bottom: 1.5rem;

  text-transform: uppercase;

  font-size: 0.82rem;
  font-weight: 700;

  letter-spacing: 0.14em;

  color: var(--blue);
}


.hero h1 {
  max-width: 800px;

  margin: 0;

  font-size: clamp(3.2rem, 7vw, 6.2rem);
  line-height: 0.98;

  letter-spacing: -0.045em;

  color: var(--navy-dark);
}


.hero-description {
  max-width: 650px;

  margin-top: 2rem;
  margin-bottom: 2.4rem;

  font-size: 1.2rem;

  color: var(--muted);
}


.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}


.button {
  display: inline-block;

  padding: 0.85rem 1.35rem;

  border-radius: 5px;

  text-decoration: none;

  font-size: 0.92rem;
  font-weight: 700;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.primary-button {
  background: var(--navy);
  color: white;
}


.primary-button:hover {
  background: var(--navy-dark);
  transform: translateY(-2px);
}


.secondary-button {
  border: 1px solid var(--border);
  color: var(--navy);
  background: white;
}


.secondary-button:hover {
  transform: translateY(-2px);
}



/* =========================
   HERO SYSTEM MOTIF
========================= */

.hero-decoration {
  position: absolute;

  right: 7%;
  top: 20%;

  width: 300px;
  height: 300px;

  opacity: 0.45;
}


.node {
  position: absolute;

  width: 14px;
  height: 14px;

  background: var(--blue);

  border-radius: 50%;
}


.node-1 {
  left: 30px;
  top: 130px;
}


.node-2 {
  left: 130px;
  top: 60px;
}


.node-3 {
  left: 220px;
  top: 135px;
}


.node-4 {
  left: 140px;
  top: 235px;
}


.connection {
  position: absolute;

  height: 2px;

  background: var(--blue-light);

  transform-origin: left center;
}


.connection-1 {
  width: 125px;

  left: 40px;
  top: 137px;

  transform: rotate(-35deg);
}


.connection-2 {
  width: 120px;

  left: 140px;
  top: 69px;

  transform: rotate(40deg);
}


.connection-3 {
  width: 125px;

  left: 218px;
  top: 145px;

  transform: rotate(125deg);
}



/* =========================
   GENERAL SECTIONS
========================= */

.section {
  padding: 7rem 0;
}


.section-alt {
  background: var(--background-alt);
}


.section-heading {
  display: grid;

  grid-template-columns:
    minmax(260px, 1fr)
    minmax(300px, 1fr);

  gap: 4rem;

  margin-bottom: 3.5rem;

  align-items: end;
}


.section-number {
  margin: 0 0 0.6rem;

  font-size: 0.78rem;
  font-weight: 750;

  letter-spacing: 0.14em;

  color: var(--blue);
}


.section h2 {
  margin: 0;

  font-size: clamp(2rem, 4vw, 3.5rem);

  line-height: 1.05;

  letter-spacing: -0.03em;

  color: var(--navy-dark);
}


.section-intro {
  margin: 0;

  color: var(--muted);

  font-size: 1.05rem;
}



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

.project-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 1.5rem;
}


.project-card {
  padding: 2rem;

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

  background: white;

  border-radius: 8px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border 0.2s ease;
}


.project-card:hover {
  transform: translateY(-4px);

  border-color: #b8c9d9;

  box-shadow:
    0 16px 35px rgba(20, 45, 70, 0.08);
}


.featured-project {
  border-top: 4px solid var(--navy);
}


.project-label {
  margin-bottom: 1rem;

  font-size: 0.72rem;
  font-weight: 750;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--blue);
}


.project-card h3 {
  margin:
    0
    0
    0.8rem;

  color: var(--navy);

  font-size: 1.45rem;
}


.project-card p {
  color: var(--muted);
}


.tags {
  display: flex;
  flex-wrap: wrap;

  gap: 0.45rem;

  margin:
    1.4rem
    0;
}


.tags span {
  padding:
    0.35rem
    0.6rem;

  border-radius: 4px;

  background: var(--background-alt);

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

  color: var(--navy);

  font-size: 0.75rem;
  font-weight: 650;
}


.project-link {
  display: inline-block;

  margin-top: 0.5rem;

  text-decoration: none;

  color: var(--blue);

  font-weight: 700;

  font-size: 0.9rem;
}



/* =========================
   CAPABILITIES
========================= */

.capability-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 1.4rem;
}


.capability-card {
  padding:
    2rem
    1.8rem;

  background: white;

  border-top: 3px solid var(--navy);
}


.capability-number {
  margin: 0 0 1.5rem;

  font-size: 0.75rem;

  color: var(--blue);
}


.capability-card h3 {
  margin-bottom: 0.7rem;

  color: var(--navy);

  font-size: 1.3rem;
}


.capability-card p {
  color: var(--muted);
}


.tools-strip {
  margin-top: 2rem;

  padding:
    1.4rem
    1.6rem;

  background: var(--navy-dark);

  color: white;

  display: flex;

  align-items: center;

  gap: 2rem;
}


.tools-label {
  margin: 0;

  font-size: 0.78rem;
  font-weight: 750;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  white-space: nowrap;
}


.tools-list {
  display: flex;

  flex-wrap: wrap;

  gap:
    0.6rem
    1.4rem;
}


.tools-list span {
  color: #dce7f1;
}



/* =========================
   ABOUT
========================= */

.about-grid {
  display: grid;

  grid-template-columns:
    minmax(300px, 1fr)
    minmax(300px, 1fr);

  gap: 5rem;
}


.about-heading h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
}


.about-content {
  font-size: 1.08rem;

  color: var(--muted);
}


.about-content p:first-child {
  margin-top: 0;
}



/* =========================
   CONTACT
========================= */

.contact-section {
  padding: 6rem 0;

  background: var(--navy-dark);

  color: white;
}


.contact-grid {
  display: grid;

  grid-template-columns:
    minmax(300px, 1fr)
    minmax(250px, 0.7fr);

  gap: 5rem;

  align-items: end;
}


.light-number {
  color: #8eb8df;
}


.contact-section h2 {
  max-width: 650px;

  margin:
    0
    0
    1.5rem;

  font-size: clamp(2.3rem, 5vw, 4.4rem);

  line-height: 1;

  letter-spacing: -0.035em;
}


.contact-section p {
  max-width: 600px;

  color: #c8d3de;
}


.contact-links {
  display: flex;

  flex-direction: column;

  gap: 0.8rem;
}


.contact-links a {
  color: white;

  text-decoration: none;

  font-size: 1.05rem;
  font-weight: 650;
}


.contact-links a:hover {
  text-decoration: underline;
}



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

.site-footer {
  background: #071628;

  color: #9dabb9;
}


.footer-content {
  min-height: 90px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 2rem;

  font-size: 0.82rem;
}



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

@media (max-width: 850px) {

  .main-nav {
    gap: 1rem;
  }


  .section-heading,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;

    gap: 2rem;
  }


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


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


  .hero-decoration {
    opacity: 0.18;

    right: -80px;
  }


  .tools-strip {
    flex-direction: column;

    align-items: flex-start;

    gap: 1rem;
  }

}



@media (max-width: 620px) {

  .nav-container {
    flex-direction: column;

    justify-content: center;

    gap: 0.5rem;

    padding: 0.8rem 0;
  }


  .main-nav {
    flex-wrap: wrap;

    justify-content: center;
  }


  .hero {
    min-height: auto;
  }


  .hero-content {
    padding:
      5rem
      0;
  }


  .hero h1 {
    font-size: 3.2rem;
  }


  .section {
    padding:
      5rem
      0;
  }


  .footer-content {
    flex-direction: column;

    justify-content: center;

    text-align: center;

    padding: 1.5rem 0;
  }

}