:root {
  --blue: #087bf2;
  --deep-blue: #005fd7;
  --text: #193756;
  --muted: #71879c;
  --card: rgba(255, 255, 255, .88);
  --green: #00bd84;
  --orange: #ff9900;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: #f1f7fc;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.brand { display: flex; align-items: center; }
.brand img { object-fit: contain; }
.brand span { display: flex; flex-direction: column; color: #263f5a; }
.brand b { line-height: 1.05; }
.brand small { color: #688198; line-height: 1.2; }
.online {
  display: flex;
  align-items: center;
  color: #00a979;
  border: 1px solid #c9f2e6;
  border-radius: 99px;
  background: #edfff9;
  font-weight: 700;
}
.online i { display: block; border-radius: 50%; background: #00c58b; }

.page {
  position: relative;
  background: #F3F9FF url("img/bg@2x.webp") center top / 1280px auto no-repeat;
}
.content { position: relative; z-index: 2; margin: 0 auto; }
.hero { position: relative; }
.hero-copy { position: relative; z-index: 2; text-align: center; }
.hero-copy p { margin: 0; font-weight: 700; }
.bonus { margin: 0 auto; }
.countdown {
  margin: 0 auto;
  color: #56708a;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 8px 24px rgba(27, 103, 189, .12);
  text-align: center;
}
.countdown small { display: block; font-weight: 600; }
.countdown div { display: flex; align-items: center; justify-content: center; color: var(--blue); }
.countdown b { color: white; background: linear-gradient(#2095ff, #006ae0); border-radius: 3px; }
.countdown span { font-weight: 900; }
.hero-woman { position: absolute; object-fit: contain; object-position: bottom; }

.panel {
  position: relative;
  background: var(--card);
  box-shadow: 0 8px 22px rgba(66, 132, 195, .07);
  backdrop-filter: blur(5px);
}
.panel h2, .join-panel h2 { margin: 0; color: #235477; font-weight: 700; }
.panel p, .join-panel p { margin: 0; }
.intro { display: flex; }
.intro h2 { color: #0875dd; }
.intro-copy { position: relative; z-index: 2; }
.intro-copy > p { color: #5483a6; }
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); }
.benefits div { text-align: center; color: #4a7394; }
.benefits img { margin: 0 auto; }
.intro-phone { position: absolute; right: 0; bottom: 0; object-fit: contain; object-position: right bottom; }

.reward-panel > h2 { color: #1685e8; }
.reward-panel {
  border: 1px solid rgba(255, 255, 255, .88);
  background: linear-gradient(115deg, rgba(255, 255, 255, .94), rgba(232, 247, 255, .82));
}
.reward-list { display: grid; grid-template-columns: repeat(2, 1fr); }
.reward-list article {
  display: flex;
  align-items: center;
  border: 1px solid rgba(236, 244, 250, .95);
  background: linear-gradient(100deg, rgba(255, 255, 255, .98), rgba(247, 252, 255, .9));
  box-shadow: 0 5px 14px rgba(47, 111, 170, .08);
}
.reward-list article > img {
  flex: 0 0 auto;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(29, 79, 123, .16);
}
.reward-list p { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.reward-list b { color: #354b61; }
.reward-list small { color: #778b9e; line-height: 1.35; }
.reward-list strong {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00b86d;
  background: url("img/Group 48096749@2x.webp") center / contain no-repeat;
  white-space: nowrap;
}

.bank-panel h2 { color: #3b4d67; }
.fire { color: #ff3358; }
.banks { display: grid; grid-template-columns: repeat(3, 1fr); }
.banks button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.banks .bank-bg { width: 100%; height: 100%; }
.banks button span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.banks button span img { object-fit: contain; }

.section-title { display: flex; justify-content: space-between; align-items: flex-start; }
.section-title p { color: #8596a6; }
.section-title > span {
  display: inline-block;
  color: #fff;
  background: linear-gradient(135deg, #3cb4ff, #087bf2);
  border-radius: 3px;
  font-weight: 700;
}
.ranking { display: grid; grid-template-columns: repeat(3, 1fr); }
.ranking article {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #fff;
  border: 1px solid #edf3f9;
  box-shadow: 0 5px 14px rgba(47, 111, 170, .08);
  text-align: center;
}
.ranking em {
  color: #fff;
  border-radius: 3px;
  font-style: normal;
}
.rank-1 em { background: #f4c400; }
.rank-2 em { background: #c5c7ca; }
.rank-3 em { background: #ff8548; }
.ranking img {
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(33, 90, 145, .14);
}
.ranking b { color: #3a4551; }
.ranking small { color: #8b9aaa; }
.ranking strong { color: #ff9900; }

.steps { display: grid; grid-template-columns: repeat(2, 1fr); }
.steps-panel { background: rgba(235, 246, 255, .82); }
.steps article {
  position: relative;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 7px 18px rgba(47, 111, 170, .1);
  text-align: center;
}
.steps i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
  font-style: normal;
  font-weight: 700;
}
.steps h3 { margin: 0; color: #334b63; }
.steps p { color: #8a9bab; }
.steps img { margin: 0 auto; object-fit: contain; }

.commission { display: grid; grid-template-columns: repeat(3, 1fr); }
.commission article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  text-align: center;
}
.commission h3 { margin: 0; color: #fff; font-weight: 500; }
.commission strong { display: block; }
.commission strong small { font-size: .55em; }
.commission p { color: #70859b; }
.commission img { width: 100%; }
.level-a { border-color: #1285fb !important; }
.level-a h3 { background: linear-gradient(#26a6ff, #006de8); }
.level-a strong { color: #087df0; }
.level-b { border-color: #ff9147 !important; }
.level-b h3 { background: linear-gradient(#ffa163, #ff6b1e); }
.level-b strong { color: #ff7b2f; }
.level-c { border-color: #7657ff !important; }
.level-c h3 { background: linear-gradient(#9271ff, #6040ed); }
.level-c strong { color: #6f52ed; }

.faq-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  background: rgba(239, 247, 255, .86);
  box-shadow: 0 8px 22px rgba(47, 111, 170, .1);
}
.faq-list { display: grid; }
.faq-list article {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(235, 242, 249, .95);
  box-shadow: 0 5px 14px rgba(47, 111, 170, .08);
}
.faq-list img { flex: 0 0 auto; object-fit: contain; }
.faq-list p { display: flex; flex-direction: column; }
.faq-list b { color: #3c536b; }
.faq-list small { color: #7e91a4; line-height: 1.4; }

.join-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: rgba(255,255,255,.55);
  border: 4px solid transparent;
  background-image: linear-gradient(#e7f5ff, #e7f5ff), linear-gradient(90deg, #35d3e9, #087afa);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 25px rgba(0, 100, 230, .14);
}
.join-panel::before {
  position: absolute; inset: 0;
  content: "";
  background: url("img/Mask group@2x.webp") center bottom / cover no-repeat;
  opacity: .24;
  pointer-events: none;
}
.join-panel > * { position: relative; }
.join-panel h2 { color: #087bec; }
.join-panel p { color: #6283a0; }
.join-panel a { display: inline-block; color: #fff; font-weight: 700; }
.primary-btn { background: linear-gradient(90deg, #ffa800, #ff8612); }
.secondary-btn { background: linear-gradient(90deg, #7656ef, #246eff); }
.join-panel > small { display: block; color: #7a92a8; }

.site-footer { position: relative; z-index: 4; background: #fff; }
.footer-inner { display: flex; margin: 0 auto; }
.contact { flex: 1; }
.contact h2 { margin: 0; color: #31536e; }
.contact > div { display: grid; grid-template-columns: repeat(2, 1fr); }
.contact a {
  display: flex;
  align-items: center;
  border: 1px solid #e1ebf4;
  background: #fbfdff;
}
.contact a img { object-fit: contain; }
.contact a span { margin-left: auto; color: #8b9dac; }
.footer-brand, .qr {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.footer-brand img { object-fit: contain; }
.footer-brand small { color: #8193a5; }
.qr-code-wrap { position: relative; }
.qr-image { display: block; object-fit: contain; background: #fff; }
.qr-android {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
  transform: translate(-50%, -50%);
}
.qr b { color: #35516a; }

.chat {
  position: fixed;
  z-index: 50;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 15px rgba(0, 92, 205, .2);
  cursor: pointer;
}
.chat img { width: 100%; height: 100%; }
.mobile-cta { display: none; }
.contact-modal[hidden] { display: none !important; }