/* =========================
   HERO SECTION
========================= */

.hero-home{
  position:relative;
  min-height:100vh;
  padding-top:var(--header-h);
  display:flex;
  align-items:center;
  overflow:hidden;
}

/* Background */

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-bg-gradient{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 75% 30%,
    rgba(201,168,76,.12),
    transparent 40%),
    var(--bg);
}

.hero-bg-grid{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(201,168,76,.03) 1px,
      transparent 1px),
    linear-gradient(
      90deg,
      rgba(201,168,76,.03) 1px,
      transparent 1px);

  background-size:60px 60px;
}

.hero-bg-vignette{
  position:absolute;
  inset:0;
  background:
  radial-gradient(
    transparent 55%,
    rgba(0,0,0,.6) 100%);
}

/* Side Label */

.hero-side-label{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);

  font-size:.65rem;
  letter-spacing:.35em;
  text-transform:uppercase;

  color:var(--text-muted);
}

/* Content */

.hero-content{
  position:relative;
  z-index:2;

  max-width:700px;

  padding:80px;
}

.hero-tag{
  display:flex;
  align-items:center;
  gap:12px;

  margin-bottom:30px;
}

.hero-tag-line{
  width:40px;
  height:1px;
  background:var(--gold);
}

.hero-tag-text{
  color:var(--gold);

  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
}

.hero-headline{
  display:flex;
  flex-direction:column;

  margin-bottom:25px;
}

.hero-headline-line{
  font-family:'Playfair Display',serif;

  font-size:clamp(3rem,6vw,5.5rem);
  line-height:.95;
  font-weight:700;

  color:var(--text-primary);
}

.hero-headline-accent{
  color:var(--gold);
}

.hero-subtext{
  font-family:'Cormorant Garamond',serif;

  font-size:1.25rem;
  line-height:1.8;

  color:rgba(240,236,228,.65);

  margin-bottom:40px;
}

/* Buttons */

.hero-actions{
  display:flex;
  gap:18px;

  margin-bottom:40px;
}

.hero-btn-primary{
  padding:16px 30px;

  border:none;

  background:var(--gold);
  color:#0d0d0d;

  cursor:pointer;

  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:600;

  transition:.3s;
}

.hero-btn-primary:hover{
  transform:translateY(-2px);

  box-shadow:
  0 0 25px rgba(201,168,76,.35);
}

.hero-btn-ghost{
  padding:16px 30px;

  background:transparent;

  border:1px solid var(--border);

  color:var(--text-primary);

  cursor:pointer;

  text-transform:uppercase;
  letter-spacing:.15em;

  transition:.3s;
}

.hero-btn-ghost:hover{
  border-color:var(--gold);
  color:var(--gold);
}

/* Trust */

.hero-trust{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.hero-trust-item{
  padding:10px 15px;

  border:1px solid var(--border);

  color:var(--text-primary);

  font-size:.8rem;
}

/* Right Card */

.hero-deco-panel{
  flex:1;

  display:flex;
  justify-content:center;
  align-items:center;

  position:relative;
  z-index:2;
}

.hero-deco-card{
  width:320px;
  height:380px;

  background:var(--surface);

  border:1px solid var(--border);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  position:relative;
}

.hero-deco-card::before{
  content:'';

  position:absolute;

  inset:15px;

  border:1px solid rgba(201,168,76,.2);
}

.hero-stat-number{
  font-family:'Playfair Display',serif;

  font-size:5rem;
  color:var(--gold);
}

.hero-stat-label{
  letter-spacing:.25em;
  text-transform:uppercase;

  color:var(--text-muted);

  font-size:.7rem;
}

.hero-card-badge{
  position:absolute;

  bottom:25px;

  padding:8px 15px;

  border:1px solid rgba(201,168,76,.3);

  color:var(--gold);

  text-transform:uppercase;
  font-size:.65rem;
}

/* =========================
   TABLET
========================= */

@media (max-width:1024px){

  .hero-deco-panel{
    display:none;
  }

  .hero-content{
    max-width:100%;
    padding:60px;
  }

  .hero-side-label{
    display:none;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

  .hero-home{
    text-align:center;
  }

  .hero-content{
    padding:40px 20px;
  }

  .hero-tag{
    justify-content:center;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-btn-primary,
  .hero-btn-ghost{
    width:100%;
  }

  .hero-trust{
    justify-content:center;
  }

  .hero-headline-line{
    font-size:clamp(2.5rem,10vw,4rem);
  }
}