/* 印度下载页独立样式，不依赖 CDN 或客户端应用初始化。 */
@font-face { font-family: "Landing Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/anton-latin.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  color: #f4fff4;
  background: #011b11;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.landing {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: 88px;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  overflow: clip;
  background: radial-gradient(ellipse at 50% 20%, #087b36 0, #034626 35%, #022b1a 68%);
  box-shadow: 0 0 100px #0006;
}
.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid #38b96640; background: #022b1acc; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 23px; font-weight: 900; letter-spacing: -.8px; }
.brand img, .download-brand img { flex-shrink: 0; border: 1px solid #e6bd5870; border-radius: 11px; }
.brand span { overflow-wrap: anywhere; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #532500; background: linear-gradient(#ffef8c, #ffc82d 40%, #eda11a); border: 1px solid #ffe99e; box-shadow: 0 4px 16px #e5a00030, inset 0 1px 0 #fff8; font-weight: 900; text-transform: uppercase; transition: filter .15s, transform .15s; }
.button:hover { filter: brightness(1.1); }
.button:active { transform: translateY(1px); }
.button-small { flex-shrink: 0; min-height: 40px; padding: 10px 13px; border-radius: 24px; font-size: 11px; letter-spacing: .25px; }
.button-small span { font-size: 18px; line-height: 1; }
.hero { position: relative; padding: 22px 16px 0; text-align: center; }
.eyebrow { color: #bbefd0; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
h1, .guide h2, .feature-card h2 { font-family: "Landing Anton", Impact, "Arial Black", Arial, sans-serif; font-weight: 400; }
h1 { margin-top: 9px; color: #ffdf45; font-size: clamp(36px, 11vw, 48px); line-height: 1.06; letter-spacing: -.6px; text-shadow: 0 3px 0 #543a00, 0 5px 14px #0008; }
h1 span { color: #9cfa60; }
.hero-intro { max-width: 310px; margin: 13px auto 0; font-size: 12px; line-height: 1.6; color: #d2efdb; }
.hero-art { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 326px; margin-top: 12px; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; inset: 6% 3% 0; border-radius: 50%; background: radial-gradient(#c1e94660, transparent 68%); filter: blur(10px); }
.phone { position: absolute; top: 19px; width: 43%; height: 252px; padding: 10px 9px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border: 3px solid #d5a342; border-radius: 24px; color: #ffe89d; background: linear-gradient(150deg, #5f3912, #092e1d 35%, #00170f); box-shadow: 0 12px 24px #0008, inset 0 0 0 3px #1e170c; font-size: 9px; overflow: hidden; }
.phone-left { left: 3px; transform: rotate(-8deg); }
.phone-right { right: 3px; transform: rotate(8deg); }
.phone strong { font-size: 10px; letter-spacing: .5px; }
.phone-notch { width: 35%; height: 8px; margin-top: -5px; background: #15140b; border-radius: 0 0 8px 8px; }
.message-icon { width: 63px; height: 46px; border: 1px solid #d4e99a; border-radius: 16px 16px 16px 0; font-size: 29px; line-height: 30px; color: #05452c; background: linear-gradient(#fff9b9, #c4e977); }
.phone-row { display: flex; justify-content: space-between; gap: 5px; width: 100%; padding: 7px 5px; background: #b7bf461c; border: 1px solid #c6c64950; border-radius: 5px; }
.phone-row b { color: #aff093; }
.phone-pill { width: 100%; padding: 5px 2px; background: linear-gradient(#ffd752, #d99c21); border-radius: 20px; color: #473008; font-size: 8px; font-weight: 900; }
.reward-symbol { font-size: 66px; line-height: 1; color: #ffe577; text-shadow: 2px 3px #9a6810; }
.hero-person { position: relative; z-index: 1; width: 248px; height: 326px; object-fit: cover; object-position: center; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 76%, transparent 100%); mask-image: linear-gradient(transparent, #000 12%, #000 76%, transparent 100%); border-radius: 28px 28px 0 0; }
.spark { position: absolute; z-index: 2; color: #ffe58b; font-size: 28px; text-shadow: 0 0 12px #ffd665; animation: glimmer 3s ease-in-out infinite; }
.spark-left { top: 4px; left: 15px; }
.spark-right { top: 100px; right: 6px; animation-delay: 1s; }
.invite-badge { position: relative; display: inline-block; margin-top: -3px; padding: 8px 12px; border: 1px solid #fa9380; border-radius: 22px; background: linear-gradient(90deg, #af2233, #e23d4a, #b52635); font-size: 11px; font-weight: 800; box-shadow: 0 4px 14px #0004; }
.invite-badge span { margin-left: 5px; color: #ffe992; }
.invite-badge::after { content: ""; position: absolute; bottom: -7px; left: calc(50% - 7px); border: 7px solid transparent; border-bottom: 0; border-top-color: #d53743; }
.button-primary { display: flex; width: 100%; max-width: 342px; min-height: 66px; margin: 18px auto 0; border: 3px solid #ffe99c; border-radius: 23px; box-shadow: 0 7px 22px #edb22866, inset 0 0 0 3px #eca921; font-size: 25px; letter-spacing: .3px; }
.button-primary svg { width: 26px; height: 26px; }
.download-note { margin: 13px 0 0; color: #c4decb; font-size: 10px; }
.features { display: flex; flex-direction: column; gap: 14px; padding: 0 16px; margin-top: 27px; }
.feature-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 146px; padding: 17px; overflow: hidden; border: 1px solid #64c67e66; border-radius: 17px; background: linear-gradient(110deg, #07552f, #064c29 55%, #023a22); box-shadow: inset 0 1px 0 #b4ee9b20, 0 6px 12px #0002; }
.feature-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
.card-kicker { margin-bottom: 6px; font-size: 9px; font-weight: 800; line-height: 1.5; letter-spacing: .65px; text-transform: uppercase; color: #a9e6ba; }
.feature-card h2 { color: #ffe16b; font-size: 24px; line-height: 1.08; }
.feature-card h2 span { color: #fff; font-size: 17px; }
.feature-copy > p:last-child { margin-top: 8px; color: #c3e2cc; font-size: 11px; line-height: 1.6; }
.sim-art { flex-shrink: 0; width: 76px; height: 99px; padding: 9px; text-align: center; color: #6e4710; border: 2px solid #ffe99a; border-radius: 12px 22px 12px 12px; background: linear-gradient(120deg, #ffdf65, #eba519); box-shadow: 4px 7px 0 #011a1350, inset 0 0 0 4px #d8941d; transform: rotate(7deg); }
.sim-art > span { font-size: 10px; font-weight: 900; }
.sim-art b { font-size: 12px; letter-spacing: 1px; }
.sim-chip { height: 34px; margin: 5px 0; border: 1px solid #805a16; border-radius: 7px; background: linear-gradient(transparent 46%, #97691f 46%, #97691f 50%, transparent 50%), linear-gradient(90deg, transparent 31%, #97691f 31%, #97691f 33%, transparent 33%, transparent 66%, #97691f 66%, #97691f 68%, transparent 68%), #f9dd87; }
.feature-setup { border-color: #7fda9f90; background: linear-gradient(115deg, #03552b, #086338, #023c24); }
.feature-setup .feature-copy { text-align: right; }
.feature-setup h2 { font-size: 25px; }
.feature-setup h2 span { font-size: 16px; }
.community-art { position: relative; width: 104px; height: 122px; flex-shrink: 0; }
.community-art > img:first-child { width: 100%; height: 100%; object-fit: cover; border: 2px solid #edcb71; border-radius: 15px; box-shadow: 0 0 17px #ffde652b; }
.mini-brand { position: absolute; right: -7px; bottom: -5px; border: 1px solid #fff3a5; border-radius: 7px; }
.reward-art { position: relative; flex-shrink: 0; width: 88px; height: 104px; }
.coin { position: absolute; top: 35px; left: -7px; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid #ffe993; border-radius: 50%; color: #80551a; background: #eab63c; font-size: 25px; font-weight: 800; box-shadow: 0 4px 8px #0005; }
.mini-phone { position: absolute; right: 0; width: 61px; height: 102px; padding: 6px; border: 2px solid #e9b95c; border-radius: 13px; background: linear-gradient(135deg, #3f380f, #012e1a); transform: rotate(9deg); }
.mini-phone > span { display: block; width: 25px; height: 5px; margin: 0 auto 6px; border-radius: 8px; background: #10170e; }
.mini-phone b { display: block; color: #a7f08d; text-align: center; font-size: 28px; }
.mini-phone i { display: block; height: 5px; margin-top: 6px; background: #e4d579; border-radius: 3px; }
.guide { margin: 27px 16px 0; padding: 20px 16px 15px; border: 1px solid #44c47870; border-radius: 24px; background: #02371fd9; box-shadow: 0 8px 20px #0003; }
.guide-heading { padding-bottom: 18px; border-bottom: 1px solid #50a87250; text-align: center; }
.guide .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
.guide h2 { margin-top: 8px; color: #ffdf59; font-size: 30px; line-height: 1.12; }
.guide h2 span { color: #fff; font-size: 25px; }
.steps { display: grid; gap: 17px; list-style: none; padding: 0; margin: 23px 0 0; }
.steps li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 16px 12px 12px; border: 1px solid #33794980; border-radius: 14px; background: #012a1c; }
.step-number { position: absolute; top: -8px; left: 14px; padding: 2px 8px; border-radius: 4px; color: #2d300b; background: #f5cc52; font-size: 10px; font-weight: 900; }
.steps img, .step-icon { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #d5b450; border-radius: 11px; }
.step-icon { display: grid; place-items: center; color: #ffe998; font-size: 12px; font-weight: 900; background: linear-gradient(130deg, #a56e12, #c79428); }
.step-message { font-size: 21px; letter-spacing: 1px; background: linear-gradient(140deg, #197d4c, #07533d); }
.steps h3 { font-size: 13px; line-height: 1.5; }
.steps p { margin-top: 3px; color: #bfdec9; font-size: 11px; line-height: 1.6; }
.install-help { margin-top: 16px; color: #b7d3c1; font-size: 10px; line-height: 1.7; }
.guide-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding-top: 13px; margin-top: 13px; border-top: 1px solid #33794980; color: #b2e8be; font-size: 9px; }
.guide-tags span::before { content: "✓ "; color: #ffe279; }
.notice { padding: 19px 25px 12px; color: #accbb6; font-size: 10px; line-height: 1.8; text-align: center; }
.notice p + p { margin-top: 9px; color: #89b199; }
/* 窄屏与桌面共用居中的固定栏，底部为手势区预留空间。 */
.download-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 430px; padding: 11px 16px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #4dc37c70; background: #022b1af5; backdrop-filter: blur(12px); box-shadow: 0 -5px 20px #0003; }
.download-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.download-brand > div { min-width: 0; }
.download-brand strong { display: block; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.download-brand span { display: block; margin-top: 2px; font-size: 9px; color: #e7cd7e; }
@keyframes glimmer { 50% { opacity: .5; transform: scale(.8); } }
@media (max-width: 359px) {
  .header { gap: 8px; padding: 12px; }
  .brand { gap: 6px; font-size: 20px; }
  .brand img { width: 36px; height: 36px; }
  .button-small { padding: 9px 10px; font-size: 10px; }
  .hero { padding-left: 12px; padding-right: 12px; }
  .hero-art { height: 292px; }
  .hero-person { width: 220px; height: 292px; }
  .phone { height: 229px; font-size: 8px; }
  .phone strong { font-size: 8px; }
  .invite-badge { font-size: 10px; padding: 8px 9px; }
  .features { padding: 0 12px; }
  .feature-card { padding: 14px; gap: 12px; }
  .feature-card h2 { font-size: 22px; }
  .feature-card h2 span { font-size: 15px; }
  .community-art { width: 88px; height: 115px; }
  .guide { margin-left: 12px; margin-right: 12px; padding-left: 13px; padding-right: 13px; }
  .download-bar { gap: 7px; padding-left: 12px; padding-right: 12px; }
  .download-brand { gap: 7px; }
  .download-brand strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }