.hero{
  margin-top: clamp(36px, 6vw, 70px);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(22px, 4vw, 40px);
  align-items: center;
}

.smallHi{
  margin:0 0 10px;
  color: var(--muted);
  font-weight:400;
  font-size: 18px;
}

.name{
  margin:0 0 10px;
  font-weight:600;
  font-size: 24px;
  color:var(--pink-2);
}

.title{
  margin:0 0 18px;
  font-family:"Playfair Display", serif;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 0.95;
  letter-spacing:-1px;
}
.title span{ font-weight:800; }

.desc{
  margin:0 0 30px;
  color:var(--muted);
  font-weight:300;
  font-size: clamp(16px, 2vw, 18px);
  line-height:1.8;
  max-width:520px;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:54px;
  padding:0 34px;
  border-radius:999px;
  background:var(--pink-2);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 12px 24px rgba(255,95,184,.25);
  transition:transform .15s ease, filter .15s ease;
}
.cta:hover{ transform:translateY(-2px); filter:brightness(.98); }

.heroArt{ display:flex; justify-content:center; }
.artCard{ position:relative; width:min(430px, 100%); }

/* ===== Sun/Moon Toggle ===== */
.sunMoonWrap{
  width: 100%;
  height: 280px;
  display: grid;
  place-items: center;
  outline: none;
  user-select: none;
  position: relative;
  z-index: 6;
}
.sunMoonWrap:focus-visible{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink-2) 35%, transparent);
  border-radius: 24px;
}

/* stars */
.stars{ position: absolute; inset: 0; opacity: 0; transition: opacity .45s cubic-bezier(.2,.9,.2,1); }
body.dark .stars{ opacity: 1; }

.stars span{
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  filter: blur(.2px);
  opacity: .85;
}

/* some star positions */
.stars span:nth-child(1){ left: 26%; top: 24%; transform: scale(.7); }
.stars span:nth-child(2){ left: 40%; top: 60%; transform: scale(.55); }
.stars span:nth-child(3){ left: 58%; top: 28%; transform: scale(.9); }
.stars span:nth-child(4){ left: 72%; top: 54%; transform: scale(.6); }
.stars span:nth-child(5){ left: 84%; top: 32%; transform: scale(.45); }

/* sun/moon */
.sunMoon{
  width: 86px;
  height: 86px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;

  isolation: isolate;
  z-index: 2;

  background: radial-gradient(circle at 30% 30%,
    #fff7cf 0%,
    #ffd36f 45%,
    #ffb14a 100%
  );

  box-shadow: 0 18px 30px rgba(0,0,0,.12);

  transition:
    background .48s cubic-bezier(.2,.9,.2,1),
    box-shadow .48s cubic-bezier(.2,.9,.2,1),
    transform .48s cubic-bezier(.2,.9,.2,1);
}

/* rays */
.sunMoon::before{
  content:"";
  position:absolute;
  inset:-35px;
  border-radius:50%;

  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 205, 70, .7) 0deg 6deg,
    transparent 6deg 18deg
  );

  animation: spinRays 40s linear infinite;

  z-index:-1;
  opacity:1;

  -webkit-mask: radial-gradient(circle, transparent 42px, black 43px);
  mask: radial-gradient(circle, transparent 42px, black 43px);
}

body.dark .sunMoon::before{ opacity: 0; }

@keyframes spinRays{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* moon state */
body.dark .sunMoon{
  background: radial-gradient(circle at 35% 30%,
    rgba(255,255,255,.95) 0%,
    rgba(225,232,255,.92) 55%,
    rgba(210,220,255,.88) 100%
  );
  box-shadow: 0 20px 34px rgba(0,0,0,.35);
  transform: scale(.96) rotate(-6deg);
}

.crescent{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transition: transform .42s cubic-bezier(.2,.9,.2,1), opacity .32s ease;
  opacity: 0;
}
body.dark .crescent{
  opacity: 1;
  transform: translateX(14px) scale(.98);
  background: var(--bg);
}

.toggleHint{
  margin: 14px 0 0;
  font-weight: 500;
  color: var(--muted);
  font-size: 14px;
}