.hero-cert,
.cert-panel {
  position: absolute;
  z-index: 4;
  text-decoration: none;
  transition: transform .3s, background .3s, border-color .3s;
}

.hero-cert:hover,
.cert-panel:hover {
  transform: translateY(-4px);
}

/* Concept 01: quiet, formal certification plaque */
.concept-01 .hero-cert {
  right: 4vw;
  bottom: 58px;
  width: 285px;
  padding: 25px 27px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: rgba(5, 7, 9, .68);
  backdrop-filter: blur(12px);
}

.concept-01 .hero-cert:hover {
  background: rgba(5, 7, 9, .9);
}

.concept-01 .cert-kicker {
  display: block;
  color: #9a9da1;
  font-size: 7px;
  letter-spacing: .26em;
}

.concept-01 .hero-cert strong {
  display: block;
  margin-top: 15px;
  font: 300 26px Georgia, serif;
  letter-spacing: .08em;
}

.concept-01 .hero-cert b {
  display: block;
  margin-top: 5px;
  font: 300 13px/1.6 "Noto Serif JP", serif;
  letter-spacing: .06em;
}

.concept-01 .hero-cert small {
  display: block;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: #aaa;
  font: 9px/1.8 "Noto Serif JP", serif;
}

.concept-01 .hero-cert i {
  display: block;
  margin-top: 14px;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .14em;
}

/* Concept 02: warm, approachable quality certificate */
.concept-02 .hero-cert {
  right: 5vw;
  bottom: 34px;
  width: 340px;
  padding: 24px 27px;
  border: 1px solid rgba(111, 91, 57, .35);
  background: rgba(249, 246, 237, .88);
  box-shadow: 0 18px 50px rgba(91, 73, 42, .12);
  backdrop-filter: blur(12px);
  color: #272724;
  text-align: left;
}

.concept-02 .hero-cert small {
  color: #a18255;
  font-size: 7px;
  letter-spacing: .28em;
}

.concept-02 .hero-cert strong {
  display: block;
  margin-top: 10px;
  font: 300 25px Georgia, serif;
  letter-spacing: .1em;
}

.concept-02 .hero-cert b {
  display: block;
  margin-top: 5px;
  font: 400 12px "Noto Serif JP", serif;
  letter-spacing: .06em;
}

.concept-02 .hero-cert span {
  display: block;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #d6cdbf;
  color: #776f62;
  font: 9px/1.8 "Noto Serif JP", serif;
}

.concept-02 .hero-cert i {
  display: block;
  margin-top: 11px;
  color: #8b7047;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .13em;
}

/* Concept 03: technical certification data panel */
.concept-03 .cert-line {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.concept-03 .cert-line > b {
  font: 500 18px Inter, sans-serif;
  letter-spacing: .13em;
}

.concept-03 .cert-line > span {
  padding-left: 15px;
  border-left: 1px solid #668ba7;
  color: #8bb3d0;
  font-size: 7px;
  line-height: 1.5;
  letter-spacing: .16em;
}

.concept-03 .cert-line strong {
  color: #fff;
  font-weight: 400;
}

.concept-03 .cert-panel {
  right: 4vw;
  bottom: 62px;
  width: 285px;
  padding: 22px 24px;
  border: 1px solid #496c87;
  background: rgba(2, 10, 20, .74);
  backdrop-filter: blur(12px);
}

.concept-03 .cert-panel:hover {
  border-color: #ff3347;
}

.concept-03 .cert-panel small {
  color: #6e9abb;
  font-size: 7px;
  letter-spacing: .25em;
}

.concept-03 .cert-panel strong {
  display: block;
  margin: 17px 0;
  font: 400 17px/1.6 "Noto Sans JP", sans-serif;
}

.concept-03 .cert-panel span {
  display: block;
  padding: 14px 0;
  border-block: 1px solid rgba(145, 190, 224, .22);
  color: #77a3c3;
  font-size: 7px;
  line-height: 2;
  letter-spacing: .15em;
}

.concept-03 .cert-panel i {
  display: block;
  margin-top: 14px;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .17em;
}

.concept-03 .cert > div > b {
  display: inline-block;
  padding: 8px 14px;
  background: #ff3347;
  font: 400 13px "Noto Sans JP", sans-serif;
  letter-spacing: .2em;
}

@media (max-width: 820px) {
  .concept-01 .hero-copy,
  .concept-03 .hero-copy {
    top: 43%;
  }

  .concept-01 .hero-cert {
    right: 7vw;
    bottom: 48px;
    width: 225px;
    padding: 15px 18px;
  }

  .concept-01 .hero-cert strong {
    margin-top: 8px;
    font-size: 20px;
  }

  .concept-01 .hero-cert b {
    font-size: 10px;
  }

  .concept-01 .hero-cert small,
  .concept-02 .hero-cert span,
  .concept-03 .cert-panel span {
    display: none;
  }

  .concept-02 .hero-copy {
    bottom: 165px;
  }

  .concept-02 .hero h1 {
    margin-bottom: 20px;
    font-size: 36px;
  }

  .concept-02 .hero-cert {
    right: 25px;
    bottom: 15px;
    left: 25px;
    width: auto;
    padding: 12px 16px;
  }

  .concept-02 .hero-cert strong,
  .concept-02 .hero-cert b {
    display: inline;
  }

  .concept-02 .hero-cert strong {
    margin-right: 8px;
    font-size: 18px;
  }

  .concept-02 .hero-cert b {
    font-size: 9px;
  }

  .concept-03 .hero h1 {
    font-size: 53px;
  }

  .concept-03 .cert-line {
    margin-top: 12px;
  }

  .concept-03 .cert-line > b {
    font-size: 14px;
  }

  .concept-03 .cert-panel {
    right: 6vw;
    bottom: 42px;
    width: 205px;
    padding: 12px 15px;
  }

  .concept-03 .cert-panel strong {
    margin: 8px 0;
    font-size: 12px;
  }
}