@font-face {
  font-family: "XingYue Display";
  src: url("/assets/fonts/xingyue-display.woff2?v=20261019-global-speed") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #050b0d;
  --surface: #0c1619;
  --surface-2: #101d20;
  --line: rgba(160, 196, 186, .16);
  --line-strong: rgba(160, 196, 186, .28);
  --text: #f3f8f6;
  --soft: #b5c8c2;
  --muted: #839991;
  --green: #22e6a1;
  --green-deep: #00b978;
  --ink: #03120d;
  --display: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --body: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.site-loading { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.no-script { max-width: 560px; margin: 15vh auto; padding: 30px; text-align: center; }
.no-script img { border-radius: 20px; }
.landing-shell { min-height: 100vh; overflow: hidden; background: var(--bg); }
.landing-container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }

.landing-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(5, 11, 13, .86); backdrop-filter: blur(18px); }
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 9px 30px rgba(34, 230, 161, .18); }
.brand > span, .footer-brand > span { display: flex; flex-direction: column; line-height: 1.15; }
.brand strong { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.language-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.language-switch a { min-width: 45px; padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; text-decoration: none; }
.language-switch a.active { background: rgba(34, 230, 161, .14); color: var(--green); }

.section-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }

.platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.platform-card { position: relative; min-width: 0; min-height: 138px; display: flex; flex-direction: column; overflow: hidden; padding: 13px 14px 14px; border: 1px solid rgba(153, 197, 184, .16); border-radius: 22px; background: linear-gradient(155deg, rgba(20, 39, 38, .76), rgba(7, 18, 19, .88)); box-shadow: 0 20px 55px rgba(0, 0, 0, .22); backdrop-filter: blur(16px); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.platform-card::after { position: absolute; top: -75px; right: -75px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 230, 161, .1), transparent 70%); content: ""; pointer-events: none; }
.platform-card:hover { transform: translateY(-3px); border-color: rgba(34, 230, 161, .34); box-shadow: 0 28px 70px rgba(0, 0, 0, .3); }
.platform-card.current-device { border-color: rgba(34, 230, 161, .58); box-shadow: 0 0 0 1px rgba(34, 230, 161, .12), 0 24px 65px rgba(0, 0, 0, .28); }
.platform-visual { min-height: 36px; display: grid; place-items: center; }
.platform-copy { min-height: 28px; text-align: center; }
.platform-buttons { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.platform-button { min-height: 42px; display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(135deg, #62f3c1, #1fe09e 62%, #05bd80); color: var(--ink); font-size: 11px; font-weight: 850; line-height: 1.2; text-align: center; text-decoration: none; transition: filter .2s ease, transform .2s ease; }
a.platform-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.platform-button.secondary { border-color: var(--line-strong); background: transparent; color: var(--soft); }
.platform-button.disabled { background: #172326; color: var(--muted); cursor: not-allowed; }
.platform-button.disabled.secondary { border-color: var(--line); background: transparent; }
.platform-button .button-platform-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(3,18,13,.12); }
.platform-logo > i, .button-platform-mark > i { width: 58%; height: 58%; display: block; background: currentColor; -webkit-mask: var(--platform-icon) center/contain no-repeat; mask: var(--platform-icon) center/contain no-repeat; }
.platform-logo.ios, .platform-logo.macos, .button-platform-mark.ios, .button-platform-mark.macos { --platform-icon: url("/assets/icons/platforms/apple.svg"); }
.platform-logo.android, .button-platform-mark.android { --platform-icon: url("/assets/icons/platforms/android.svg"); }
.platform-logo.windows, .button-platform-mark.windows { --platform-icon: url("/assets/icons/platforms/windows.svg"); }
.platform-button .button-label { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.platform-button .button-label small { margin-top: 1px; font-size: 8px; font-weight: 650; opacity: .76; }
.platform-button > svg { justify-self: end; }

.invite-section { position: relative; z-index: 3; padding: 0 0 78px; }
.invite-section[hidden] { display: none; }
.invite-card { display: flex; align-items: center; gap: 18px; padding: 23px 26px; border: 1px solid rgba(34, 230, 161, .28); border-radius: 22px; background: linear-gradient(110deg, rgba(34, 230, 161, .1), rgba(12, 22, 25, .94) 38%); box-shadow: 0 22px 55px rgba(0, 0, 0, .2); }
.invite-icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; background: rgba(34, 230, 161, .12); color: var(--green); }
.invite-copy { min-width: 0; flex: 1; }
.invite-copy h2 { margin: 4px 0 3px; font-size: 19px; }
.invite-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.invite-code { display: flex; flex-direction: column; align-items: center; padding: 8px 20px; border-left: 1px solid var(--line); }
.invite-code span { color: var(--muted); font-size: 9px; }
.invite-code strong { margin-top: 2px; color: var(--green); font-size: 24px; letter-spacing: .12em; }
#copy-invite, .register-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border-radius: 11px; font-size: 12px; font-weight: 800; cursor: pointer; text-decoration: none; }
#copy-invite { border: 1px solid var(--line-strong); background: transparent; color: var(--soft); }
.register-link { border: 1px solid var(--green); color: var(--green); }

.steps-section { padding: 96px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #081113; }
.steps-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(60px, 10vw, 140px); }
.steps-heading { position: sticky; top: 40px; }
.steps-heading h2, .help-card h2 { margin: 13px 0; font-family: var(--display); font-size: clamp(29px, 3.6vw, 44px); line-height: 1.16; letter-spacing: -.035em; }
.steps-heading p, .help-card p { margin: 0; color: var(--muted); line-height: 1.75; }
.steps-list { margin: 0; padding: 0; list-style: none; }
.steps-list li { position: relative; display: flex; gap: 22px; padding: 0 0 38px; }
.steps-list li:not(:last-child)::before { position: absolute; top: 47px; bottom: 7px; left: 23px; width: 1px; background: linear-gradient(var(--green), var(--line)); content: ""; }
.step-number { position: relative; z-index: 1; width: 47px; height: 47px; flex: none; display: grid; place-items: center; border: 1px solid rgba(34, 230, 161, .3); border-radius: 15px; background: #0d1c1e; color: var(--green); font-size: 14px; font-weight: 800; }
.step-copy { display: flex; flex-direction: column; padding-top: 2px; }
.step-copy strong { font-size: 18px; }
.step-copy span { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; }

.help-section { padding: 76px 0 100px; }
.help-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 45px 48px; border: 1px solid rgba(34, 230, 161, .24); border-radius: 26px; background: radial-gradient(circle at 82% 20%, rgba(34, 230, 161, .13), transparent 34%), linear-gradient(135deg, #0c1b1d, #081113); }
.help-card h2 { font-size: clamp(25px, 3vw, 35px); }
.support-button { min-height: 50px; display: inline-flex; align-items: center; gap: 9px; padding: 0 19px; border-radius: 13px; background: var(--green); color: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none; }

.landing-footer { border-top: 1px solid var(--line); background: #030809; }
.footer-inner { padding-top: 38px; padding-bottom: 34px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand strong { font-size: 14px; }
.footer-brand small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 22px; margin: 28px 0; }
.footer-inner nav a { color: var(--soft); font-size: 11px; text-decoration: none; }
.footer-inner nav a:hover { color: var(--green); }
.company-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; }

@media (max-width: 980px) {
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-card { min-height: 138px; }
}

@media (max-width: 840px) {
  .landing-container { width: min(100% - 30px, 1240px); }
  .landing-header { background: rgba(5, 11, 13, .94); }
  .header-inner { min-height: 68px; }
  .brand img { width: 37px; height: 37px; border-radius: 11px; }
  .brand strong { font-size: 15px; }
  .brand small { display: none; }
  .invite-card { align-items: flex-start; flex-wrap: wrap; }
  .invite-copy { flex-basis: calc(100% - 76px); }
  .invite-code { flex: 1; align-items: flex-start; padding-left: 0; border-left: 0; }
  .steps-section { padding: 76px 0; }
  .steps-layout { grid-template-columns: 1fr; gap: 45px; }
  .steps-heading { position: static; }
  .help-section { padding: 60px 0 76px; }
  .help-card { align-items: flex-start; flex-direction: column; padding: 32px 27px; }
  .support-button { max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-width: 540px) {
  .platform-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .platform-card { min-height: 0; padding: 11px 10px 10px; }
  .platform-visual { min-height: 40px; }
  .platform-copy { min-height: 27px; }
  .invite-icon { display: none; }
  .invite-copy { flex-basis: 100%; }
  #copy-invite, .register-link { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 2026 转化型下载落地页 */
.landing-header { position: sticky; top: 0; }
.header-inner { min-height: 68px; }
.header-inner > nav { display: flex; gap: 30px; margin-left: auto; }
.header-inner > nav a { color: var(--soft); font-size: 12px; font-weight: 700; text-decoration: none; }
.header-inner > nav a:hover { color: var(--green); }
.section { padding: 110px 0; }
.section-heading { max-width: 690px; margin: 0 auto 52px; text-align: center; }
.section-heading h2, .steps-heading h2, .compare-copy h2, .faq-layout h2 { margin: 14px 0 15px; font-family: var(--display); font-size: clamp(31px, 4vw, 50px); letter-spacing: -.045em; line-height: 1.12; }
.section-heading p, .compare-copy p, .faq-layout p { margin: 0; color: var(--muted); line-height: 1.8; }

.hero { position: relative; min-height: calc(100svh - 78px); display: flex; align-items: center; align-items: safe center; overflow: hidden; padding: 38px 0 44px; background: linear-gradient(145deg,#07110f,#09231c 52%,#071311); isolation: isolate; }
.hero::after { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 30%,rgba(4,20,18,.06) 0,rgba(3,12,14,.18) 42%,rgba(3,9,11,.62) 100%),linear-gradient(180deg,rgba(4,12,14,.14),rgba(4,14,13,.55)); content: ""; pointer-events: none; }
.hero-scene { position: absolute; z-index: -3; inset: -8px; background-image: url("/assets/media/hero-cinematic.webp"); background-position: center; background-size: cover; opacity: .84; filter: blur(1px) saturate(.98) brightness(1.05); transform: scale(1.025); pointer-events: none; }
.hero-glow { position: absolute; z-index: -2; top: 34%; left: 50%; width: min(900px,94vw); height: 520px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle,rgba(28,225,158,.12),transparent 66%); filter: blur(28px); pointer-events: none; }
.hero-layout { --hero-title-offset: clamp(-98px, -9.2vh, -26px); position: relative; z-index: 1; padding-bottom: 166px; text-align: center; }
.hero-brand, .hero-wordmark { position: relative; top: var(--hero-title-offset); }
.hero-brand { display: flex; justify-content: center; }
.hero-brand img { width: 60px; height: 60px; border-radius: 18px; box-shadow: 0 14px 40px rgba(34,230,161,.16); }
.hero-wordmark { margin: 12px auto 0; display: inline-flex; align-items: center; justify-content: center; color: #f8fcfb; font-family: var(--display); font-size: clamp(30px,3.4vw,46px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; text-shadow: 0 8px 28px rgba(0,0,0,.42); }
.hero-wordmark-separator { margin: 0 .22em; color: var(--green); }
.hero-service-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 17px; }
.hero-service-tags span { padding: 7px 12px; border: 1px solid rgba(78,230,180,.24); border-radius: 999px; background: rgba(20,88,69,.18); color: #a8d8c8; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.section-kicker::before { width: 22px; height: 1px; background: currentColor; content: ""; }
.story-section { padding: 96px 0 0; background: radial-gradient(circle at 50% 0,rgba(34,230,161,.08),transparent 32%),var(--bg); }
.story-copy { max-width: 840px; text-align: center; }
.story-copy h2 { margin: 13px 0 15px; font-family: var(--display); font-size: clamp(38px,5vw,62px); font-weight: 850; letter-spacing: -.055em; line-height: 1.07; }
.story-copy > p { max-width: 650px; margin: 0 auto; color: var(--soft); font-size: clamp(15px,1.4vw,18px); line-height: 1.75; }
.hero-invite[hidden] { display: none; }
.hero-invite { width: fit-content; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 21px auto 0; padding: 8px 10px 8px 13px; border: 1px solid rgba(34,230,161,.25); border-radius: 999px; background: rgba(7,28,23,.72); color: var(--soft); font-size: 10px; }
.hero-invite > b { display: grid; place-items: center; color: var(--green); }
.hero-invite > strong { color: var(--green); letter-spacing: .1em; }
.hero-invite > button, .hero-invite > a { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--soft); font-size: 9px; font-weight: 800; text-decoration: none; cursor: pointer; }
.hero-invite > a { border-color: rgba(34,230,161,.42); color: var(--green); }
.hero-preview { display: flex; justify-content: center; perspective: 1200px; }
.hero-downloads { position: relative; margin-top: calc(142px + var(--hero-title-offset)); }
.hero-highlights { position: absolute; right: 0; bottom: calc(100% + 24px); left: 0; }
.service-icon-strip { width: fit-content; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 auto; padding: 5px 7px; border: 1px solid rgba(153,197,184,.16); border-radius: 14px; background: linear-gradient(155deg,rgba(20,39,38,.7),rgba(7,18,19,.82)); box-shadow: 0 18px 46px rgba(0,0,0,.23); backdrop-filter: blur(16px); pointer-events: none; user-select: none; }
.service-copy { max-width: min(100%,900px); margin: 7px auto 0; text-align: center; overflow-wrap: break-word; }
.service-scenes { margin: 0; color: #edf8f4; font-size: 15px; font-weight: 650; line-height: 1.35; }
.service-scenes-caption { margin: 2px 0 0; color: var(--soft); font-size: 11px; line-height: 1.35; }
.service-brand-icon { --tile: #142126; --glyph: #fff; --service-icon: none; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: var(--tile); box-shadow: 0 7px 18px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.12); }
.service-brand-icon > i { width: 21px; height: 21px; display: block; background: var(--glyph); -webkit-mask: var(--service-icon) center/contain no-repeat; mask: var(--service-icon) center/contain no-repeat; }
.service-google { --tile: #f8faf9; --glyph: #4285f4; --service-icon: url("/assets/icons/services/google.svg"); }
.service-gmail { --tile: #fff; --glyph: #ea4335; --service-icon: url("/assets/icons/services/gmail.svg"); }
.service-youtube { --tile: #ff0033; --service-icon: url("/assets/icons/services/youtube.svg"); }
.service-facebook { --tile: #1877f2; --service-icon: url("/assets/icons/services/facebook.svg"); }
.service-chatgpt { --tile: #f5f7f6; --glyph: #101918; --service-icon: url("/assets/icons/services/chatgpt.svg"); }
.service-instagram { --tile: linear-gradient(145deg,#654cdb 4%,#d62976 49%,#f7a838 96%); --service-icon: url("/assets/icons/services/instagram.svg"); }
.service-whatsapp { --tile: #25d366; --service-icon: url("/assets/icons/services/whatsapp.svg"); }
.story-section > .benefits { margin-top: 64px; }
.phone-wrap { position: relative; width: min(100%,420px); padding: 16px; transform: rotateY(-4deg) rotateX(2deg); }
.preview-note { position: absolute; z-index: 3; top: 4px; right: -2px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5,11,13,.88); color: var(--muted); font-size: 10px; }
.phone { position: relative; padding: 22px 20px 20px; border: 1px solid rgba(154,202,190,.26); border-radius: 38px; background: linear-gradient(160deg,#13262a,#081113 74%); box-shadow: 0 50px 110px rgba(0,0,0,.52),0 0 90px rgba(45,126,255,.09); }
.phone::before { position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.035); border-radius: 31px; content: ""; pointer-events: none; }
.phone-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 2px 5px 24px; }
.phone-top i:first-child { width: 46px; height: 13px; border-radius: 999px; background: #030708; }
.phone-top i:last-child { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px var(--green); }
.phone-top strong { font-size: 12px; }
.phone-copy { padding: 16px 5px 17px; }
.phone-copy small { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.phone-copy h2 { max-width: 260px; margin: 7px 0 0; font-size: 24px; letter-spacing: -.04em; line-height: 1.18; }
.node-list { display: flex; flex-direction: column; gap: 9px; }
.node-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 74px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 17px; background: rgba(4,10,12,.48); }
.node-row.active { border-color: rgba(34,230,161,.44); background: linear-gradient(100deg,rgba(34,230,161,.11),rgba(8,17,19,.7)); }
.node-row > b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: rgba(34,230,161,.1); color: var(--green); }
.node-row > span { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.node-row > span > strong { font-size: 11px; }
.node-row > small { color: var(--muted); font-size: 9px; }
.node-row em, .scene-card em { display: flex; flex-wrap: wrap; gap: 4px; font-style: normal; }
.node-row em span, .scene-card em span { padding: 3px 7px; border: 1px solid rgba(108,132,255,.36); border-radius: 999px; background: rgba(82,105,255,.15); color: #c1c9ff; font-size: 8px; font-weight: 850; }
.phone > button { width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 15px; background: var(--green); color: var(--ink); font-size: 12px; font-weight: 850; }
.phone > button i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--ink); }

.benefits { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #081113; }
.benefits-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.benefit-item { display: flex; align-items: center; gap: 14px; min-height: 118px; padding: 24px 28px; border-right: 1px solid var(--line); }
.benefit-item:last-child { border-right: 0; }
.benefit-item > b { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid rgba(34,230,161,.2); border-radius: 14px; background: rgba(34,230,161,.08); color: var(--green); }
.benefit-item > span { display: flex; flex-direction: column; }
.benefit-item strong { font-size: 13px; }
.benefit-item small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.scenes-section { background: radial-gradient(circle at 50% 0,rgba(74,92,255,.09),transparent 35%),var(--bg); }
.scenes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.scenes-showcase { display: grid; grid-template-columns: minmax(320px,.82fr) minmax(0,1.18fr); align-items: center; gap: clamp(35px,7vw,90px); }
.scenes-showcase .scenes-grid { grid-template-columns: 1fr; }
.scenes-showcase .scene-card { min-height: 155px; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 20px; }
.scenes-showcase .scene-card h3 { margin-top: 2px; }
.scene-phone .phone-wrap { margin: 0 auto; transform: rotateY(4deg) rotateX(2deg); }
.scene-card { min-height: 245px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border: 1px solid var(--line); border-radius: 25px; background: linear-gradient(155deg,rgba(18,32,35,.96),rgba(8,16,18,.98)); }
.scene-card > b { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: rgba(86,105,255,.1); color: #9eacff; }
.scene-card h3 { margin: 30px 0 8px; font-size: 21px; }
.scene-card p { margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.scene-card em span { padding: 4px 9px; font-size: 9px; }
.service-disclaimer { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0; color: var(--muted); font-size: 10px; }

.platform-card { min-height: 138px; }
.platform-logo { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(34,230,161,.2); border-radius: 12px; background: rgba(34,230,161,.08); color: #edf8f4; }
.platform-logo.windows { color: #69c2ff; }
.platform-logo.android { color: #68da91; }
.platform-copy h2 { margin: 4px 0 3px; font-size: 15px; }
.platform-copy > small { display: inline-block; margin-top: 2px; color: var(--soft); font-size: 9px; font-weight: 700; }

.invite-section { padding: 0 0 90px; background: #071012; }
.invite-card > b { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 15px; background: rgba(34,230,161,.1); color: var(--green); }
.invite-card > div { flex: 1; }
.invite-card h2 { margin: 5px 0; font-size: 18px; }
.invite-card p { margin: 0; color: var(--muted); font-size: 11px; }
.invite-card aside { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.invite-card aside small { color: var(--muted); font-size: 9px; }
.invite-card aside strong { color: var(--green); font-size: 22px; letter-spacing: .12em; }
.invite-card button, .invite-card > a { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 11px; background: transparent; color: var(--soft); font-size: 11px; font-weight: 800; text-decoration: none; cursor: pointer; }
.invite-card > a { display: inline-flex; align-items: center; border-color: var(--green); color: var(--green); }

.ref-invite[hidden] { display: none; }
.ref-invite { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(34,230,161,.3); border-radius: 18px; background: linear-gradient(110deg,rgba(34,230,161,.11),rgba(12,22,25,.94) 42%); box-shadow: 0 18px 45px rgba(0,0,0,.2); text-align: left; }
.ref-invite > b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(34,230,161,.11); color: var(--green); }
.ref-invite h2 { margin: 2px 0; font-size: 15px; }
.ref-invite p { margin: 0; color: var(--muted); font-size: 10px; }
.ref-invite aside { display: flex; flex-direction: column; align-items: center; padding: 0 14px; border-left: 1px solid var(--line); }
.ref-invite aside small { color: var(--muted); font-size: 8px; }
.ref-invite aside strong { color: var(--green); font-size: 20px; letter-spacing: .12em; }
.ref-invite button, .ref-invite > a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--soft); font-size: 10px; font-weight: 800; text-decoration: none; cursor: pointer; }
.ref-invite > a { border-color: rgba(34,230,161,.48); color: var(--green); }

.growth-section { border-top: 1px solid var(--line); background: radial-gradient(circle at 16% 15%,rgba(34,230,161,.08),transparent 30%),#071012; }
.growth-heading { margin-bottom: 38px; }
.friend-reward-card { padding: 30px; border: 1px solid rgba(34,230,161,.28); border-radius: 26px; background: linear-gradient(135deg,rgba(21,45,42,.95),rgba(9,18,21,.98) 64%); box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.reward-card-top { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px; }
.reward-card-top > b { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: rgba(34,230,161,.13); color: var(--green); }
.reward-card-top h3, .agent-card h3 { margin: 6px 0 0; font-family: var(--display); font-size: clamp(22px,2.5vw,32px); letter-spacing: -.035em; }
.reward-card-top > a, .agent-action > a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: 13px; background: var(--green); color: var(--ink); font-size: 12px; font-weight: 850; text-decoration: none; }
.reward-flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 27px 0 0; padding: 0; list-style: none; }
.reward-flow li { position: relative; min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(4,11,13,.44); }
.reward-flow li:not(:last-child)::after { position: absolute; z-index: 2; right: -18px; width: 22px; color: var(--green); font-size: 17px; text-align: center; content: "›"; }
.reward-flow b { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(34,230,161,.1); color: var(--green); font-size: 10px; }
.reward-flow span { font-size: 12px; font-weight: 800; }
.growth-rule { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.growth-rule svg { flex: none; margin-top: 1px; color: var(--green); }
.agent-card { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); align-items: center; gap: clamp(35px,6vw,80px); margin-top: 18px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,rgba(17,29,33,.94),rgba(7,14,17,.98)); }
.agent-copy > p { max-width: 760px; margin: 12px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.agent-copy ul { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 0; padding: 0; list-style: none; }
.agent-copy li { display: flex; align-items: center; gap: 6px; color: var(--soft); font-size: 10px; }
.agent-copy li svg { color: var(--green); }
.agent-action { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.agent-action > a { border: 1px solid rgba(34,230,161,.42); background: rgba(34,230,161,.08); color: var(--green); }
.agent-action small { color: var(--muted); font-size: 9px; line-height: 1.65; }

.steps-section { padding: 110px 0; }
.steps-list li { padding-bottom: 44px; }
.steps-list li > b { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border: 1px solid rgba(34,230,161,.3); border-radius: 15px; background: #0d1c1e; color: var(--green); font-size: 12px; }
.steps-list li > span { display: flex; flex-direction: column; padding-top: 3px; }
.steps-list li > span strong { font-size: 18px; }
.steps-list li > span small { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.7; }

.compare-section { border-top: 1px solid var(--line); background: radial-gradient(circle at 100% 40%,rgba(34,230,161,.08),transparent 30%),#071012; }
.compare-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(50px,8vw,110px); }
.compact { min-height: 48px; margin-top: 27px; }
.compare-table { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: rgba(13,25,28,.85); }
.compare-head, .compare-row { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; align-items: center; }
.compare-head { min-height: 62px; background: rgba(34,230,161,.07); }
.compare-head strong, .compare-row > * { padding: 16px 18px; }
.compare-head strong { color: var(--soft); font-size: 11px; }
.compare-head strong:last-child { color: var(--green); }
.compare-row { min-height: 66px; border-top: 1px solid var(--line); }
.compare-row strong { font-size: 11px; }
.compare-row span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.compare-row span:last-child { color: var(--soft); }
.compare-row span:last-child svg { color: var(--green); }

.faq-section { border-top: 1px solid var(--line); }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: clamp(50px,9vw,130px); }
.faq-layout > div:first-child { position: sticky; top: 120px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--green); font-size: 20px; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { padding: 0 34px 24px 0; font-size: 11px; }
.mobile-sticky { display: none; }

@media (max-width: 980px) {
  .header-inner > nav { display: none; }
  .benefits-grid { grid-template-columns: repeat(2,1fr); }
  .benefit-item:nth-child(2) { border-right: 0; }
  .benefit-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .scenes-grid { grid-template-columns: 1fr; }
  .scenes-showcase { grid-template-columns: 1fr; }
  .scene-phone { order: 2; }
  .scene-card { min-height: 190px; }
  .ref-invite { grid-template-columns: auto minmax(0,1fr) auto; }
  .ref-invite button, .ref-invite > a { grid-row: 2; }
  .ref-invite button { grid-column: 2; }
  .ref-invite > a { grid-column: 3; }
}

@media (max-width: 840px) {
  body { padding-bottom: 0; }
  .section { padding: 78px 0; }
  .hero { min-height: calc(100svh - 68px); padding: 28px 0 34px; }
  .hero-layout { --hero-title-offset: clamp(-66px, -6vh, -24px); }
  .hero-scene { background-position: 54% center; opacity: .78; }
  .hero-brand img { width: 54px; height: 54px; border-radius: 17px; }
  .hero-service-tags { justify-content: center; }
  .hero-preview { margin-top: 22px; }
  .hero-downloads { margin-top: 22px; }
  .story-section { padding-top: 76px; }
  .story-section > .benefits { margin-top: 48px; }
  .phone-wrap { width: min(92vw,400px); transform: none; }
  .benefit-item { padding: 20px 15px; }
  .benefit-item > b { width: 39px; height: 39px; }
  .steps-layout, .compare-layout, .faq-layout { grid-template-columns: 1fr; gap: 43px; }
  .faq-layout > div:first-child { position: static; }
  .compare-row, .compare-head { grid-template-columns: .7fr 1fr 1fr; }
  .compare-head strong, .compare-row > * { padding: 13px 10px; }
  .platform-card.current-device { border-color: rgba(34,230,161,.38); }
  .invite-card { flex-wrap: wrap; }
  .invite-card > div { flex-basis: calc(100% - 70px); }
  .invite-card aside { align-items: flex-start; padding: 0; }
  .reward-card-top { grid-template-columns: auto minmax(0,1fr); }
  .reward-card-top > a { grid-column: 1 / -1; }
  .agent-card { grid-template-columns: 1fr; gap: 25px; }
  .mobile-sticky { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: block; padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(5,11,13,.92); opacity: 0; visibility: hidden; transform: translateY(100%); pointer-events: none; backdrop-filter: blur(18px); transition: opacity .22s ease,transform .22s ease,visibility .22s; }
  .mobile-sticky.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .mobile-sticky a { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: var(--green); color: var(--ink); font-size: 13px; font-weight: 850; text-decoration: none; }
}

@media (max-width: 540px) {
  .landing-container { width: calc(100% - 24px); }
  .header-inner { min-height: 62px; }
  .brand { gap: 9px; }
  .brand img { width: 34px; height: 34px; }
  .brand strong { font-size: 14px; }
  .language-switch a { min-width: 40px; padding: 6px 8px; }
  .section { padding: 64px 0; }
  .hero { min-height: calc(100svh - 62px); padding: 18px 0 24px; }
  .hero-layout { --hero-title-offset: clamp(-42px, -5vh, -18px); }
  .hero-scene { background-position: 57% center; opacity: .74; filter: blur(.8px) saturate(.92) brightness(1.03); }
  .hero-brand img { width: 48px; height: 48px; border-radius: 15px; }
  .hero-wordmark { margin-top: 12px; font-size: clamp(23px,6.8vw,31px); }
  html[lang="en"] .hero-wordmark { font-size: clamp(17px,5.1vw,23px); letter-spacing: -.035em; }
  .hero-service-tags { gap: 6px; margin-bottom: 10px; }
  .hero-service-tags span { padding: 6px 9px; font-size: 9px; }
  .section-kicker { font-size: 10px; letter-spacing: .07em; }
  .hero-downloads { margin-top: 22px; }
  .hero-downloads .platform-grid { gap: 8px; }
  .hero-downloads .platform-card { min-height: 0; padding: 9px 8px; border-radius: 16px; }
  .hero-downloads .platform-visual { min-height: 32px; }
  .hero-downloads .platform-logo { width: 36px; height: 36px; border-radius: 11px; font-size: 16px; }
  .hero-downloads .platform-copy { min-height: 27px; }
  .hero-downloads .platform-copy h2 { margin: 3px 0 5px; font-size: 12px; line-height: 1.2; }
  .hero-downloads .platform-copy small { display: none; }
  .hero-downloads .platform-buttons { margin-top: 3px; }
  .service-icon-strip { width: 100%; gap: 6px; padding: 7px 8px; border-radius: 14px; }
  .service-scenes { font-size: 14px; }
  .service-scenes-caption { font-size: 12px; }
  .service-brand-icon { width: min(8.2vw,32px); height: min(8.2vw,32px); border-radius: 9px; }
  .service-brand-icon > i { width: min(4.8vw,19px); height: min(4.8vw,19px); }
  .platform-button { min-height: 34px; grid-template-columns: 21px minmax(0,1fr) 11px; gap: 3px; padding: 4px 7px; font-size: 8.5px; }
  .platform-button .button-platform-mark { width: 22px; height: 22px; }
  .platform-button > svg { width: 12px; height: 12px; }
  .platform-button .button-label small { font-size: 7px; }
  .story-section { padding-top: 62px; }
  .story-copy h2 { margin: 10px 0 12px; font-size: 31px; }
  .story-copy > p { font-size: 14px; line-height: 1.7; }
  .story-section > .benefits { margin-top: 38px; }
  .hero-invite { flex-wrap: wrap; border-radius: 18px; }
  .hero-invite > span { flex: 1; text-align: left; }
  .section-heading { margin-bottom: 34px; }
  .section-heading h2, .steps-heading h2, .compare-copy h2, .faq-layout h2 { font-size: 30px; }
  .scenes-showcase { gap: 34px; }
  .scenes-showcase .scene-card { min-height: 0; padding: 21px; border-radius: 20px; }
  .scene-card > b { width: 44px; height: 44px; flex: none; }
  .scene-card h3 { font-size: 18px; }
  .phone-wrap { width: 100%; padding: 4px; }
  .phone { padding: 18px 14px 14px; border-radius: 27px; }
  .phone-copy h2 { font-size: 21px; }
  .node-row { grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; padding: 9px; }
  .node-row > b { width: 29px; height: 29px; }
  .node-row em span { padding: 2px 5px; font-size: 7px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .benefit-item:last-child { border-bottom: 0; }
  .steps-list li { gap: 16px; padding-bottom: 34px; }
  .steps-list li > b { width: 44px; height: 44px; }
  .compare-table { margin: 0; overflow-x: auto; border-radius: 18px; }
  .compare-head, .compare-row { min-width: 510px; }
  .compare-row span, .compare-row strong { font-size: 10px; }
  .service-disclaimer { align-items: flex-start; text-align: left; }
  .faq-list summary { min-height: 64px; font-size: 12px; }
  .faq-list details p { padding-right: 0; }
  .ref-invite { grid-template-columns: 1fr 1fr; gap: 11px; padding: 15px; }
  .ref-invite > b { display: none; }
  .ref-invite > div { grid-column: 1 / -1; }
  .ref-invite aside { grid-column: 1 / -1; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); border-left: 0; }
  .ref-invite button, .ref-invite > a { grid-row: auto; grid-column: auto; }
  .friend-reward-card, .agent-card { padding: 21px; border-radius: 20px; }
  .reward-card-top { grid-template-columns: 46px minmax(0,1fr); gap: 12px; }
  .reward-card-top > b { width: 46px; height: 46px; border-radius: 14px; }
  .reward-card-top h3, .agent-card h3 { font-size: 21px; }
  .reward-flow { grid-template-columns: 1fr; }
  .reward-flow li { min-height: 62px; }
  .reward-flow li:not(:last-child)::after { right: auto; bottom: -18px; left: 21px; transform: rotate(90deg); }
  .agent-copy ul { flex-direction: column; }
  .invite-card > div { flex-basis: 100%; }
  .invite-card aside { width: 100%; }
  .invite-card button, .invite-card > a { flex: 1; justify-content: center; }
  .help-card { padding: 28px 22px; }
  .support-button { width: 100%; justify-content: center; }
  .footer-inner nav { gap: 16px; }
  .company-line { flex-direction: column; }
  .preview-note { right: 3px; }
}

@media (max-width: 540px) and (min-height: 800px) {
  .hero-layout { --hero-title-offset: clamp(-78px, -8vh, -64px); }
}

@media (max-width: 840px), (max-height: 820px) {
  .hero-layout { padding-bottom: 0; }
  .hero-downloads { margin-top: calc(16px + var(--hero-title-offset)); }
  .hero-highlights { position: static; margin-bottom: 24px; }
}

@media (max-width: 360px) {
  .service-scenes-caption { font-size: 11px; }
}

@media (max-width: 540px) and (max-height: 700px) {
  .hero { align-items: flex-start; }
  .hero-layout { --hero-title-offset: 0px; }
}