/* ===== FIGMA-MATCHED HERO ===== */
.hero-figma {
  position: relative;
  overflow: hidden;
  background: #ffd905;
}
.fig-hero-stage {
  position: relative;
  width: 100%;
  height: min(959px, 49.948vw);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 7%, rgba(255,255,255,0.44), transparent 25%),
    radial-gradient(circle at 86% 16%, rgba(255,255,255,0.25), transparent 22%),
    linear-gradient(180deg, #ffd905 0%, #ffda0a 67%, #fffdf0 100%);
}
.fig-hero-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 49% 39%, rgba(255,255,255,0.22), transparent 28%);
  opacity: 0.7;
}
.fig-hero-stage::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -1px;
  height: 31%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(169deg, transparent 0 41%, rgba(255,255,255,0.92) 41.4% 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.86) 75%, #fff 100%);
}
.fig-orbit {
  position: absolute;
  display: block;
  z-index: 1;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='48' viewBox='0 0 54 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='13.5,1 25,7.5 25,20.5 13.5,27 2,20.5 2,7.5' fill='rgba(255,255,255,0.34)'/%3E%3Cpolygon points='40.5,21 52,27.5 52,40.5 40.5,47 29,40.5 29,27.5' fill='rgba(255,255,255,0.24)'/%3E%3C/svg%3E");
  background-size: min(54px, 2.813vw) min(48px, 2.5vw);
  opacity: 0.46;
  mask-image: radial-gradient(ellipse at center, #000 0 42%, rgba(0,0,0,0.55) 53%, transparent 73%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 42%, rgba(0,0,0,0.55) 53%, transparent 73%);
}
.fig-orbit-left {
  left: -3.5%;
  top: 8%;
  width: 46%;
  height: 72%;
}
.fig-orbit-right {
  right: -3%;
  top: 10%;
  width: 45%;
  height: 78%;
}
.fig-float,
.fig-tag,
.fig-phone,
.fig-story-card,
.fig-hero-copy {
  position: absolute;
  z-index: 2;
}
.fig-float {
  width: min(56px, 2.917vw);
  border-radius: 50%;
  object-fit: cover;
  animation: float 4.6s ease-in-out infinite;
}
.fig-float-a { left: 29.792%; top: 17.984%; }
.fig-float-b { left: 30.443%; top: 66.573%; animation-delay: 0.7s; }

.fig-tag {
  animation: float 4.4s ease-in-out infinite;
}
.fig-tag-avatar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.fig-tag-pill {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 64%;
  height: 38%;
  display: inline-flex;
  align-items: center;
  gap: min(7px, 0.365vw);
  padding: 0 min(16px, 0.833vw) 0 min(8px, 0.417vw);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 min(12px, 0.625vw) min(30px, 1.563vw) rgba(0,0,0,0.14);
  color: #3d414f;
  font-family: MiSans, "Noto Sans SC", sans-serif;
  font-size: min(16px, 0.833vw);
  font-weight: 400;
  white-space: nowrap;
}
.fig-tag-pill img,
.fig-flag-jp {
  width: min(30px, 1.563vw);
  height: min(30px, 1.563vw);
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
}
.fig-flag-jp {
  position: relative;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(222, 226, 234, 0.9);
}
.fig-flag-jp::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #d9262f;
}
.hero-figma .tag-nz { left: 9.962%; top: 25.538%; width: 10.008%; height: 10.532%; }
.hero-figma .tag-uk { left: 14.759%; top: 69.481%; width: 8.508%; height: 10.219%; animation-delay: 0.4s; }
.hero-figma .tag-ca { left: 70.331%; top: 18.783%; width: 8.996%; height: 10.279%; animation-delay: 0.9s; }
.hero-figma .tag-us { left: 62.552%; top: 53.597%; width: 8.361%; height: 9.176%; animation-delay: 0.2s; }
.hero-figma .tag-it { left: 76.889%; top: 64.844%; width: 9.430%; height: 10.448%; animation-delay: 1.1s; }
.hero-figma .tag-jp { left: 19.435%; top: 43.789%; width: 9.375%; height: 12.513%; animation-delay: 0.7s; }
.hero-figma .tag-jp .fig-tag-avatar { width: 57.8%; }
.hero-figma .tag-jp .fig-tag-pill { height: 36.7%; min-width: 68.9%; }

.fig-phone {
  left: 41.693%;
  top: 13.660%;
  width: 16.615%;
  height: 62.565%;
  overflow: hidden;
  animation: float 5.2s ease-in-out infinite;
  animation-delay: 0.25s;
}
.fig-phone::after {
  content: '';
  position: absolute;
  left: 3.85%;
  right: 3.85%;
  bottom: 1.65%;
  height: 36%;
  z-index: 3;
  pointer-events: none;
  border-radius: 0 0 13% 13% / 0 0 6.8% 6.8%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.78) 44%, #fff 92%);
}
.fig-phone-ui {
  position: absolute;
  inset: 1.7% 3.75% 1.45% 3.75%;
  width: auto;
  height: auto;
  overflow: hidden;
  border-radius: 13.4% / 6.55%;
  background: #fff;
  font-family: MiSans, "Noto Sans SC", sans-serif;
  --phone-copy: clamp(6px, 0.622vw, 11.95px);
  --phone-meta: clamp(5px, 0.533vw, 10.24px);
  --phone-gap: clamp(2px, 0.208vw, 4px);
}
.fig-phone-shell {
  position: absolute;
  left: 0;
  top: 0;
  width: 100.535%;
  height: auto;
  z-index: 4;
  pointer-events: none;
}
.fig-phone-toolbar {
  position: absolute;
  left: 10.7%;
  top: 8.15%;
  width: 78.6%;
  height: 5.45%;
  display: grid;
  grid-template-columns: clamp(7px, 0.833vw, 16px) 1fr clamp(8px, 0.938vw, 18px);
  align-items: center;
  gap: clamp(4px, 0.521vw, 10px);
  z-index: 2;
}
.fig-phone-menu,
.fig-phone-menu::before,
.fig-phone-menu::after {
  display: block;
  width: clamp(7px, 0.781vw, 15px);
  height: clamp(1px, 0.104vw, 2px);
  border-radius: 999px;
  background: #1c1e23;
}
.fig-phone-menu {
  position: relative;
}
.fig-phone-menu::before,
.fig-phone-menu::after {
  content: '';
  position: absolute;
  left: 0;
}
.fig-phone-menu::before { top: calc(clamp(3px, 0.313vw, 6px) * -1); }
.fig-phone-menu::after { top: clamp(3px, 0.313vw, 6px); }
.fig-phone-search {
  height: 100%;
  border-radius: clamp(5px, 0.521vw, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.208vw, 4px);
  background: #f4f5f8;
  color: #a4acb9;
  font-family: MiSans, "Noto Sans SC", sans-serif;
  font-size: clamp(6px, 0.625vw, 12px);
  line-height: 1;
}
.fig-phone-search::before {
  content: '';
  width: clamp(5px, 0.469vw, 9px);
  aspect-ratio: 1;
  border: clamp(1px, 0.104vw, 2px) solid currentColor;
  border-radius: 50%;
  box-shadow: clamp(2px, 0.208vw, 4px) clamp(2px, 0.208vw, 4px) 0 clamp(-1px, -0.052vw, -0.5px) currentColor;
  opacity: 0.72;
}
.fig-phone-action {
  width: clamp(8px, 0.938vw, 18px);
  aspect-ratio: 1;
  border: clamp(1px, 0.13vw, 2.5px) solid #1c1e23;
  border-radius: 50%;
}
.fig-phone-tabs {
  position: absolute;
  left: 3.2%;
  top: 15.0%;
  width: 93.6%;
  height: 4.354%;
  display: grid;
  grid-template-columns: repeat(5, 1fr) 0.7fr 0.7fr;
  align-items: center;
  color: #767c8e;
  font-size: var(--phone-copy);
  line-height: 1;
  text-align: center;
}
.fig-phone-tabs .tab-arrow,
.fig-phone-tabs .tab-grid {
  align-self: center;
  justify-self: center;
  position: relative;
  width: 60%;
  aspect-ratio: 1;
}
.fig-phone-tabs .tab-arrow::before {
  content: '';
  position: absolute;
  left: 31%;
  top: 22%;
  width: 42%;
  height: 42%;
  border-right: clamp(1px, 0.104vw, 2px) solid #767c8e;
  border-bottom: clamp(1px, 0.104vw, 2px) solid #767c8e;
  transform: rotate(45deg);
}
.fig-phone-tabs .tab-grid::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 18%;
  background:
    linear-gradient(90deg, #1c1e23 45%, transparent 45% 55%, #ffd905 55%),
    linear-gradient(#1c1e23 45%, transparent 45% 55%, #ffd905 55%);
  background-blend-mode: normal;
}
.fig-phone-tabs .active {
  position: relative;
  color: #1c1e23;
  font-weight: 600;
}
.fig-phone-tabs .active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -34%;
  width: 40%;
  height: clamp(1.5px, 0.156vw, 3px);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #ffd905;
}
.phone-post {
  position: absolute;
  width: 48%;
  overflow: hidden;
  color: #1c1e23;
}
.phone-post > img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.phone-post p {
  width: 91.1%;
  margin: clamp(3px, 0.354vw, 6.8px) auto 0;
  color: #1c1e23;
  font-family: MiSans, "Noto Sans SC", sans-serif;
  font-size: var(--phone-copy);
  font-weight: 400;
  line-height: 1.15;
}
.phone-post div {
  width: 91.1%;
  margin: clamp(4px, 0.417vw, 8px) auto 0;
  display: grid;
  grid-template-columns: clamp(7px, 0.729vw, 14px) 1fr auto;
  align-items: center;
  gap: var(--phone-gap);
  color: #767c8e;
  font-size: var(--phone-meta);
  line-height: 1;
}
.phone-post div img {
  width: clamp(7px, 0.729vw, 14px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.phone-post div span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-post div b {
  color: #ffd905;
  font-weight: 400;
}
.post-1 { left: 3.55%; top: 20.35%; width: 45.6%; }
.post-1 > img { aspect-ratio: 153.6 / 175.66; }
.post-2 { left: 50.85%; top: 20.35%; width: 45.6%; }
.post-2 > img { aspect-ratio: 153.6 / 206; }
.post-3 { left: 3.55%; top: 59.2%; width: 45.6%; }
.post-3 > img { aspect-ratio: 153.6 / 175.66; }
.post-4 { left: 50.85%; top: 64.0%; width: 45.6%; }
.post-4 > img { aspect-ratio: 153.6 / 175.66; }

.fig-story-card {
  left: 36.667%;
  top: 28.467%;
  width: 8.333%;
  height: 26.365%;
  overflow: hidden;
  border-radius: min(10.42px, 0.543vw);
  background: #fff;
  box-shadow: 0 min(18px, 0.938vw) min(40px, 2.083vw) rgba(0,0,0,0.12);
  font-family: MiSans, "Noto Sans SC", sans-serif;
  animation: float 5s ease-in-out infinite;
  animation-delay: 0.55s;
}
.fig-story-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 160 / 183.9;
  object-fit: cover;
}
.fig-story-card p {
  width: 91%;
  margin: min(7px, 0.365vw) auto 0;
  color: #1c1e23;
  font-size: min(12.44px, 0.648vw);
  line-height: 1.16;
}
.fig-story-card div {
  width: 91%;
  margin: min(9px, 0.469vw) auto 0;
  display: grid;
  grid-template-columns: min(14px, 0.729vw) 1fr auto;
  align-items: center;
  gap: min(4px, 0.208vw);
  color: #767c8e;
  font-size: min(10.67px, 0.556vw);
  line-height: 1;
}
.fig-story-card div img {
  width: min(14px, 0.729vw);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}
.fig-story-card div span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fig-story-card div b {
  color: #ffd905;
  font-weight: 400;
}

.fig-hero-copy {
  left: 31.875%;
  top: 72.1%;
  width: 36.25%;
  height: 20.021%;
  text-align: center;
  color: #000;
  font-family: MiSans, "Noto Sans SC", sans-serif;
  z-index: 5;
}
.fig-hero-copy h1 {
  font-size: clamp(42px, 3.333vw, 64px);
  line-height: 1;
  font-weight: 800;
}
.fig-hero-copy p {
  margin-top: clamp(16px, 1.25vw, 24px);
  color: #767c8e;
  font-size: clamp(18px, 1.667vw, 32px);
  line-height: 1;
}
.fig-download-btns {
  margin: clamp(34px, 2.708vw, 52px) auto 0;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 1.458vw, 28px);
}
.fig-dl-btn {
  width: clamp(240px, 14.583vw, 280px);
  height: clamp(58px, 3.438vw, 66px);
  border-radius: clamp(10px, 0.625vw, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 0.833vw, 16px);
  background: #000;
  color: #fff;
  font-size: clamp(17px, 1.042vw, 20px);
  font-weight: 500;
  line-height: 1;
  transition: transform var(--transition), box-shadow var(--transition);
}
.fig-dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.fig-dl-btn svg {
  width: clamp(22px, 1.354vw, 26px);
  height: clamp(22px, 1.354vw, 26px);
  flex: 0 0 auto;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  background: linear-gradient(180deg, #ffd600 0%, #ffe15a 68%, #fffdf2 100%);
  overflow: hidden;
  padding: 72px 40px 68px;
  display: flex;
  align-items: center;
  min-height: 720px;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.32) 0 2px, transparent 2.5px),
    linear-gradient(168deg, transparent 0 63%, rgba(255,255,255,0.82) 63.2% 100%);
  background-size: 34px 34px, 100% 100%;
  background-position: 0 18px, center;
  opacity: 0.72;
}
.hero-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 20px;
}

/* Floating geo tags */
.hero-tag {
  position: absolute;
  background: white;
  color: var(--black);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  white-space: nowrap;
  animation: float 3.5s ease-in-out infinite;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tag-nz { top: 14%; left: 6%; animation-delay: 0s; }
.tag-uk { top: 53%; left: 5%; animation-delay: 0.6s; }
.tag-ca { top: 15%; right: 8%; animation-delay: 1.1s; }
.tag-us { top: 58%; right: 8%; animation-delay: 0.3s; }
.tag-it { bottom: 20%; right: 13%; animation-delay: 0.9s; }
.tag-jp { bottom: 22%; left: 14%; animation-delay: 1.4s; }

/* Phone mockup */
.hero-phone {
  position: relative;
  width: min(760px, 100%);
  height: 460px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-shell {
  position: relative;
  width: 250px;
  height: 500px;
  padding: 14px;
  border: 7px solid #080808;
  border-radius: 44px;
  background: #111;
  box-shadow: 0 34px 70px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.16);
  animation: float 4.5s ease-in-out infinite;
  animation-delay: 0.3s;
}
.phone-shell::before,
.phone-shell::after {
  content: '';
  position: absolute;
  left: -11px;
  width: 4px;
  background: #333;
  border-radius: 4px 0 0 4px;
}
.phone-shell::before { top: 112px; height: 50px; }
.phone-shell::after { top: 184px; height: 78px; }
.phone-notch {
  position: absolute;
  top: 19px;
  left: 50%;
  width: 92px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 18px;
  background: #000;
  z-index: 3;
}
.phone-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 33px;
  background: #fafbff;
  padding: 58px 10px 14px;
}
.phone-topbar {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.phone-menu-line,
.phone-menu-line::before,
.phone-menu-line::after {
  display: block;
  width: 16px;
  height: 2px;
  background: #20242b;
  border-radius: 2px;
}
.phone-menu-line { position: relative; }
.phone-menu-line::before,
.phone-menu-line::after {
  content: '';
  position: absolute;
  left: 0;
}
.phone-menu-line::before { top: -6px; }
.phone-menu-line::after { top: 6px; }
.phone-search {
  height: 28px;
  border-radius: 10px;
  background: #f2f4f9;
  color: #a4acb9;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-action-dot {
  width: 20px;
  height: 20px;
  border: 3px solid #20242b;
  border-radius: 50%;
}
.phone-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  color: #7d8694;
  font-size: 12px;
  margin-bottom: 8px;
}
.phone-tabs span {
  position: relative;
  text-align: center;
  line-height: 22px;
}
.phone-tabs .active {
  color: #111;
  font-weight: 700;
}
.phone-tabs .active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 28px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--yellow);
}
.phone-feed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.phone-feed article {
  min-width: 0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(34,42,65,0.06);
}
.phone-feed article:nth-child(2n) { transform: translateY(22px); }
.phone-feed img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.phone-feed strong,
.phone-feed small {
  display: block;
  padding: 0 8px;
}
.phone-feed strong {
  color: #2e3440;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  margin-top: 8px;
}
.phone-feed small {
  color: #9aa3b2;
  font-size: 10px;
  margin: 4px 0 10px;
}
.hero-story-card {
  position: absolute;
  left: 98px;
  bottom: 62px;
  width: 240px;
  z-index: 4;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.18);
  overflow: hidden;
  padding-bottom: 18px;
}
.hero-story-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 112px;
}
.hero-story-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-story-card p {
  color: #1f232b;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  padding: 15px 20px 8px;
}
.hero-story-card span {
  display: block;
  color: #8b95a5;
  font-size: 12px;
  padding: 0 20px;
}
.hero-avatar {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  border: 5px solid #fff;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0,0,0,0.18);
  animation: float 4s ease-in-out infinite;
}
.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-avatar-left {
  width: 84px;
  height: 84px;
  left: 118px;
  top: 72px;
}
.hero-avatar-right {
  width: 74px;
  height: 74px;
  right: 126px;
  top: 58px;
  animation-delay: 0.4s;
}
.hero-avatar-bottom-left {
  width: 70px;
  height: 70px;
  left: 90px;
  bottom: 78px;
  animation-delay: 0.8s;
}
.hero-avatar-bottom-right {
  width: 72px;
  height: 72px;
  right: 136px;
  bottom: 92px;
  animation-delay: 1.1s;
}

/* Hero text */
.hero-text {
  max-width: 720px;
  z-index: 2;
  text-align: center;
  margin-top: -8px;
}
.hero-text h1 {
  font-size: clamp(34px, 4.3vw, 58px);
  font-weight: 800;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: 0;
}
.hero-text > p {
  font-size: clamp(16px, 2vw, 24px);
  color: #778195;
  margin-bottom: 28px;
  line-height: 1.6;
}
.hero-download-btns {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition);
}
.dl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.dl-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.dl-ios     { background: var(--black); color: var(--white); }
.dl-android { background: var(--black); color: var(--white); }

/* ===== MAP SECTION ===== */
.map-section {
  background: var(--dark);
  padding: 80px 40px;
  overflow: hidden;
}
.map-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.map-text h2 {
  color: var(--white);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.map-text h2 .highlight { color: var(--yellow); }
.map-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.map-bullets li {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  padding-left: 16px;
  position: relative;
  line-height: 1.6;
}
.map-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 5px; height: 5px;
  background: var(--yellow);
  border-radius: 50%;
}

/* World map graphic */
.map-graphic { position: relative; }
.world-map-bg {
  position: relative;
  width: 100%;
  padding-bottom: 56%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.map-dots {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}
.pin-dot {
  width: 12px; height: 12px;
  background: var(--yellow);
  border-radius: 50%;
  border: 2px solid var(--dark);
  position: relative;
  z-index: 2;
}
.pin-pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  opacity: 0;
  animation: pulse 2.5s ease-out infinite;
}
.map-pin:nth-child(odd) .pin-pulse   { animation-delay: 0.4s; }
.map-pin:nth-child(3n) .pin-pulse    { animation-delay: 0.9s; }
@keyframes pulse {
  0%   { opacity: 0.7; transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(2); }
}

/* ===== SERVICE SECTION ===== */
.service-section {
  padding: 80px 40px;
  background: linear-gradient(180deg, #fdfaf4 0%, #fff8e8 100%);
  overflow: hidden;
}
.service-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}
.service-center {
  text-align: center;
  margin-bottom: 48px;
}
.service-center h2 { font-size: clamp(22px, 2.8vw, 36px); font-weight: 800; margin-bottom: 10px; }
.service-center p  { color: var(--gray-text); font-size: 15px; }

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.scard {
  background: white;
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
}
.scard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.scard-img {
  width: 100%;
  height: 140px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}
.scard-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.scard-avatar {
  position: absolute;
  bottom: 8px; left: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid white;
  overflow: hidden;
}
.scard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.scard-tag  { font-size: 13px; font-weight: 600; color: var(--black); line-height: 1.4; }
.scard-sub  { font-size: 12px; color: var(--gray-text); margin-top: 3px; }

/* ===== FEATURES SECTION ===== */
.features-section { background: white; }
.features-section .section-title .highlight { color: var(--yellow); background: none; }
.features-cta {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--gray-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow-hover); }
.feature-tag {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 6px;
}
.feature-desc {
  font-size: 13px;
  color: var(--gray-text);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Preview mockups inside feature cards */
.feature-card-preview {
  background: white;
  border-radius: var(--radius-md);
  padding: 14px;
  min-height: 140px;
}

/* Overseas preview */
.prev-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.prev-card {
  flex: 1; min-width: 80px;
  background: var(--gray-light);
  border-radius: 8px;
  overflow: hidden;
}
.prev-card .prev-img { height: 60px; object-fit: cover; width: 100%; }
.prev-card .prev-img img { width: 100%; height: 100%; object-fit: cover; }
.prev-card .prev-text { font-size: 10px; font-weight: 600; padding: 5px 6px; color: var(--black); }
.prev-card.large .prev-img { height: 80px; }

/* Return preview */
.return-items { display: flex; flex-direction: column; gap: 8px; }
.return-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--gray-light);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
}
.return-item.highlight-item { background: #fff8cc; }
.ri-icon { font-size: 14px; }

/* School preview */
.school-card {
  background: var(--gray-light);
  border-radius: 8px;
  padding: 12px;
}
.school-header { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.school-degree { font-size: 10px; color: var(--gray-text); margin-bottom: 8px; }
.school-items { display: flex; flex-direction: column; gap: 4px; }
.school-item {
  font-size: 10px;
  padding: 4px 8px;
  background: white;
  border-radius: 4px;
  color: var(--gray-text);
}
.school-item.active { background: var(--yellow); color: var(--black); font-weight: 600; }

/* Visa preview */
.visa-items {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px 0;
}
.visa-item {
  flex: 1;
  background: var(--gray-light);
  border-radius: 10px;
  padding: 16px 8px;
  text-align: center;
}
.visa-icon { font-size: 24px; margin-bottom: 6px; }
.visa-label { font-size: 11px; font-weight: 600; color: var(--black); }

/* ===== JOIN CTA ===== */
.join-cta { background: var(--gray-light); }
.join-cta-box {
  background: var(--dark);
  border-radius: var(--radius-xl);
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.join-cta-box::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,214,0,0.12) 0%, transparent 70%);
  border-radius: 50%;
}
.join-cta-box h2 { color: var(--white); margin-bottom: 12px; }
.join-cta-box p  { color: rgba(255,255,255,0.55); margin-bottom: 32px; font-size: 15px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero-tag { display: none; }
  .hero-inner { gap: 40px; }
}
@media (max-width: 768px) {
  .fig-hero-stage {
    height: 152vw;
    max-height: none;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,0.44), transparent 36%),
      linear-gradient(180deg, #ffd905 0%, #ffda0a 68%, #fffdf2 100%);
  }
  .fig-hero-stage::before {
    background-size: 9.6vw 8.533vw;
  }
  .fig-orbit-left {
    left: -28%;
    top: 6%;
    width: 70%;
    height: 70%;
  }
  .fig-orbit-right {
    right: -28%;
    top: 12%;
    width: 74%;
    height: 72%;
  }
  .fig-float {
    width: 7.467vw;
  }
  .fig-float-a { left: 3.6%; top: 33.882%; }
  .fig-float-b { left: -12.533%; top: 66.447%; }

  .fig-tag-pill {
    gap: 0.933vw;
    padding: 0 2.133vw 0 1.067vw;
    box-shadow: 0 1.6vw 4vw rgba(0,0,0,0.14);
    font-size: 2.133vw;
  }
  .fig-tag-pill img,
  .fig-flag-jp {
    width: 4vw;
    height: 4vw;
  }
  .hero-figma .tag-nz { left: -53.867%; top: 23.684%; width: 23.794%; height: 11.075%; }
  .hero-figma .tag-uk { left: 16.133%; top: 7.127%; width: 21.830%; height: 10.746%; }
  .hero-figma .tag-ca { left: 77.600%; top: 30.921%; width: 19.410%; height: 9.116%; }
  .hero-figma .tag-us { left: 76.533%; top: 55.921%; width: 19.915%; height: 9.649%; }
  .hero-figma .tag-it { left: 134.267%; top: 75.439%; width: 22.267%; height: 10.987%; }
  .hero-figma .tag-jp { left: 7.333%; top: 61.513%; width: 20.800%; height: 10.526%; }

  .fig-phone {
    left: 28.800%;
    top: 14.364%;
    width: 42.533%;
    height: 65.789%;
  }
  .fig-phone-tabs {
    font-size: 1.593vw;
  }
  .fig-phone-tabs .active::after {
    height: 0.4vw;
  }
  .phone-post p {
    margin-top: 0.907vw;
    font-size: 1.593vw;
  }
  .phone-post div {
    margin-top: 1.067vw;
    grid-template-columns: 1.867vw 1fr auto;
    gap: 0.533vw;
    font-size: 1.365vw;
  }
  .phone-post div img {
    width: 1.867vw;
  }

  .fig-story-card {
    left: 15.867%;
    top: 29.934%;
    width: 21.333%;
    height: 27.723%;
    border-radius: 1.389vw;
  }
  .fig-story-card p {
    margin-top: 0.933vw;
    font-size: 1.659vw;
  }
  .fig-story-card div {
    margin-top: 1.2vw;
    grid-template-columns: 1.867vw 1fr auto;
    gap: 0.533vw;
    font-size: 1.422vw;
  }
  .fig-story-card div img {
    width: 1.867vw;
  }

  .fig-hero-copy {
    left: 3.600%;
    top: 70.95%;
    width: 92.800%;
    height: 24.123%;
  }
  .fig-hero-copy h1 {
    font-size: 8.4vw;
  }
  .fig-hero-copy p {
    margin-top: 3.2vw;
    font-size: 4vw;
  }
  .fig-download-btns {
    margin-top: 7.6vw;
    gap: 3.2vw;
  }
  .fig-dl-btn {
    width: 40vw;
    height: 11.867vw;
    border-radius: 1.6vw;
    gap: 1.867vw;
    font-size: 3.733vw;
  }
  .fig-dl-btn svg {
    width: 5.067vw;
    height: 5.067vw;
  }

  .hero {
    padding: 34px 0 48px;
    min-height: 650px;
  }
  .hero-bg {
    background-size: 26px 26px, 100% 100%;
    background-position: -6px 10px, center;
  }
  .hero-inner {
    gap: 10px;
    text-align: center;
  }
  .hero-phone {
    width: 100%;
    height: 420px;
  }
  .phone-shell {
    width: 214px;
    height: 428px;
    border-width: 6px;
    border-radius: 38px;
    padding: 12px;
  }
  .phone-notch {
    top: 17px;
    width: 78px;
    height: 24px;
  }
  .phone-screen {
    border-radius: 28px;
    padding: 50px 9px 12px;
  }
  .phone-feed img { height: 78px; }
  .phone-feed strong { font-size: 10px; }
  .hero-story-card {
    left: 22px;
    bottom: 34px;
    width: 190px;
    border-radius: 16px;
    padding-bottom: 12px;
  }
  .hero-story-images { height: 90px; }
  .hero-story-card p {
    font-size: 12px;
    padding: 10px 12px 4px;
  }
  .hero-story-card span {
    font-size: 10px;
    padding: 0 12px;
  }
  .hero-avatar { border-width: 4px; }
  .hero-avatar-left {
    width: 64px;
    height: 64px;
    left: 74px;
    top: 22px;
  }
  .hero-avatar-right {
    width: 56px;
    height: 56px;
    right: 58px;
    top: 28px;
  }
  .hero-avatar-bottom-left {
    width: 58px;
    height: 58px;
    left: 48px;
    bottom: 18px;
  }
  .hero-avatar-bottom-right {
    width: 58px;
    height: 58px;
    right: 42px;
    bottom: 70px;
  }
  .hero-text {
    max-width: 100%;
    padding: 0 20px;
    margin-top: 0;
  }
  .hero-text h1 { font-size: 32px; }
  .hero-text > p {
    font-size: 16px;
    margin-bottom: 22px;
  }
  .hero-download-btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .dl-btn {
    justify-content: center;
    min-height: 58px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 15px;
  }

  .map-section { padding: 60px 20px; }
  .map-inner { grid-template-columns: 1fr; gap: 40px; }

  .service-section { padding: 60px 20px; }
  .service-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .features-grid { grid-template-columns: 1fr; }

  .join-cta-box { padding: 40px 24px; }
}
@media (max-width: 480px) {
  .hero { min-height: 620px; }
  .service-cards { grid-template-columns: 1fr; }
  .hero-tag { display: none; }
}