/* ── HERO ── */
#hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8rem 2rem 4rem;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(192,132,252,0.12) 0%,transparent 60%),
             radial-gradient(ellipse 50% 40% at 70% 20%,rgba(255,79,163,0.1) 0%,transparent 50%),
             radial-gradient(ellipse 60% 50% at 30% 70%,rgba(240,192,96,0.05) 0%,transparent 50%);
}
.hero-orb{
  position:absolute;border-radius:50%;filter:blur(80px);
  animation:float 8s ease-in-out infinite;
}
.orb1{width:500px;height:500px;background:rgba(255,79,163,0.08);top:-100px;left:-100px;animation-delay:0s}
.orb2{width:400px;height:400px;background:rgba(192,132,252,0.1);bottom:-100px;right:-50px;animation-delay:3s}
.orb3{width:300px;height:300px;background:rgba(240,192,96,0.06);top:30%;left:60%;animation-delay:1.5s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}

.hero-content{position:relative;z-index:2;max-width:800px}
.hero-badge{
    display:inline-flex;align-items:center;gap:0.5rem;
    background:rgba(34,197,94,0.12);
    border:1px solid rgba(74,222,128,0.32);
    border-radius:50px;padding:0.4rem 1.2rem;
    font-size:0.8rem;letter-spacing:0.1em;color:#a7f3d0;
    margin-bottom:2rem;
    animation:fadeUp 1s ease both;
  }
.hero-badge span{width:6px;height:6px;background:#4ade80;border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 12px rgba(74,222,128,0.7)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.5)}}

.hero-char{
  width:220px;height:220px;
  margin:0 auto 2rem;
  position:relative;
  animation:charFloat 4s ease-in-out infinite;
}
@keyframes charFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.hero-char-ring{
  position:absolute;inset:-10px;
  border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,
             linear-gradient(135deg,var(--pink),var(--purple),var(--gold)) border-box;
  animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-char-inner{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at 40% 35%,rgba(255,79,163,0.3),rgba(120,40,180,0.4) 60%,rgba(30,10,60,0.9));
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  box-shadow:0 0 60px rgba(255,79,163,0.3),inset 0 0 40px rgba(255,79,163,0.1);
  overflow:hidden;
  isolation:isolate;
}
.hero-char-inner::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 18%,rgba(255,255,255,0.08),transparent 42%),linear-gradient(180deg,rgba(255,79,163,0.04),rgba(40,10,60,0.18));
  pointer-events:none;
}
.hero-char-art{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 22%;
  border-radius:26px;
  position:relative;
  z-index:1;
  transform:scale(1.22);
  filter:saturate(1.04) contrast(1.03);
}
.hero-char-glow{
  position:absolute;inset:-20px;
  background:radial-gradient(circle,rgba(255,79,163,0.15),transparent 70%);
  border-radius:50%;
}

.hero-title{
  font-family:var(--font-serif);
  font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:1.2rem;
  animation:fadeUp 1s ease 0.2s both;
}
.hero-title em{
  font-style:italic;
  background:linear-gradient(90deg,var(--pink),var(--purple),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  font-size:1.1rem;color:var(--text-muted);
  margin-bottom:2.5rem;font-weight:300;
  animation:fadeUp 1s ease 0.4s both;
}
.hero-sub strong{color:var(--pink-light);font-weight:500}
.hero-btns{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  animation:fadeUp 1s ease 0.6s both;
}
.btn-primary{
  background:linear-gradient(135deg,var(--pink),var(--pink-dim));
  color:#fff;border:none;border-radius:50px;
  padding:0.85rem 2.2rem;
  font-family:var(--font-body);font-size:1rem;font-weight:500;
  cursor:pointer;transition:all 0.3s;
  box-shadow:0 0 30px rgba(255,79,163,0.4);
  text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
  opacity:0;transition:opacity 0.3s;
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 0 50px rgba(255,79,163,0.7);
}
.btn-primary:hover::before{opacity:1}
.btn-secondary{
  background:transparent;
  color:var(--pink-light);
  border:1px solid rgba(255,79,163,0.4);
  border-radius:50px;
  padding:0.85rem 2.2rem;
  font-family:var(--font-body);font-size:1rem;font-weight:500;
  cursor:pointer;transition:all 0.3s;
  text-decoration:none;display:inline-flex;align-items:center;gap:0.5rem;
  backdrop-filter:blur(10px);
}
.btn-secondary:hover{
  background:rgba(255,79,163,0.1);
  border-color:var(--pink);
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(255,79,163,0.2);
}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}