/* 01 — HERO (V3): white card, living gradient, line flower, brand pill */
.s-hero { height: 977px; }

.s-hero .hero-card {
  position: absolute;
  left: 3px; top: 3px;
  width: 1912px; height: 971px;
  border-radius: 40px;
  overflow: hidden;
  background: #fff;
}

.s-hero .hero-field {
  position: absolute;
  inset: 0;
  background:
    /* broad citron wash filling most of the card, lavender only at edges */
    radial-gradient(56% 90% at 50% 48%,
      rgba(228, 224, 122, 0.85) 0%,
      rgba(228, 226, 130, 0.62) 46%,
      rgba(220, 222, 150, 0.28) 68%,
      rgba(205, 212, 232, 0) 84%),
    linear-gradient(180deg, #ccd3e7 0%, #cdd4e8 55%, #dde1ef 100%);
}

/* sun anchored to hero center (956, 485); blob core at (48%, 25%) */
.s-hero .hero-sun-wrap {
  position: absolute;
  width: 1700px;
  left: 140px;   /* 956 - 0.48*1700 */
  top: 45px;     /* 485 - 0.25*1759 */
  pointer-events: none;
  will-change: transform;
}

.s-hero .hero-sun {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.72;
  filter: saturate(0.85);
  transform-origin: 48% 25%;
  -webkit-mask-image: radial-gradient(46% 46% at 50% 42%, #000 45%, transparent 92%);
  mask-image: radial-gradient(46% 46% at 50% 42%, #000 45%, transparent 92%);
  animation: gp-hero-sun 11s ease-in-out infinite;
  will-change: transform;
}

@keyframes gp-hero-sun {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.s-hero .hero-ripple {
  position: absolute;
  left: 953px; top: 488px;
  width: 720px; height: 620px;
  margin: -310px 0 0 -360px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(190, 200, 230, 0) 58%,
    rgba(178, 190, 226, 0.45) 72%,
    rgba(230, 232, 210, 0.22) 80%,
    rgba(190, 200, 230, 0) 90%);
  opacity: 0;
  animation: gp-hero-ripple 9s cubic-bezier(0.16, 0.5, 0.35, 1) infinite;
  will-change: transform, opacity;
}

.s-hero .hero-ripple-2 { animation-delay: -4.5s; }

@keyframes gp-hero-ripple {
  0%   { transform: scale(0.5); opacity: 0; }
  22%  { opacity: 0.5; }
  60%  { opacity: 0.24; }
  100% { transform: scale(3.2); opacity: 0; }
}

.s-hero .hero-tint {
  position: absolute;
  inset: -14%;
  pointer-events: none;
  background:
    radial-gradient(58% 70% at 24% 26%, rgba(168, 182, 217, 0.55) 0%, rgba(168, 182, 217, 0) 65%),
    radial-gradient(52% 66% at 78% 70%, rgba(234, 218, 99, 0.4) 0%, rgba(234, 218, 99, 0) 62%),
    radial-gradient(40% 52% at 84% 22%, rgba(214, 216, 142, 0.3) 0%, rgba(214, 216, 142, 0) 60%);
  mix-blend-mode: soft-light;
  animation: gp-hero-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes gp-hero-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(2.2%, -1.6%) scale(1.02); }
  100% { transform: translate(3.8%, -2.8%) scale(1.045); }
}

/* the line-drawn flower over the sun (design: w688, y 206..805 card-rel) */
.s-hero .hero-flower {
  position: absolute;
  left: 612px;  /* (1912-688)/2 */
  top: 206px;
  width: 688px;
  height: 599px;  /* design box y209..808 */
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: gp-hero-flower-breathe 11s ease-in-out infinite;
  will-change: transform;
}

@keyframes gp-hero-flower-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* brand pill (the only "nav") */
.s-hero .hero-brand {
  position: absolute;
  left: 767px; top: 30px;   /* card offset 3 + design (770,33) */
  width: 379.07px; height: 52.24px;
  display: block;
  text-decoration: none;
  transition: transform 0.4s var(--ease-gp);
}
.s-hero .hero-brand:hover { transform: translateY(-2px); }
.s-hero .hero-brand-pill {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.s-hero .hero-brand-letters {
  position: absolute;
  left: 28.08px; top: 15.47px;
  width: 324.32px; height: 22.31px;
}
.s-hero .hero-brand-flower {
  position: absolute;
  left: 141px; top: 11px;
  width: 27.8px; height: 30px;  /* natural aspect, orientation baked in the SVG */
}



/* stacked mobile wordmark hidden on desktop */
.s-hero .hero-brand-stacked { display: none; }