:root {
  --stage-w: 1440px;
  --stage-h: 8906px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #060f1e;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img {
  display: block;
  max-width: none;
}

/* Scale wrapper keeps the pixel-perfect 1440x1462 design intact
   while shrinking it to fit any viewport width. */
.hero-scale-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #10233f 0%, #060f1e 100%);
}

.hero-stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: top left;
  overflow: hidden;
}

/* ---------- Hero background photo ---------- */
.hero-bg {
  position: absolute;
  left: -3px;
  top: 76px;
  width: 1440px;
  height: 868px;
  opacity: 0.41;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg img {
  position: absolute;
  left: -9.73%;
  top: -11.41%;
  width: 119.38%;
  height: 111.41%;
}

/* ---------- Caption top right ---------- */
.hero-caption {
  position: absolute;
  left: 998px;
  top: 163px;
  width: 337px;
  margin: 0;
  font-style: italic;
  font-size: 24px;
  line-height: normal;
  color: #ffffff;
  text-align: right;
}

/* ---------- Faint decorative background photo ---------- */
.maz-holding-card {
  position: absolute;
  left: -30px;
  top: 886px;
  width: 1501px;
  height: 947px;
  overflow: hidden;
  opacity: 0.0488;
  pointer-events: none;
}
.maz-holding-card img {
  position: absolute;
  left: 2.18%;
  top: -3.05%;
  width: 95.6%;
  height: 85.27%;
}

/* ---------- Avatar strip top left ---------- */
.people-avatars {
  position: absolute;
  left: 119px;
  top: 163px;
  width: 284px;
  height: 67px;
  overflow: hidden;
}
.people-avatars img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Concentric circles behind portrait ---------- */
.circle-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.circle-group img {
  position: absolute;
}
.ellipse-outer {
  left: 230px;
  top: 196px;
  width: 980px;
  height: 947.87px;
}
.ellipse-inner {
  left: 295.69px;
  top: 261.51px;
  width: 845.94px;
  height: 816.85px;
}
.gold-circle {
  left: 372.11px;
  top: 329.69px;
  width: 694.45px;
  height: 679.15px;
}

/* ---------- BIZ POINTS wordmark ---------- */
.biz-points-1 {
  position: absolute;
  left: -28px;
  top: 872px;
  width: 1495px;
  height: 206px;
  overflow: hidden;
  pointer-events: none;
}
.biz-points-1 img {
  position: absolute;
  left: -0.02%;
  top: -62.2%;
  width: 100.03%;
  height: 248.17%;
}

/* ---------- Floating icons (shared plumbing) ---------- */
.icon {
  position: absolute;
  overflow: hidden;
}
.icon-inner {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-mode: luminance;
  -webkit-mask-mode: luminance;
}

.luggage {
  left: 261px;
  top: 510px;
  width: 122px;
  height: 159px;
}
.luggage .icon-inner {
  left: -304.74px;
  top: -215.72px;
  width: 527.91px;
  height: 374.4px;
}

.megaphone {
  left: 346px;
  top: 318px;
  width: 122px;
  height: 113px;
}
.megaphone .icon-inner {
  left: 0.03px;
  top: 0;
  width: 121.76px;
  height: 112.94px;
}

.people-icon {
  left: 261px;
  top: 722px;
  width: 137px;
  height: 117px;
}
.people-icon .icon-inner {
  left: -398.43px;
  top: -181.78px;
  width: 547.86px;
  height: 459.14px;
}

.folder-icon {
  left: 955px;
  top: 327px;
  width: 119px;
  height: 99px;
}
.folder-icon .icon-inner {
  left: 0;
  top: 0.09px;
  width: 118.57px;
  height: 98.82px;
}

.laptop {
  left: 1067px;
  top: 522px;
  width: 130px;
  height: 134px;
}
.laptop .icon-inner {
  left: 0.03px;
  top: 0;
  width: 133.24px;
  height: 133.72px;
}

/* Gift card needs an extra rotate/skew + its own crop box */
.gift-card-outer {
  position: absolute;
  left: 1074.18px;
  top: 736px;
  width: 138.17px;
  height: 99.14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-card-rotate {
  flex: none;
  transform: rotate(14.63deg) skewX(-1.1deg);
}
.gift-card-crop {
  position: relative;
  width: 122.981px;
  height: 70.721px;
  overflow: hidden;
}
.gift-card-crop .icon-inner {
  left: 0;
  top: 0.02px;
  width: 138.05px;
  height: 98.97px;
}

/* Plane: cropped, rotated hero image */
.plane {
  position: absolute;
  left: 563.8px;
  top: 134.84px;
  width: 338.74px;
  height: 223.22px;
  overflow: hidden;
}
.plane-inner {
  position: absolute;
  left: -35.75px;
  top: -10.86px;
  width: 619.82px;
  height: 640.72px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-mode: luminance;
  -webkit-mask-mode: luminance;
  transform: rotate(7.6deg) skewX(1.42deg);
}

/* ---------- Main portrait photo ---------- */
.maz-portrait {
  position: absolute;
  left: 372px;
  top: 313px;
  width: 727px;
  height: 879px;
  overflow: hidden;
}
.maz-portrait-inner {
  position: absolute;
  left: 35.46px;
  top: -13.21px;
  width: 656.71px;
  height: 813.16px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-mode: luminance;
  -webkit-mask-mode: luminance;
}

/* ---------- HACK wordmark (+ baked caption) ---------- */
.hacks-1 {
  position: absolute;
  left: 224px;
  top: 1045px;
  width: 1024px;
  height: 295px;
  overflow: hidden;
  pointer-events: none;
}
.hacks-1 img {
  position: absolute;
  left: -16.25%;
  top: -66.14%;
  width: 133.12%;
  height: 259.79%;
}

/* ---------- CTA button ---------- */
.cta-button {
  position: absolute;
  left: 522px;
  top: 1376px;
  width: 398px;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  background-image: linear-gradient(
    200.59deg,
    rgb(208, 195, 161) 9.28%,
    rgb(217, 195, 138) 16.8%,
    rgb(199, 195, 187) 30.14%,
    rgb(173, 147, 81) 47.57%,
    rgb(139, 111, 37) 78.34%
  );
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.cta-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.cta-button span {
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   Icon reveal animations — synced to a shared 10s loop,
   matching the Figma motion timeline.
   ========================================================= */

/* Group A: luggage / megaphone slide in from the right */
.luggage.anim-a.anim-a--r,
.megaphone.anim-a.anim-a--r {
  animation: fadeA 10s linear infinite;
}
.luggage .icon-inner { animation: slideR 10s linear infinite; }
.megaphone .icon-inner { animation: slideR 10s linear infinite; }

/* Group A: gift card / laptop slide in from the left */
.laptop.anim-a.anim-a--l,
.gift-card-outer.anim-a.anim-a--l {
  animation: fadeA 10s linear infinite;
}
.laptop .icon-inner { animation: slideL 10s linear infinite; }
.gift-card-outer.anim-a--l { animation: fadeA 10s linear infinite, slideL 10s linear infinite; }

@keyframes fadeA {
  0%      { opacity: 0; }
  9.69%   { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  11.19%  { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes slideR {
  0%      { translate: 120px 0px; }
  9.69%   { translate: 120px 0px; animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); }
  15.69%  { translate: 0px 0px; }
  100%    { translate: 0px 0px; }
}
@keyframes slideL {
  0%      { translate: -120px 0px; }
  9.69%   { translate: -120px 0px; animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); }
  15.69%  { translate: 0px 0px; }
  100%    { translate: 0px 0px; }
}

/* People icon: slides in diagonally from upper right */
.anim-people {
  animation: fadeA 10s linear infinite;
}
.anim-people .icon-inner {
  animation: slidePeople 10s linear infinite;
}
@keyframes slidePeople {
  0%      { translate: 120px -120px; }
  9.69%   { translate: 120px -120px; animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); }
  15.69%  { translate: 0px 0px; }
  100%    { translate: 0px 0px; }
}

/* Folder: slides in from the left, slightly different timing */
.anim-folder {
  animation: fadeFolder 10s linear infinite;
}
.anim-folder .icon-inner {
  animation: slideFolder 10s linear infinite;
}
@keyframes fadeFolder {
  0%      { opacity: 0; }
  9.83%   { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  11.33%  { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes slideFolder {
  0%      { translate: -120px 0px; }
  9.83%   { translate: -120px 0px; animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); }
  15.83%  { translate: 0px 0px; }
  100%    { translate: 0px 0px; }
}

/* Plane: slides in from the left, earliest timing */
.anim-plane {
  animation: fadePlane 10s linear infinite;
}
.anim-plane .plane-inner {
  animation: slidePlane 10s linear infinite;
}
@keyframes fadePlane {
  0%      { opacity: 0; }
  9.29%   { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  10.79%  { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes slidePlane {
  0%      { translate: -120px 0px; }
  9.29%   { translate: -120px 0px; animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); }
  15.29%  { translate: 0px 0px; }
  100%    { translate: 0px 0px; }
}