@charset "UTF-8";
.home-page .site-header { border-bottom: 0; }
.home-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 58px; padding: 54px 0 78px; }
.hero-copy h1 { margin: 0 0 24px; font-size: clamp(54px, 6.3vw, 88px); font-weight: 550; letter-spacing: -.075em; line-height: 1.07; }
.hero-copy h1 em { color: #148469; font-style: normal; }
.hero-copy .lead { font-size: 17px; color: var(--muted); letter-spacing: -.2px; margin: 0 0 32px; }
.hero-art { position: relative; height: 485px; background: #e7efdf; border-radius: 48% 48% 42% 42%; isolation: isolate; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: #c5d3bf; opacity: .8; clip-path: ellipse(50% 48% at 50% 50%); }
.map-lines path { fill: none; stroke: currentColor; stroke-width: 2; }
.map-label { position: absolute; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: #73856d; transform: rotate(-13deg); }
.label-park { top: 130px; left: 40px; }
.label-road { bottom: 126px; right: 16px; }
.pin { position: absolute; width: 54px; height: 54px; border-radius: 100%; display: grid; place-items: center; font-weight: 650; border: 5px solid #fff; box-shadow: 0 7px 20px #24442d12; }
.pin-a { left: 67px; top: 198px; background: #dfc8ab; }
.pin-b { right: 84px; top: 97px; background: #c7d2e7; }
.pin-me { left: 50%; top: 292px; background: #235f4d; color: #fff; width: 43px; height: 43px; font-size: 10px; }
.pin-me::after { content: ""; position: absolute; inset: -20px; border: 1px solid #235f4d33; border-radius: 100%; }
.share-card { position: absolute; left: 25px; right: 25px; bottom: 18px; background: #fff; border: 1px solid #ffffff80; border-radius: 23px; padding: 19px 20px; box-shadow: 0 18px 40px #24442d14; transform: rotate(-3deg); }
.share-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.person { display: flex; align-items: center; gap: 11px; }
.avatar { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; font-size: 17px; font-weight: 600; background: #e4eddf; color: #28503f; flex: none; }
.person strong { display: block; font-size: 12px; letter-spacing: -.2px; }
.person small { font-size: 10px; line-height: 1.8; color: var(--muted); }
.timer { padding: 8px 10px; font-size: 10px; border-radius: 20px; background: #edf4e8; color: #395e44; font-weight: 600; white-space: nowrap; }
.share-progress { height: 4px; border-radius: 10px; background: #edf0e9; margin: 17px 0 10px; overflow: hidden; }
.share-progress::before { content: ""; display: block; width: 73%; height: 100%; background: #719e7c; border-radius: 10px; }
.share-bottom { font-size: 9px; color: #64765f; display: flex; justify-content: space-between; gap: 15px; }
.floating-chip { position: absolute; top: 25px; left: 56px; padding: 13px 18px; background: #fbfcf8; border-radius: 30px; font-size: 11px; box-shadow: 0 5px 20px #24442d09; transform: rotate(-7deg); }
.floating-arrow { position: absolute; right: 2px; bottom: 130px; display: grid; place-items: center; width: 58px; height: 58px; background: #f2cbb7; border-radius: 20px; transform: rotate(12deg); font-size: 23px; color: #814a30; }
@media (min-width: 1450px) { .home-hero { min-height: 620px; } }
@media (max-width: 1000px) {
  .home-hero { gap: 30px; }
  .hero-copy h1 { font-size: clamp(50px, 6.5vw, 68px); }
  .hero-art { height: 430px; }
  .share-card { left: 5px; right: 5px; padding: 17px; }
  .pin-a { left: 40px; top: 175px; }
  .pin-b { right: 40px; top: 90px; }
  .pin-me { top: 250px; }
  .floating-chip { left: 20px; }
}
@media (max-width: 760px) {
  .home-hero { grid-template-columns: 1fr; gap: 24px; padding: 30px 0 46px; }
  .hero-copy h1 { font-size: clamp(48px, 8vw, 68px); max-width: 620px; }
  .hero-copy .lead { font-size: 15px; margin-bottom: 26px; }
  .hero-art { width: min(100%, 440px); height: 370px; margin: 15px auto 28px; }
  .pin-a { left: 44px; top: 150px; }
  .pin-b { right: 50px; top: 72px; }
  .pin-me { top: 190px; }
  .floating-chip { top: 8px; left: 30px; padding: 10px 14px; font-size: 10px; }
  .floating-arrow { right: 2px; bottom: 90px; width: 47px; height: 47px; font-size: 20px; }
  .share-card { left: 12px; right: 12px; bottom: -4px; padding: 16px; }
  .label-park { top: 100px; }
  .label-road { bottom: 96px; }
}
@media (max-width: 480px) {
  .hero-copy h1 { font-size: clamp(39px, 10.4vw, 49px); }
  .hero-copy .lead { max-width: 270px; }
  .hero-art { height: 340px; }
  .pin-me { top: 170px; }
  .person strong { font-size: 11px; }
  .person small { font-size: 9px; }
  .avatar { width: 32px; height: 32px; }
  .share-card { padding: 15px; }
  .timer { padding: 7px 8px; font-size: 9px; }
}