/* ================= ROOT ================= */
:root{
  --void:#0a0a12;
  --mystic-gold:#d4af37;
  --spirit-blue:#4d8bff;
  --ghost-white:rgba(255,255,255,.92);
}

/* ================= BASE ================= */
.mystic-background{
  min-height:100vh;
  background:url('../images/a2.webp') center / cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  position:relative;
  overflow:hidden;
  color:var(--ghost-white);
  font-family:'Cinzel', serif;
}

/* Decorative layers */
.star-particles{
  position:absolute;
  inset:0;
  background:url('../images/a1.webp') repeat;
  opacity:.25;
  pointer-events:none;
}

.energy-sphere{
  position:absolute;
  width:400px;
  height:400px;
  background:radial-gradient(circle,var(--spirit-blue),transparent 70%);
  filter:blur(60px);
  opacity:.12;
  top:20%;
  right:10%;
  pointer-events:none;
}

/* ================= LAYOUT ================= */
.main-container{
  max-width:1100px;
  width:100%;
  display:flex;
  gap:2rem;
  align-items:center;
  position:relative;
  z-index:1;
}

/* ================= PORTRAIT ================= */
.portrait-wrapper{perspective:1000px}

.portrait-frame{
  width:500px;
  height:600px;
  border:3px solid rgba(212,175,55,.3);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.portrait-img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:sepia(.3) contrast(1.1);
}

/* ================= PANEL ================= */
.mystic-panel{
  flex:1;
  background:linear-gradient(135deg,#ff4500,#ff8c00);
  border-radius:12px;
  padding:10px;
  box-shadow:0 0 40px rgba(0,0,0,.4);
}

.panel-content{
  background:#3e0707;
  border-radius:10px;
  padding:2rem;
}

/* ================= TEXT ================= */
.shimmer-title{
  font-size:2.8rem;
  font-weight:700;
  background:linear-gradient(135deg,var(--mystic-gold),#fff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0;
}

.profile-subtitle{
  font-size:1.9rem;
  margin:.5rem 0 1.5rem;
}

.years-display{
  display:inline-block;
  padding:.7rem 1.4rem;
  border:1px solid var(--mystic-gold);
  color:var(--mystic-gold);
  font-weight:700;
  margin:1rem 0;
}

/* ================= SERVICES ================= */
.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.2rem;
  margin:1.5rem 0;
}

.service-item{
  padding:1.2rem;
  border-radius:10px;
  background:rgba(255,255,255,.04);
}

.service-item h3{
  margin:.4rem 0;
  color:#ffd700;
  font-size:1.2rem;
}

.service-item p{
  font-size:.95rem;
}

/* ================= CTA ================= */
.contact-button{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  margin-top:1.5rem;
  padding:1rem 1.4rem;
  border:1px solid var(--mystic-gold);
  border-radius:50px;
  text-decoration:none;
  color:var(--ghost-white);
}

.contact-button:focus-visible{
  outline:3px solid var(--mystic-gold);
  outline-offset:4px;
}

.call-text{
  font-size:.85rem;
  letter-spacing:2px;
  color:var(--mystic-gold);
}

.phone-number{
  font-size:1.6rem;
  font-weight:700;
}

/* ================= RESPONSIVE ================= */
@media(max-width:992px){
  .main-container{
    flex-direction:column;
    text-align:center;
  }

  .portrait-frame{
    width:350px;
    height:480px;
  }
}