/* ===== Tokens (từ Figma: 조합안 E v7 · PC 1920) ===== */
:root {
  --mint: #09bcb0;
  --mint-dark: #099e99;
  --navy: #0f1b2d;
  --ink: #191f28;
  --body: #4e5968;
  --muted: #7b8491;
  --hero-desc: #43505f;
  --footer-text: #8b95a1;
  --line: #e5e8eb;
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.container--narrow { max-width: 1140px; }

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 14px 20px;
}
.header__bar {
  width: 100%;
  max-width: 1140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 18px;
  background: #fff;
  border-radius: 999px;
  filter: drop-shadow(0 4px 9px rgba(9, 188, 176, 0.12));
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 27.2px;
  color: var(--navy);
}
.header__cta {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--mint);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22.4px;
  transition: background-color .2s;
}
.header__cta:hover { background: var(--mint-dark); }

/* ===== Hero ===== */
.hero-bg {
  background: linear-gradient(180deg, #ddf6f2 0%, #f2fbfa 60%, #fff 100%);
}
.hero {
  padding: 40px 0 25px;
  text-align: center;
  /* Chữ nền "Wegivepay" rộng hơn màn hình: cắt tại hero để trang không bị tràn ngang trên mobile/tablet */
  overflow: hidden;
}
@supports (overflow: clip) {
  .hero { overflow: visible; overflow-x: clip; }
}
.hero__eyebrow {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--mint);
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}
.hero__title-sm {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.hero__title-lg {
  font-size: clamp(60px, 10vw, 100px);
  font-weight: 800;
  line-height: 1.176;
  letter-spacing: -0.02em;
  color: var(--mint);
}
.hero__desc {
  padding-top: 12px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--hero-desc);
}

/* Store buttons */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-top: 22px;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 190px;
  height: 54px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  transition: transform .2s, box-shadow .2s;
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 27, 45, .14); }
.store-btn img { width: 23px; height: 26px; margin: 0 1px; }
.store-btn__arrow {
  margin-left: auto;
  width: 26px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}
.store-btn--dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.store-btn--light { background: #fff; border-color: #cbede8; color: var(--navy); }
.store-btn--light .store-btn__arrow { color: #111; }
.store-btn--borderless { border-color: transparent; }

/* Hero visual stage: toạ độ theo khung 1060×729 của Figma, scale bằng container units */
.hero-stage-wrap {
  container-type: inline-size;
  width: min(1060px, 100% - 40px);
  margin: 54px auto 0;
}
.hero-stage {
  --u: calc(100cqw / 1060);
  position: relative;
  aspect-ratio: 1060 / 729;
}
.hero-stage > * { position: absolute; }
.hero-stage__word {
  left: calc(-430 * var(--u));
  top: calc(-60 * var(--u));
  width: calc(1920 * var(--u));
  font-family: "Inter", var(--font);
  font-weight: 800;
  font-size: calc(364.79 * var(--u));
  line-height: 1.21;
  letter-spacing: calc(-10 * var(--u));
  color: #fff;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.hero-stage__left {
  left: calc(83.66 * var(--u));
  top: calc(19.55 * var(--u));
  width: calc(352.45 * var(--u));
  filter: drop-shadow(0 10px 17px rgba(31, 61, 84, .1));
}
.hero-stage__right {
  left: calc(690.52 * var(--u));
  top: calc(353.07 * var(--u));
  width: calc(218.5 * var(--u));
  filter: drop-shadow(0 19px 17px rgba(31, 61, 84, .1));
}
.hero-stage__phone {
  left: calc(344 * var(--u));
  top: 0;
  width: calc(372 * var(--u));
  filter: drop-shadow(0 16px 14px rgba(15, 27, 45, .22));
}
/* Ảnh export có nền: cắt đúng thân điện thoại (348×700 trong khung 372×728) */
.hero-stage__phone img {
  width: 100%;
  clip-path: inset(0 3.2% 3.85% 3.2% round calc(43 * var(--u)));
}

/* Glass floating cards */
.float-card {
  display: flex;
  align-items: center;
  gap: calc(9.5 * var(--u));
  width: calc(197.6 * var(--u));
  min-height: calc(55.1 * var(--u));
  padding: calc(8.55 * var(--u)) calc(11.4 * var(--u)) calc(8.55 * var(--u)) calc(8.55 * var(--u));
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: calc(21.85 * var(--u));
  background: linear-gradient(140deg, rgba(255,255,255,.85) 8%, rgba(238,253,250,.72) 28%, rgba(213,249,243,.59) 48%, rgba(230,244,248,.62) 79%, rgba(255,255,255,.8) 92%);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  box-shadow: 0 13.3px 24.7px rgba(48, 81, 154, .1), inset 0 1px 2px #fff;
  text-align: left;
  animation: float 4s ease-in-out infinite;
}
.float-card--charge { left: calc(743.2 * var(--u)); top: calc(299.5 * var(--u)); }
.float-card--pay { left: calc(119.2 * var(--u)); top: calc(463.5 * var(--u)); animation-delay: -2s; }
.float-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  border-radius: calc(11.4 * var(--u));
  background: #fff;
  overflow: hidden;
}
.float-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.float-card__text { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.float-card__text strong {
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: #30519a;
}
.float-card__text small {
  font-size: calc(12 * var(--u));
  line-height: 1;
  color: #65848c;
  white-space: nowrap;
}
.float-card__mark {
  margin-left: auto;
  font-size: calc(19 * var(--u));
  color: #359e9a;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-8 * var(--u))); }
}
@media (prefers-reduced-motion: reduce) {
  .float-card { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===== Section common ===== */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.section-head__eyebrow {
  font-size: 13px;
  font-weight: 700;
  line-height: 20.8px;
  letter-spacing: 1.04px;
  color: var(--mint);
}
.section-head__title {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.72px;
  color: var(--navy);
}

/* ===== Benefit ===== */
.section--benefit { padding-top: 112px; }
.benefits {
  display: grid;
  gap: 48px;
  margin-top: 48px;
}
.benefit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 32px;
  border-radius: 28px;
}
.benefit--mint { background: #eff8f5; }
.benefit--blue { background: #eff5fb; }
.benefit--green { background: #f2f7f3; }
.benefit--peach { background: #fbf4ef; }
.benefit__visual {
  width: 100%;
  aspect-ratio: 518 / 330;
  border-radius: 28px;
  object-fit: cover;
}
.benefit__text { padding-left: 34px; }
.benefit--reverse .benefit__visual { order: 2; }
.benefit--reverse .benefit__text { order: 1; padding-left: 10px; }
.benefit__eyebrow {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.3px;
  color: var(--mint-dark);
}
.benefit__title {
  margin-top: 4px;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.19px;
  color: var(--ink);
}
.benefit__desc {
  padding-top: 20px;
  font-size: 28px;
  line-height: 1.6;
  color: var(--body);
  white-space: nowrap;
}

/* ===== Advantage & Easy cards ===== */
.section--advantage { padding-top: 112px; }
.advantage-band {
  padding: 80px 0;
  background: rgba(236, 243, 251, .51);
}
.section--easy { padding: 112px 0; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.card__media,
.card__frame {
  width: 100%;
  aspect-ratio: 348 / 417.6;
  border-radius: 28px;
  overflow: hidden;
  object-fit: cover;
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; }
.card__frame img.is-contain { object-fit: contain; }
.card__frame--navy { background: #e4f0f9; }
.card__frame--mint { background: #dff0f0; }
.card__frame--lavender { background: linear-gradient(130deg, #e5eafb 0%, #eae6fb 100%); }
.card__title {
  padding-top: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 33px;
  letter-spacing: -0.7px;
  color: var(--ink);
}
.card__desc {
  padding-top: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24.75px;
  color: var(--muted);
}

/* ===== CTA ===== */
.cta {
  position: relative;
  min-height: 484px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(7,17,32,.17), rgba(7,17,32,.23) 50%, rgba(7,17,32,.15)),
    url("assets/cta-bg.png") center 20% / cover no-repeat;
  background-blend-mode: multiply, normal;
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 112px;
  padding-bottom: 112px;
  text-align: center;
}
.cta__eyebrow {
  font-size: 20px;
  font-weight: 500;
  line-height: 25.6px;
  color: #e6fbf8;
}
.cta__title {
  padding-top: 10px;
  font-size: clamp(32px, 4.5vw, 44px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.84px;
  color: #fff;
}
.store-buttons--cta { padding-top: 28px; }
.store-buttons--cta .store-btn { min-width: 0; padding: 9px 20px 9px 12px; height: 48px; }

/* ===== Footer ===== */
.footer { border-top: 1px solid var(--line); }
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 36px;
  padding-bottom: 36px;
  font-size: 13px;
  line-height: 20.8px;
  color: var(--footer-text);
}
.footer__brand {
  font-size: 15px;
  font-weight: 800;
  line-height: 24px;
  color: var(--ink);
}

/* ===== Responsive ===== */
@media (max-width: 1199px) {
  .benefit__eyebrow { font-size: 22px; }
  .benefit__title { font-size: 40px; }
  .benefit__desc { font-size: 20px; white-space: normal; }
  .benefit__desc br { display: none; }
  .benefit__text, .benefit--reverse .benefit__text { padding-left: 0; }
}

@media (max-width: 860px) {
  .section--benefit, .section--advantage { padding-top: 80px; }
  .section--easy { padding: 80px 0; }
  .advantage-band { padding: 64px 0; }
  .benefits { gap: 24px; margin-top: 36px; }
  .benefit { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; border-radius: 24px; }
  .benefit--reverse .benefit__visual { order: 0; }
  .benefit__visual { border-radius: 20px; }
  .benefit__eyebrow { font-size: 17px; }
  .benefit__title { font-size: 30px; }
  .benefit__desc { padding-top: 12px; font-size: 17px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .card__title { font-size: 22px; line-height: 30px; }
  .card__desc { font-size: 16px; }
  .cta { min-height: 380px; }
  .cta__inner { padding-top: 80px; padding-bottom: 80px; }
}

@media (max-width: 520px) {
  .header { padding: 10px 12px; }
  .hero__desc { font-size: 16px; }
  .hero__desc br { display: none; }
  .store-btn { min-width: 160px; }
  .hero-stage-wrap { width: calc(100% - 16px); }
}