.intro--energy {
  background:
    radial-gradient(circle at 80% 42%, rgba(255, 83, 24, .08), transparent 32%),
    var(--paper);
}

.intro--energy::before,
.intro--energy::after {
  position: absolute;
  z-index: 0;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  content: "";
  filter: blur(64px);
  opacity: .36;
  pointer-events: none;
  will-change: transform;
}

.intro--energy::before {
  top: -24%;
  right: -13%;
  background: radial-gradient(circle, rgba(255, 67, 12, .24), rgba(255, 133, 45, .09) 40%, transparent 69%);
  animation: energy-smoke-a 13s ease-in-out infinite alternate;
}

.intro--energy::after {
  right: 10%;
  bottom: -38%;
  background: radial-gradient(circle, rgba(255, 154, 52, .2), rgba(255, 76, 17, .07) 42%, transparent 70%);
  animation: energy-smoke-b 16s ease-in-out infinite alternate;
}

@keyframes energy-smoke-a {
  from { transform: translate3d(-8%, 5%, 0) scale(.9); }
  to { transform: translate3d(12%, -7%, 0) scale(1.12); }
}

@keyframes energy-smoke-b {
  from { transform: translate3d(8%, -4%, 0) scale(1.08); }
  to { transform: translate3d(-14%, 8%, 0) scale(.88); }
}

.certificate-zone {
  position: relative;
  min-width: 0;
  min-height: clamp(500px, 58vw, 690px);
  overflow: visible;
  isolation: isolate;
  perspective: 1400px;
}

.certificate-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 74, 23, .2);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  pointer-events: none;
}

.certificate-orbit::before,
.certificate-orbit::after { position: absolute; border: 1px solid rgba(255, 74, 23, .12); border-radius: 50%; content: ''; }
.certificate-orbit::before { inset: 12%; }
.certificate-orbit::after { inset: 28%; }

.certificate-object {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(29vw, 390px);
  aspect-ratio: 1 / 1.42;
  margin: 0;
  translate: -50% -51%;
  transform: rotateX(-4deg) rotateY(-10deg) rotateZ(2deg);
  transform-style: preserve-3d;
  animation: certificate-float 9.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  backface-visibility: hidden;
  will-change: transform, translate;
}

.certificate-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  padding: 8.5% 9%;
  background:
    radial-gradient(circle at 14% 18%, transparent 0 38px, rgba(255,74,23,.11) 39px 40px, transparent 41px),
    repeating-radial-gradient(ellipse at 76% 84%, transparent 0 13px, rgba(255,74,23,.055) 14px 15px),
    linear-gradient(145deg, #fffdf8, #f4e8d7);
  border: 1px solid rgba(80, 40, 14, .22);
  box-shadow: 0 34px 72px rgba(56, 30, 14, .24), inset 0 0 0 7px rgba(255,255,255,.56), inset 0 0 0 9px rgba(255,74,23,.28);
  flex-direction: column;
  align-items: center;
  color: #17120e;
  text-align: center;
  backface-visibility: hidden;
}

.certificate-sheet::before,
.certificate-sheet::after { position: absolute; content: ''; pointer-events: none; }
.certificate-sheet::before { inset: 4.5%; border: 1px solid rgba(255,74,23,.46); }
.certificate-sheet::after { inset: -20% -70%; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.58) 49%, transparent 56%); transform: translateX(-36%); animation: certificate-sheen 7s ease-in-out infinite; }
.certificate-brand { display: block; width: 112px; height: 24px; margin-bottom: 4%; transform: scale(.62); transform-origin: center; filter: grayscale(1) contrast(1.4); }
.certificate-country { font-size: clamp(8px, .7vw, 11px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.certificate-emblem { display: grid; width: clamp(42px, 4vw, 58px); aspect-ratio: 1; margin: 5% 0 3%; background: var(--orange); border-radius: 50%; color: #fff7ed; font-size: clamp(13px, 1.2vw, 18px); font-weight: 800; place-items: center; box-shadow: 0 0 0 5px rgba(255,74,23,.12); }
.certificate-sheet > strong { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(22px, 2.45vw, 36px); font-weight: 500; letter-spacing: .035em; line-height: .92; text-transform: uppercase; }
.certificate-system { margin-top: 4%; color: rgba(23,18,14,.62); font-size: clamp(7px, .62vw, 10px); letter-spacing: .14em; text-transform: uppercase; }
.certificate-rule { width: 54%; height: 1px; margin: 8% 0 6%; background: var(--orange); }
.certificate-copy { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(9px, .78vw, 12px); line-height: 1.45; text-transform: uppercase; }
.certificate-number { margin-top: 6%; font-size: clamp(7px, .66vw, 10px); font-weight: 700; letter-spacing: .08em; }
.certificate-seal { position: absolute; right: 11%; bottom: 11%; display: grid; width: clamp(58px, 5.5vw, 78px); aspect-ratio: 1; background: rgba(255,74,23,.08); border: 3px double var(--orange); border-radius: 50%; color: var(--orange-deep); font-size: clamp(14px, 1.4vw, 20px); font-weight: 800; place-items: center; transform: rotate(-8deg); }
.certificate-signature { position: absolute; bottom: 14%; left: 12%; color: var(--orange-deep); font-family: 'Segoe Script', cursive; font-size: clamp(13px, 1.4vw, 20px); transform: rotate(-8deg); }
.certificate-sheet > small { position: absolute; bottom: 5.5%; color: rgba(23,18,14,.46); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }

.certificate-benefit { position: absolute; z-index: 3; display: grid; min-width: 190px; padding: 15px 18px 15px 58px; background: rgba(255,255,255,.9); border: 1px solid rgba(23,18,14,.12); backdrop-filter: blur(16px); box-shadow: 0 16px 44px rgba(56,30,14,.1); }
.certificate-benefit i { position: absolute; top: 50%; left: 15px; display: grid; width: 32px; height: 32px; background: var(--orange); border-radius: 50%; color: var(--ink); font-size: 12px; font-style: normal; font-weight: 800; place-items: center; transform: translateY(-50%); }
.certificate-benefit strong { font-size: 13px; letter-spacing: -.01em; }
.certificate-benefit small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.certificate-benefit--duty { top: 12%; left: 0; transform: rotate(-4deg); }
.certificate-benefit--mark { top: 20%; right: -5%; transform: rotate(3deg); }
.certificate-benefit--remote { right: -2%; bottom: 20%; max-width: 230px; transform: rotate(-2deg); }
.certificate-benefit--hour { bottom: 13%; left: -3%; transform: rotate(4deg); }

@keyframes certificate-float {
  from { translate: -50% calc(-51% - 5px); }
  to { translate: -50% calc(-51% + 5px); }
}
@keyframes certificate-sheen { 0%, 46% { transform: translateX(-36%); } 75%, 100% { transform: translateX(38%); } }

.certificate-zone .intro-link {
  position: absolute;
  right: 32px;
  bottom: 30px;
  z-index: 4;
}

@media (max-width: 1100px) {
  .certificate-zone { min-height: 620px; }
  .certificate-object { width: min(48vw, 390px); }
  .certificate-orbit { width: min(66vw, 560px); }
}

@media (max-width: 820px) {
  .certificate-zone { min-height: 590px; }
  .certificate-object { width: min(54vw, 360px); }
}

@media (max-width: 520px) {
  .certificate-zone { min-height: 560px; margin-top: 26px; }
  .certificate-object { top: 47%; width: min(68vw, 300px); }
  .certificate-orbit { top: 47%; width: 102vw; }
  .certificate-benefit { min-width: 150px; padding: 12px 12px 12px 46px; }
  .certificate-benefit i { left: 10px; width: 28px; height: 28px; }
  .certificate-benefit strong { font-size: 11px; }
  .certificate-benefit small { font-size: 9px; }
  .certificate-benefit--duty { top: 2%; left: 0; }
  .certificate-benefit--mark { top: 11%; right: 0; }
  .certificate-benefit--remote { right: 0; bottom: 14%; max-width: 170px; }
  .certificate-benefit--hour { bottom: 7%; left: 0; }
  .certificate-zone .intro-link { right: 4px; bottom: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro--energy::before,
  .intro--energy::after { animation: none; }
  .certificate-object, .certificate-sheet::after { animation: none; }
  .certificate-object { translate: -50% -51%; transform: rotateX(-4deg) rotateY(-10deg) rotateZ(2deg); }
}