@import url(
  'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'
);


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

:root {
  font-family: 'DM Sans', Arial, sans-serif;

  color: #172f3b;

  background: #f7f9fb;

  font-synthesis: none;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
}


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



/* =========================
   HEADER
   ========================= */

.site-header {

  height: 76px;

  background: #ffffff;

  border-bottom: 1px solid #e4ebee;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0
    max(
      32px,
      calc((100vw - 1320px) / 2)
    );

  gap: 20px;
}


.brand {

  display: flex;

  align-items: center;

  gap: 11px;

  font-size: 21px;

  letter-spacing: -0.8px;

  font-weight: 700;

  color: #143946;
}


.brand-light {

  font-weight: 400;

  color: #458b83;
}


.brand-icon {

  width: 25px;

  height: 25px;

  border: 2px solid #2a8f83;

  border-radius: 5px;

  display: grid;

  place-items: center;

  transform: rotate(-28deg);
}


.brand-icon span {

  width: 14px;

  height: 5px;

  background: #2a8f83;

  border-radius: 1px;
}


.header-right {

  display: flex;

  align-items: center;

  gap: 30px;
}


.header-tag,
.header-link,
.eyebrow,
.version,
.section-mark,
.tool-number,
.tool-status,
.coming-soon,
.materials-status,
footer {

  font-family:
    'IBM Plex Mono',
    monospace;
}


.header-tag {

  font-size: 10px;

  letter-spacing: 1.5px;

  color: #93a6af;
}


.header-link {

  font-size: 12px;

  font-weight: 600;

  color: #335d63;

  transition: color 0.15s;
}


.header-link:hover {

  color: #299487;
}



/* =========================
   PAGE
   ========================= */

.page-shell {

  max-width: 1384px;

  margin: 0 auto;

  padding:
    70px
    32px
    80px;
}



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

.hero {

  max-width: 920px;

  padding:
    25px
    0
    75px;
}


.eyebrow {

  display: flex;

  align-items: center;

  gap: 9px;

  color: #338d82;

  font-size: 10px;

  letter-spacing: 1.6px;

  font-weight: 600;
}


.eyebrow-line {

  display: inline-block;

  width: 20px;

  height: 2px;

  background: #35a293;
}


.version {

  font-size: 10px;

  color: #a8b6bc;

  letter-spacing: 1px;

  margin-left: 12px;
}


.hero h1 {

  max-width: 850px;

  font-size:
    clamp(
      44px,
      5.5vw,
      72px
    );

  line-height: 1.05;

  letter-spacing: -3.4px;

  margin:
    23px
    0
    20px;

  color: #193540;
}


.hero h1 span {

  font-weight: 400;

  color: #78a7a6;
}


.hero-copy {

  max-width: 680px;

  font-size: 17px;

  line-height: 1.7;

  color: #66808b;

  margin: 0;
}



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

.tools-section {

  padding-top: 10px;
}


.section-heading {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  margin-bottom: 27px;
}


.section-heading h2,
.materials-card h2 {

  font-size: 31px;

  letter-spacing: -1.2px;

  margin:
    13px
    0
    7px;
}


.section-heading p,
.materials-card p {

  margin: 0;

  font-size: 13px;

  color: #7a9099;

  line-height: 1.55;
}


.section-mark {

  color: #a4b3b8;

  font-size: 10px;

  letter-spacing: 1px;
}



/* =========================
   TOOL GRID
   ========================= */

.tool-grid {

  display: grid;

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

  gap: 18px;
}


.tool-card {

  min-height: 365px;

  padding: 25px;

  background: #ffffff;

  border: 1px solid #e4ebee;

  border-radius: 13px;

  box-shadow:
    0
    4px
    22px
    rgba(27, 60, 72, 0.03);

  display: flex;

  flex-direction: column;

  transition:
    transform 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}


.active-tool:hover {

  transform:
    translateY(-3px);

  border-color: #bcded8;

  box-shadow:
    0
    10px
    30px
    rgba(27, 60, 72, 0.08);
}


.tool-top {

  display: flex;

  justify-content: space-between;

  align-items: center;
}


.tool-number {

  width: 31px;

  height: 31px;

  display: grid;

  place-items: center;

  background: #e6f4f0;

  color: #318f80;

  border-radius: 7px;

  font-size: 11px;

  font-weight: 600;
}


.tool-status {

  font-size: 9px;

  letter-spacing: 1px;

  color: #299578;

  background: #e7f6ef;

  padding:
    6px
    8px;

  border-radius: 5px;
}


.coming-soon {

  font-size: 9px;

  letter-spacing: 1px;

  color: #9aaab0;
}



/* =========================
   TOOL GRAPHICS
   ========================= */

.tool-icon {

  height: 78px;

  margin:
    27px
    0
    10px;

  display: flex;

  align-items: center;
}


.shaft-line {

  width: 145px;

  height: 28px;

  border: 2px solid #55a69b;

  border-radius: 15px;

  background:
    linear-gradient(
      180deg,
      #eef8f6,
      #d9efeb
    );

  position: relative;
}


.shaft-line::after {

  content: "";

  position: absolute;

  width: 35px;

  height: 35px;

  border:
    2px solid
    #55a69b;

  border-radius: 50%;

  right: -2px;

  top: 50%;

  transform:
    translateY(-50%);

  background: #f8fbfb;
}


.beam-line {

  width: 145px;

  height: 16px;

  border: 2px solid #a9b9be;

  background: #eef2f3;
}


.conveyor-belt {

  width: 145px;

  height: 25px;

  border-top:
    3px solid
    #a9b9be;

  border-bottom:
    3px solid
    #a9b9be;

  position: relative;
}


.conveyor-belt::before,
.conveyor-belt::after {

  content: "";

  position: absolute;

  width: 23px;

  height: 23px;

  border:
    2px solid
    #a9b9be;

  border-radius: 50%;

  top: -2px;
}


.conveyor-belt::before {
  left: 0;
}


.conveyor-belt::after {
  right: 0;
}



/* =========================
   TOOL TEXT
   ========================= */

.tool-card h3 {

  margin:
    13px
    0
    10px;

  font-size: 25px;

  letter-spacing: -0.8px;

  color: #21414a;
}


.tool-card h3 span {

  color: #66a29e;

  font-weight: 400;
}


.tool-card p {

  color: #788e97;

  font-size: 13px;

  line-height: 1.6;

  margin: 0;
}


.tool-features {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 20px;
}


.tool-features span {

  padding:
    5px
    8px;

  border:
    1px solid
    #e1eaec;

  border-radius: 4px;

  color: #66858a;

  font-size: 10px;

  background: #fafcfc;
}


.open-tool {

  margin-top: auto;

  padding-top: 25px;

  color: #268e82;

  font-size: 12px;

  font-weight: 700;

  display: flex;

  justify-content: space-between;

  align-items: center;
}


.open-tool span {

  font-size: 18px;
}


.open-tool.muted {

  color: #a7b5ba;
}


.future-tool {

  background: #fbfcfc;
}



/* =========================
   MATERIALS
   ========================= */

.materials-section {

  margin-top: 55px;
}


.materials-card {

  background: #ffffff;

  border:
    1px solid
    #e4ebee;

  border-radius: 13px;

  padding:
    29px
    31px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}


.materials-status {

  white-space: nowrap;

  font-size: 9px;

  letter-spacing: 1px;

  color: #57847d;

  display: flex;

  align-items: center;

  gap: 8px;
}


.status-dot {

  width: 7px;

  height: 7px;

  background: #36b88f;

  border-radius: 50%;
}



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

footer {

  max-width: 1384px;

  margin: 0 auto;

  padding:
    22px
    32px
    32px;

  border-top:
    1px solid
    #e4ebee;

  display: flex;

  justify-content: space-between;

  gap: 25px;

  color: #a4b4bb;

  font-size: 9px;

  letter-spacing: 0.5px;
}


.footer-dot {

  color: #43a293;

  padding: 0 3px;
}



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

@media (max-width: 900px) {

  .tool-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .header-tag {

    display: none;

  }

}


@media (max-width: 650px) {

  .site-header {

    height: 65px;

    padding:
      0
      16px;

  }


  .header-right {

    gap: 15px;

  }


  .header-link {

    font-size: 10px;

  }


  .page-shell {

    padding:
      45px
      16px
      55px;

  }


  .hero {

    padding-bottom: 55px;

  }


  .hero h1 {

    font-size: 42px;

    letter-spacing: -2px;

  }


  .hero-copy {

    font-size: 14px;

  }


  .version {

    display: none;

  }


  .section-heading {

    display: block;

  }


  .section-mark {

    display: none;

  }


  .tool-grid {

    grid-template-columns:
      1fr;

  }


  .tool-card {

    min-height: 340px;

  }


  .materials-card {

    align-items: flex-start;

    flex-direction: column;

  }


  footer {

    padding:
      20px
      16px;

    flex-direction: column;

  }

}