.intro{position:relative;overflow:hidden}
.intro-showcase{position:relative;display:grid;grid-template-columns:48% 52%;min-height:500px;overflow:visible;border-radius:34px;background:linear-gradient(120deg,#e3eadf 0%,#f7f1df 58%,#fff7d4 100%);box-shadow:0 24px 70px rgba(10,53,37,.12)}
.intro-showcase:before{content:"";position:absolute;inset:18px;border:1px solid rgba(12,53,37,.09);border-radius:25px;pointer-events:none}
.intro-showcase:after{content:"";position:absolute;right:38px;top:30px;width:110px;height:110px;border-radius:50%;background:var(--yellow);opacity:.72;filter:blur(1px)}
.intro-animal{position:relative;z-index:2;min-width:0;overflow:visible}
.intro-animal span{position:absolute;left:55px;top:56px;width:310px;height:310px;border-radius:50%;background:var(--forest);box-shadow:20px 18px 0 var(--yellow)}
.intro-monitor{position:absolute;z-index:2;left:-95px;top:8px;width:790px;max-width:none;height:570px;object-fit:contain;filter:drop-shadow(0 22px 20px rgba(7,29,22,.32));transform:rotate(-2deg);pointer-events:none}
.intro-story{position:relative;z-index:3;align-self:center;padding:62px 64px 62px 45px}
.intro-story .section-kicker{display:inline-block;margin-bottom:16px;padding:7px 12px;border-radius:999px;color:#fff;background:var(--red)}
.intro-story h2{max-width:590px;font-size:clamp(36px,3.6vw,50px);line-height:1.02}
.intro-story h2:after{content:"";display:block;width:92px;height:8px;margin:24px 0;border-radius:8px;background:var(--yellow)}
.intro-story .intro-copy{max-width:590px}
.intro-story .intro-copy p{font-size:17px;line-height:1.5}
.intro-story .intro-copy p:last-child{margin-bottom:0;font-weight:700;color:var(--forest)}

@media(max-width:960px){
  .intro-showcase{grid-template-columns:42% 58%;min-height:520px}
  .intro-monitor{left:-150px;top:38px;width:690px;height:500px}
  .intro-animal span{left:25px;top:95px;width:250px;height:250px}
  .intro-story{padding:48px 38px 48px 24px}
  .intro-story h2{font-size:39px}
}

@media(max-width:640px){
  .intro{overflow:hidden}
  .intro-showcase{display:flex;flex-direction:column;min-height:0;border-radius:26px}
  .intro-animal{height:330px;order:1}
  .intro-story{order:2;padding:20px 24px 34px}
  .intro-animal span{left:50%;top:34px;width:230px;height:230px;transform:translateX(-50%);box-shadow:12px 12px 0 var(--yellow)}
  .intro-monitor{left:50%;top:-12px;width:560px;height:390px;transform:translateX(-50%) rotate(-2deg)}
  .intro-story h2{font-size:33px}
  .intro-story h2:after{margin:18px 0;width:72px;height:7px}
  .intro-story .intro-copy p{font-size:16px}
}