@import url("https://fonts.googleapis.com/css2?family=Barlow:wghtcalc(var(--u)*500);600;800&family=Inter:wghtcalc(var(--u)*400);500;600;700&family=Lora:wghtcalc(var(--u)*500);700&family=Mansalva&display=swap");
/* TechFairy Soft certificate. Everything scales with the sheet width (1920 design units). */
.tfc-stage {
  perspective: 1800px;
  display: flex;
  justify-content: center;
}
.tfc-wrap {
  container-type: inline-size;
  width: min(1000px, 100%);
  transition: transform 0.2s ease-out;
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  background: #fff;
}
.tfc-sheet {
  --u: calc(100cqw/1920);
  position: relative;
  width: 100%;
  aspect-ratio: 1920/1363;
  background: #fff;
  overflow: hidden;
  color: #111;
  font-family: "Inter", sans-serif;
  border-radius: 6px;
}
.tfc-sheet > * {
  position: absolute;
}
.tfc-panel {
  left: calc(var(--u) * 1368);
  right: 0;
  top: 0;
  bottom: 0;
  background: url(../images/cert/pattern.png) 0 0 / calc(var(--u) * 200) auto;
  border-left: calc(var(--u) * 2) solid #2f8a57;
}
.tfc-brand {
  left: calc(var(--u) * 1480);
  top: calc(var(--u) * 105);
  width: calc(var(--u) * 330);
  height: calc(var(--u) * 310);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.93) 62%,
    rgba(255, 255, 255, 0)
  );
  text-align: center;
}
.tfc-brand img {
  width: calc(var(--u) * 235);
  height: auto;
}
.tfc-brand b {
  font:
    800 calc(var(--u) * 30)/1 "Barlow",
    sans-serif;
  letter-spacing: 0.02em;
  color: #17703f;
  margin-top: calc(var(--u) * 8);
}
.tfc-brand small {
  font:
    600 calc(var(--u) * 14)/1.2 "Barlow",
    sans-serif;
  color: #10301f;
  margin-top: calc(var(--u) * 10);
  border-top: calc(var(--u) * 2) solid #17703f;
  padding-top: calc(var(--u) * 8);
}
.tfc-t1 {
  left: calc(var(--u) * 100);
  top: calc(var(--u) * 120);
  font:
    500 calc(var(--u) * 50)/1.1 "Lora",
    serif;
  color: #5b5648;
}
.tfc-t2 {
  left: calc(var(--u) * 100);
  top: calc(var(--u) * 190);
  font:
    700 calc(var(--u) * 100)/1 "Lora",
    serif;
  color: #161616;
  letter-spacing: -0.005em;
}
.tfc-sub {
  left: calc(var(--u) * 100);
  top: calc(var(--u) * 312);
  font:
    600 calc(var(--u) * 34)/1.2 "Inter",
    sans-serif;
  letter-spacing: 0.09em;
}
.tfc-name {
  left: calc(var(--u) * 100);
  top: calc(var(--u) * 352);
  width: calc(var(--u) * 985);
  height: calc(var(--u) * 158);
  display: flex;
  align-items: center;
  font-family: "Mansalva", cursive;
  color: #14663a;
  white-space: nowrap;
  border-bottom: calc(var(--u) * 2) solid #d9d9d9;
}
.tfc-pill {
  left: calc(var(--u) * 100);
  top: calc(var(--u) * 526);
  height: calc(var(--u) * 83);
  line-height: calc(var(--u) * 83);
  padding: 0 calc(var(--u) * 52);
  border-radius: calc(var(--u) * 12);
  background: #1b6a3d;
  color: #fff;
  font:
    700 calc(var(--u) * 38)/calc(var(--u) * 83) "Inter",
    sans-serif;
  white-space: nowrap;
}
.tfc-grade {
  left: calc(var(--u) * 740);
  top: calc(var(--u) * 526);
  height: calc(var(--u) * 83);
  line-height: calc(var(--u) * 83);
  font:
    600 calc(var(--u) * 34)/calc(var(--u) * 83) "Inter",
    sans-serif;
  color: #1b6a3d;
}
.tfc-text {
  left: calc(var(--u) * 100);
  top: calc(var(--u) * 650);
  width: calc(var(--u) * 1062);
  font:
    400 calc(var(--u) * 36)/calc(var(--u) * 55) "Inter",
    sans-serif;
  text-align: justify;
  margin: 0;
}
.tfc-text b {
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: calc(var(--u) * 8);
  text-decoration-thickness: calc(var(--u) * 2);
}
.tfc-sign {
  left: calc(var(--u) * 160);
  top: calc(var(--u) * 1000);
  width: calc(var(--u) * 280);
}

.tfc-sigblock {
  left: calc(var(--u) * 90);
  top: calc(var(--u) * 1208);
  width: calc(var(--u) * 420);
  text-align: center;
}
.tfc-signname {
  font:
    500 calc(var(--u) * 37)/1.2 "Lora",
    serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-bottom: calc(var(--u) * 2) solid #bdbdbd;
  padding-bottom: calc(var(--u) * 8);
}
.tfc-role {
  margin-top: calc(var(--u) * 12);
  font:
    500 calc(var(--u) * 25)/1 "Barlow",
    sans-serif;
  color: #2b2b2b;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tfc-stamp {
  left: calc(var(--u) * 648);
  top: calc(var(--u) * 1035);
  width: calc(var(--u) * 235);
}
.tfc-qr {
  left: calc(var(--u) * 1137);
  top: calc(var(--u) * 1050);
  width: calc(var(--u) * 140);
  height: calc(var(--u) * 140);
  background: #fff;
  object-fit:contain;
}
.tfc-qr img,
.tfc-qr canvas {
  width: 100% !important;
  height: 100% !important;
}
.tfc-qr canvas {
  display: none !important;
}
.tfc-scan {
  right: calc(var(--u) * 667);
  top: calc(var(--u) * 1203);
  font:
    600 calc(var(--u) * 24)/1 "Barlow",
    sans-serif;
  color: #8a7f5d;
  letter-spacing: 0.06em;
}
.tfc-date {
  right: calc(var(--u) * 667);
  top: calc(var(--u) * 1238);
  font:
    500 calc(var(--u) * 38)/1 "Inter",
    sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tfc-id {
  right: calc(var(--u) * 667);
  top: calc(var(--u) * 1296);
  font:
    500 calc(var(--u) * 22)/1 "Inter",
    sans-serif;
  color: #777;
}
.tfc-seal {
  left: calc(var(--u) * 1141);
  top: calc(var(--u) * 455);
  width: calc(var(--u) * 450);
  height: calc(var(--u) * 450);
  filter: drop-shadow(
    0 calc(var(--u) * 14) calc(var(--u) * 22) rgba(60, 40, 0, 0.3)
  );
}
.tfc-seal i {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    100% 50%,
    96.21% 55.21%,
    98.75% 61.13%,
    93.89% 65.36%,
    95.05% 71.69%,
    89.37% 74.74%,
    89.09% 81.17%,
    82.88% 82.88%,
    81.17% 89.09%,
    74.74% 89.37%,
    71.69% 95.05%,
    65.36% 93.89%,
    61.13% 98.75%,
    55.21% 96.21%,
    50% 100%,
    44.79% 96.21%,
    38.87% 98.75%,
    34.64% 93.89%,
    28.31% 95.05%,
    25.26% 89.37%,
    18.83% 89.09%,
    17.12% 82.88%,
    10.91% 81.17%,
    10.63% 74.74%,
    4.95% 71.69%,
    6.11% 65.36%,
    1.25% 61.13%,
    3.79% 55.21%,
    0% 50%,
    3.79% 44.79%,
    1.25% 38.87%,
    6.11% 34.64%,
    4.95% 28.31%,
    10.63% 25.26%,
    10.91% 18.83%,
    17.12% 17.12%,
    18.83% 10.91%,
    25.26% 10.63%,
    28.31% 4.95%,
    34.64% 6.11%,
    38.87% 1.25%,
    44.79% 3.79%,
    50% 0%,
    55.21% 3.79%,
    61.13% 1.25%,
    65.36% 6.11%,
    71.69% 4.95%,
    74.74% 10.63%,
    81.17% 10.91%,
    82.88% 17.12%,
    89.09% 18.83%,
    89.37% 25.26%,
    95.05% 28.31%,
    93.89% 34.64%,
    98.75% 38.87%,
    96.21% 44.79%
  );
  background: conic-gradient(
    from 30deg,
    #f6dd9e,
    #c58a2b,
    #fbeabb,
    #b57a1d,
    #f6dd9e
  );
}
.tfc-seal span {
  position: absolute;
  inset: calc(var(--u) * 24);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf6, #f3e5c2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font:
    700 calc(var(--u) * 40)/1.1 "Lora",
    serif;
  color: #c39331;
  letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 calc(var(--u) * 3) #e0b863;
}
.tfc-seal span em {
  font-style: normal;
  font-size: calc(var(--u) * 18);
  letter-spacing: 0.5em;
  margin: calc(var(--u) * 8) 0;
  color: #d9ad4c;
}
.tfc-wm {
  left: calc(var(--u) * -40);
  bottom: calc(var(--u) * -30);
  font:
    800 calc(var(--u) * 120)/1 "Barlow",
    sans-serif;
  color: rgba(23, 112, 63, 0.045);
  white-space: nowrap;
  pointer-events: none;
}
.verified {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 22px;
  padding: 8px 18px;
  border-radius: 99px;
  background: #dcfce7;
  color: #14532d;
  font-weight: 700;
}
@page {
  size: A4 landscape;
  margin: 0;
}
@media print {
  body * {
    visibility: hidden;
  }
  .tfc-stage,
  .tfc-stage * {
    visibility: visible;
  }
  .tfc-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    perspective: none;
  }
  .tfc-wrap {
    width: 100% !important;
    transform: none !important;
    box-shadow: none;
    border-radius: 0;
  }
  .tfc-sheet {
    border-radius: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}