.page-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: start center;
  padding: clamp(0px, 1.8vw, 18px);
}

.nfc-card {
  position: relative;
  container-type: inline-size;
  width: min(100%, 941px);
  overflow: hidden;
  border: 2px solid rgba(255, 218, 137, .78);
  border-top: 0;
  border-radius: min(6.8cqw, 66px);
  background:
    radial-gradient(circle at 50% -4%, rgba(255,255,255,.07), transparent 34%),
    linear-gradient(100deg, #050505, #101113 52%, #050505);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .55);
  isolation: isolate;
}

.nfc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 10px);
  opacity: .25;
}

.hero {
  position: relative;
  min-height: clamp(170px, 39.5cqw, 372px);
  overflow: hidden;
  background:
    radial-gradient(circle at 63% 30%, rgba(255, 180, 70, .18), transparent 26%),
    linear-gradient(180deg, rgba(18,22,26,.84), rgba(0,0,0,.88) 76%),
    linear-gradient(100deg, #030405, #121519 48%, #050505);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 38%;
  background: linear-gradient(180deg, transparent, #040404 78%);
  pointer-events: none;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .54;
}

.building {
  position: absolute;
  bottom: 18%;
  width: 5.5%;
  background:
    repeating-linear-gradient(180deg, rgba(255, 159, 39, .82) 0 2px, transparent 2px 12px),
    linear-gradient(#090b0d, #030303);
  box-shadow: 0 0 22px rgba(217, 112, 25, .25);
}

.tower-1 { left: 38%; height: 26%; }
.tower-2 { left: 45%; height: 34%; width: 4.2%; }
.tower-3 { left: 52%; height: 48%; width: 6.4%; }
.tower-3::before {
  content: "";
  position: absolute;
  left: 45%;
  bottom: 100%;
  width: 2px;
  height: 44px;
  background: #d99c38;
}
.tower-4 { left: 61%; height: 31%; width: 4.4%; }
.tower-5 { left: 68%; height: 27%; width: 6.2%; }
.tower-6 { left: 78%; height: 22%; width: 5%; }
.tower-7 { left: 88%; height: 20%; width: 4.2%; }

.hero-copy {
  position: relative;
  z-index: 4;
  width: 58%;
  min-height: inherit;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 3.6% 3% 3% 6.4%;
}

.brand-logo {
  width: clamp(104px, 23.5cqw, 222px);
  height: auto;
  margin-bottom: clamp(8px, 1.4cqw, 14px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 16px rgba(242, 199, 100, .3));
}

.title-rule {
  width: clamp(56px, 13cqw, 116px);
  height: 2px;
  margin: clamp(7px, 1.45cqw, 14px) 0 clamp(7px, 1.5cqw, 15px);
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}

.slogan {
  color: #f7f2e8;
  font-size: clamp(.82rem, 2.35cqw, 1.38rem);
  line-height: 1.24;
  letter-spacing: .06em;
  text-shadow: 0 2px 0 #000;
}

.slogan span {
  display: block;
}

.hero-person {
  position: absolute;
  z-index: 2;
  right: 4.2%;
  bottom: 0;
  width: min(48%, 450px);
  max-height: 103%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.55));
}

.nfc-mark {
  position: absolute;
  z-index: 5;
  top: clamp(14px, 4cqw, 38px);
  right: clamp(18px, 5.2cqw, 52px);
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--gold-light);
  font-weight: 900;
  font-size: clamp(.8rem, 2.5cqw, 1.55rem);
  text-shadow: 0 2px 0 rgba(0,0,0,.7);
}

.nfc-mark img {
  width: clamp(34px, 6.8cqw, 64px);
  filter: sepia(1) saturate(1.7) hue-rotate(354deg);
}

.gold-divider { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}