/* =========================================================
   HERO — matches sections/hero.html
   ========================================================= */
.hero{
  position:relative;
  background:radial-gradient(120% 90% at 50% -10%, var(--primary-mid) 0%, var(--primary) 45%, var(--primary-dark) 100%);
  color:var(--cream);
  padding:168px 0 100px;
  overflow:hidden;
}
.hero-watermark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:900px; height:900px; opacity:0.07; pointer-events:none;
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero h1{
  font-size:clamp(44px, 6vw, 74px);
  color:var(--cream);
}
.hero h1 i{color:var(--gold-light); font-style:italic; font-weight:500;}
.hero p.lead{
  font-size:18px; line-height:1.65; color:rgba(246,241,228,0.82);
  max-width:480px; margin:26px 0 38px;
}
.cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.hero-note{margin-top:18px; font-size:13px; color:rgba(246,241,228,0.55); letter-spacing:0.2px;}

/* phone mockup */
.phone-stage{position:relative; height:560px; display:flex; align-items:center; justify-content:center;}
.phone{
  position:absolute; width:250px; height:508px; border-radius:34px;
  border:6px solid var(--gold); background:var(--primary-dark);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  overflow:hidden;
}
.phone img{width:100%; height:100%; object-fit:cover;}
.phone.p-back{transform:rotate(-11deg) translate(-108px, 10px); opacity:0.85; filter:brightness(0.8);}
.phone.p-front{transform:rotate(2deg);}
.phone.p-side{transform:rotate(13deg) translate(108px, 26px); opacity:0.85; filter:brightness(0.8);}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:86px; height:20px; background:var(--gold); border-radius:0 0 14px 14px; z-index:3;
}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero p.lead{margin-left:auto; margin-right:auto;}
  .cta-row{justify-content:center;}
  .phone-stage{height:420px; margin-top:20px;}
  .phone{width:190px; height:386px; border-width:5px;}
  .phone.p-back{transform:rotate(-11deg) translate(-78px, 10px);}
  .phone.p-side{transform:rotate(13deg) translate(78px, 22px);}
}
.brand-mark {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #C9A66B);
  margin-bottom: 0.75rem;
}