/* ============================================
   HERO — Hero section & abstract vector background
   ============================================ */

/* ---------- Abstract Vector Field ---------- */

.vector-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 52% 45%,
      rgba(212, 175, 55, 0.15),
      transparent 25%
    ),
    radial-gradient(
      circle at 15% 75%,
      rgba(212, 175, 55, 0.07),
      transparent 25%
    ),
    #030303;
}

.vector-bg:before,
.vector-bg:after {
  content: "";
  position: absolute;
  width: 75vw;
  height: 75vw;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 44% 56% 60% 40%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(24deg);
  box-shadow:
    0 0 90px rgba(212, 175, 55, 0.06),
    inset 0 0 90px rgba(212, 175, 55, 0.04);
}

.vector-bg:after {
  width: 45vw;
  height: 90vw;
  border-radius: 55% 45% 35% 65%;
  transform: translate(-50%, -50%) rotate(-38deg);
  border-color: rgba(242, 210, 122, 0.12);
}

.vector-grid {
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(
      90deg,
      transparent 49.7%,
      rgba(212, 175, 55, 0.08) 50%,
      transparent 50.3%
    ),
    linear-gradient(
      0deg,
      transparent 49.7%,
      rgba(212, 175, 55, 0.06) 50%,
      transparent 50.3%
    );
  background-size: 90px 90px;
  transform: perspective(700px) rotateX(58deg) scale(1.4);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 45%,
    transparent 100%
  );
}

.tiger-mark {
  position: absolute;
  right: -10vw;
  bottom: -15vw;
  font-size: 48vw;
  line-height: 0.7;
  font-weight: 950;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 55, 0.1);
  user-select: none;
  pointer-events: none;
}

/* ---------- Hero Content ---------- */

.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  padding: 150px 28px 100px;
  text-align: center;
}

.hero h1 {
  margin: 25px 0 0;
  font-size: clamp(72px, 15vw, 190px);
  line-height: 0.78;
  letter-spacing: -0.08em;
  font-weight: 950;
  text-transform: uppercase;
}

.hero h1 span {
  display: block;
}

.hero h1 .outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 210, 122, 0.9);
}

.hero-sub {
  max-width: 650px;
  margin: 35px auto 0;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.5;
  color: #ddd5c8;
}