:root {
  font-family:
    Inter,
    Pretendard,
    "Noto Sans KR",
    system-ui,
    sans-serif;

  color:
    #10243e;

  background:
    #f3f7fa;

  font-synthesis:
    none;
}


* {
  box-sizing:
    border-box;
}


body {
  margin: 0;

  min-height:
    100vh;

  background:
    linear-gradient(
      180deg,
      #f4f8fb 0%,
      #eef4f7 100%
    );
}


.page {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin:
    0 auto;

  padding:
    80px 0 40px;
}


.hero {
  padding:
    60px 0 80px;

  max-width:
    820px;
}


.eyebrow {
  margin:
    0 0 18px;

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    0.2em;

  color:
    #078778;
}


h1 {
  margin:
    0;

  font-size:
    clamp(
      48px,
      7vw,
      84px
    );

  line-height:
    1.04;

  letter-spacing:
    -0.055em;
}


.lead {
  margin:
    32px 0 0;

  max-width:
    680px;

  font-size:
    19px;

  line-height:
    1.8;

  color:
    #53667c;
}


.status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    30px;

  padding:
    10px 16px;

  border-radius:
    999px;

  background:
    #e1f4ef;

  color:
    #08796c;

  font-size:
    13px;

  font-weight:
    700;
}


.status-dot {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #0b9c88;
}


.features {
  display:
    grid;

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

  gap:
    18px;
}


.features article {
  min-height:
    260px;

  padding:
    32px;

  border:
    1px solid #dce5ec;

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.9
    );
}


.features article > span {
  color:
    #078778;

  font-size:
    13px;

  font-weight:
    800;
}


.features h2 {
  margin:
    52px 0 14px;

  font-size:
    23px;

  letter-spacing:
    -0.025em;
}


.features p,
.private p {
  margin:
    0;

  color:
    #64768a;

  line-height:
    1.75;
}


.private {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    30px;

  margin-top:
    18px;

  padding:
    38px 42px;

  border:
    1px solid #dce5ec;

  border-radius:
    18px;

  background:
    #10243e;

  color:
    white;
}


.private h2 {
  margin:
    0 0 12px;

  font-size:
    28px;
}


.private p {
  color:
    #b8c6d5;
}


.lock {
  display:
    grid;

  place-items:
    center;

  width:
    70px;

  height:
    70px;

  flex:
    0 0 auto;

  border-radius:
    18px;

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

  font-size:
    28px;
}


footer {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    34px 4px 0;

  color:
    #75869a;

  font-size:
    13px;
}


footer strong {
  color:
    #354a62;
}


@media (
  max-width: 760px
) {
  .page {
    width:
      min(
        100% - 28px,
        1180px
      );

    padding-top:
      30px;
  }


  .hero {
    padding:
      45px 4px 55px;
  }


  h1 {
    font-size:
      clamp(
        44px,
        14vw,
        64px
      );
  }


  .lead {
    font-size:
      17px;
  }


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


  .features article {
    min-height:
      auto;
  }


  .features h2 {
    margin-top:
      32px;
  }


  .private {
    padding:
      30px;
  }


  footer {
    flex-direction:
      column;
  }
}