:root {
  --blue-950: #031340;
  --blue-900: #061d62;
  --blue-800: #083185;
  --blue-700: #0c49bf;
  --blue-500: #166aff;
  --blue-300: #63a4ff;
  --orange-600: #ff4e1b;
  --orange-500: #ff6a1d;
  --orange-300: #ffb33d;
  --gold: #ffd45a;
  --green: #35c95a;
  --purple: #8357ff;
  --ink: #122047;
  --muted: #66708a;
  --card: #ffffff;
  --soft: #f4f8ff;
  --line: rgba(22, 84, 189, .14);
  --shadow: 0 24px 70px rgba(8, 36, 97, .18);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --max: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  color: var(--ink);
  background: #eef5ff;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 160, 39, .18), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(36, 109, 255, .22), transparent 38%),
    linear-gradient(180deg, #edf6ff 0%, #f8fbff 48%, #edf4ff 100%);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 64px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(3, 17, 55, .88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.brand img { width: 42px; height: 42px; }
.brand strong { display: block; font-size: 19px; line-height: 1.05; letter-spacing: .5px; }
.brand em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: rgba(255,255,255,.72); }
.top-nav { display: flex; gap: 38px; align-items: center; font-size: 15px; color: rgba(255,255,255,.88); }
.top-nav a { position: relative; padding: 22px 0; }
.top-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 14px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--orange-500), var(--gold));
  transition: .2s ease;
}
.top-nav a:hover::after { left: 0; right: 0; }
.header-download {
  border: 0;
  color: #fff;
  font-weight: 800;
  padding: 11px 22px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ff8f35, #ff4e1b);
  box-shadow: 0 10px 24px rgba(255, 92, 26, .35), inset 0 1px rgba(255,255,255,.38);
}

.hero {
  position: relative;
  min-height: 560px;
  padding: 106px 48px 68px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(5, 34, 99, .10), rgba(3, 14, 49, .92)),
    radial-gradient(circle at 72% 30%, rgba(30, 117, 255, .48), transparent 34%),
    radial-gradient(circle at 20% 18%, rgba(255, 110, 30, .22), transparent 30%),
    linear-gradient(135deg, #07184d 0%, #09328d 52%, #051640 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -34%;
  height: 56%;
  background:
    radial-gradient(ellipse at center, rgba(54, 205, 79, .9) 0%, rgba(19, 113, 38, .45) 36%, transparent 67%),
    repeating-linear-gradient(94deg, rgba(255,255,255,.08) 0 1px, transparent 1px 22px);
  transform: perspective(500px) rotateX(58deg);
  border-top: 1px solid rgba(255,255,255,.15);
  opacity: .72;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(0deg, rgba(4, 12, 37, .52), transparent);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(430px, .95fr);
  align-items: center;
  gap: 32px;
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hero-kicker span, .hero-kicker b {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .5px;
}
.hero-kicker span {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #e8f2ff;
}
.hero-kicker b {
  color: #7a3200;
  background: linear-gradient(180deg, #fff4b3, #ffc645);
  box-shadow: 0 8px 18px rgba(255, 195, 58, .28);
}
.hero h1 {
  margin: 0;
  font-size: clamp(46px, 5.4vw, 76px);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: -2px;
  text-shadow: 0 8px 0 rgba(0, 0, 0, .12), 0 18px 36px rgba(0,0,0,.35);
}
.hero h1 span {
  display: inline-block;
  color: #ffd65c;
  font-style: italic;
  text-shadow: 0 0 22px rgba(255, 212, 90, .6), 0 8px 0 rgba(0,0,0,.12);
}
.hero-subtitle {
  margin: 18px 0 26px;
  max-width: 700px;
  font-size: 20px;
  line-height: 1.75;
  color: rgba(255,255,255,.88);
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  border: 0;
  border-radius: 12px;
  min-height: 52px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #ff9f36 0%, #ff651d 42%, #ff4318 100%);
  box-shadow: 0 15px 32px rgba(255, 88, 25, .32), inset 0 2px rgba(255,255,255,.35);
}
.btn-secondary {
  color: #fff;
  background: linear-gradient(180deg, #2b83ff, #114deb);
  box-shadow: 0 15px 32px rgba(17, 79, 235, .26), inset 0 2px rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.15);
}
.btn.full { width: 100%; }
.btn-icon { font-size: 20px; }

.download-card.compact {
  margin-top: 20px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: min(470px, 100%);
}
.qr-box {
  width: 112px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  color: var(--blue-900);
  text-align: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.qr-box img { border-radius: 8px; }
.qr-box small { display: block; margin-top: 3px; font-weight: 800; }
.download-list { flex: 1; display: grid; gap: 6px; }
.store-line {
  width: 100%;
  min-height: 53px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(3, 20, 62, .64);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  text-align: left;
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
.store-line:disabled { opacity: .7; cursor: not-allowed; }
.store-icon { width: 34px; height: 34px; display: grid; place-items: center; font-size: 25px; }
.store-line b { display: block; font-size: 16px; }
.store-line em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: rgba(255,255,255,.72); }
.safe-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  color: rgba(255,255,255,.88);
}
.safe-pills span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(2, 15, 48, .42);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
}

.hero-visual {
  position: relative;
  min-height: 440px;
}
.mascot-card {
  position: absolute;
  left: -58px;
  top: 28px;
  width: 210px;
  height: 330px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .35);
  border: 1px solid rgba(255,255,255,.2);
  transform: rotate(-3deg);
}
.mascot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(4, 15, 51, .65));
}
.mascot-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mascot-badge {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 15px;
  padding: 7px 12px;
  color: #7a3100;
  font-weight: 950;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3ad, #ffc142);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.phone-stack {
  position: absolute;
  right: 0;
  top: -12px;
  width: 520px;
  height: 450px;
}
.phone {
  position: absolute;
  width: 180px;
  padding: 8px;
  border-radius: 28px;
  background: linear-gradient(180deg, #31466f, #071333);
  box-shadow: 0 26px 65px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.16);
  overflow: hidden;
}
.phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 8px;
  width: 68px;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 0 0 14px 14px;
  background: #081332;
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
}
.phone-main {
  width: 220px;
  left: 165px;
  top: 0;
  z-index: 3;
}
.phone-left {
  left: 54px;
  top: 48px;
  transform: rotate(-8deg);
  opacity: .92;
}
.phone-right {
  right: 0;
  top: 44px;
  transform: rotate(8deg);
  opacity: .92;
}
.hero-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(34px);
  opacity: .66;
  pointer-events: none;
}
.hero-glow-one { width: 330px; height: 330px; left: 14%; top: 16%; background: rgba(255,106,29,.28); }
.hero-glow-two { width: 400px; height: 400px; right: 13%; top: 4%; background: rgba(22,106,255,.38); }
.confetti i {
  position: absolute;
  z-index: 1;
  width: 13px;
  height: 22px;
  border-radius: 3px;
  background: var(--gold);
  opacity: .95;
  animation: floaty 6s ease-in-out infinite;
}
.confetti i:nth-child(1){left:7%;top:20%;background:#ff4e8a;animation-delay:.1s;}
.confetti i:nth-child(2){left:26%;top:12%;background:#ffd23a;animation-delay:1s;}
.confetti i:nth-child(3){left:44%;top:22%;background:#26ddff;animation-delay:1.7s;}
.confetti i:nth-child(4){left:67%;top:10%;background:#ff7520;animation-delay:.5s;}
.confetti i:nth-child(5){left:86%;top:24%;background:#65d84e;animation-delay:2.1s;}
.confetti i:nth-child(6){left:13%;top:54%;background:#884eff;animation-delay:.9s;}
.confetti i:nth-child(7){left:78%;top:58%;background:#fff;animation-delay:1.4s;}
.confetti i:nth-child(8){left:93%;top:12%;background:#ffcf35;animation-delay:2.5s;}
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(18px) rotate(18deg);} }

.overview {
  position: relative;
  z-index: 5;
  max-width: var(--max);
  margin: -44px auto 0;
  padding: 0 24px 68px;
}
.overview-panel {
  background: rgba(255,255,255,.94);
  border-radius: 34px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.88);
  overflow: hidden;
  padding: 20px 24px;
}
.overview-row, .steps-row {
  display: grid;
  grid-template-columns: 150px repeat(4, 1fr);
  gap: 14px;
  padding: 16px 0;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.why-row { grid-template-columns: 150px repeat(4, 1fr); }
.row-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: #123d9b;
  padding-left: 6px;
}
.row-title b { font-size: 22px; color: #0d3fb8; }
.row-title span { font-size: 18px; font-weight: 950; }
.row-title em { font-style: normal; font-size: 12px; letter-spacing: 1px; color: #6d8fcf; }
.mini-card {
  min-height: 102px;
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: 0 10px 25px rgba(16, 55, 122, .08);
  border: 1px solid rgba(13, 78, 183, .06);
}
.mini-card i {
  grid-row: span 2;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: #fff;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 950;
  font-size: 20px;
  box-shadow: inset 0 1px rgba(255,255,255,.4), 0 10px 18px rgba(12, 63, 160, .14);
}
.icon-blue { background: linear-gradient(180deg, #56a8ff, #1357ff); }
.icon-green { background: linear-gradient(180deg, #75dc72, #30bb4e); }
.icon-purple { background: linear-gradient(180deg, #a88cff, #6e45e7); }
.icon-orange { background: linear-gradient(180deg, #ffa643, #ff6930); }
.mini-card strong { font-size: 17px; color: #13245d; }
.mini-card p { margin: 5px 0 0; grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--muted); }
.steps-row {
  grid-template-columns: 150px 1fr 28px 1fr 28px 1fr;
}
.step {
  display: grid;
  grid-template-columns: 46px 48px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 84px;
  padding: 12px 10px;
}
.step span {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(180deg, #2d82ff, #114eea);
}
.step i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eff6ff;
  font-style: normal;
  font-size: 25px;
}
.step strong { display: block; font-size: 17px; color: #14265e; }
.step p {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.arrow { display: grid; place-items: center; color: #a5b5d6; font-size: 46px; font-weight: 300; }
.safe-row {
  display: grid;
  grid-template-columns: 56px 115px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 2px;
}
.safe-row i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #edf5ff;
  font-style: normal;
  font-size: 26px;
}
.safe-row strong { color: #082f96; font-size: 22px; }
.safe-row p { margin: 0; font-size: 17px; line-height: 1.7; color: #25416f; }
.safe-row b { color: #0a5cff; }

section { scroll-margin-top: 84px; }
.section-head {
  max-width: 820px;
  margin: 0 auto 30px;
  text-align: center;
}
.section-head span, .download-copy span, .company-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #0b55e8;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 2px;
}
.section-head h2, .download-copy h2, .company-card h2 {
  margin: 0;
  color: #10276a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.18;
  font-weight: 950;
}
.section-head p {
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}
.section-head.light span { color: #ffd45a; }
.section-head.light h2, .section-head.light p { color: #fff; }
.section-head.light p { color: rgba(255,255,255,.78); }
.compact-head { margin-bottom: 22px; }

.play-section, .engine-section, .screens-section, .company-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 72px 24px;
}
.play-layout {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 28px;
  align-items: stretch;
}
.play-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.play-card {
  position: relative;
  min-height: 162px;
  padding: 22px;
  border: 2px solid #dbe8ff;
  border-radius: 20px;
  background: rgba(255,255,255,.86);
  text-align: left;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(13, 60, 150, .10);
  transition: .18s ease;
}
.play-card:hover, .play-card.active { transform: translateY(-3px); border-color: var(--orange-500); box-shadow: 0 22px 50px rgba(255, 98, 24, .14); }
.play-card.active::after {
  content: "已选择";
  position: absolute;
  right: 16px;
  top: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8b2e, #ff4c18);
}
.play-card.disabled { opacity: .58; filter: grayscale(1); cursor: not-allowed; }
.play-name { display: block; font-size: 30px; font-weight: 950; line-height: 1; }
.play-name.orange { color: #ff4e1b; }
.play-name.blue { color: #1265ff; }
.play-name.green { color: #36bf43; }
.play-name.gold { color: #f5a400; }
.play-name.purple { color: #5b35f2; }
.play-name.gray { color: #788093; }
.play-card em { display: block; margin: 14px 0 20px; font-style: normal; color: #7a8294; font-size: 16px; line-height: 1.45; }
.play-card b {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9a36, #ff5c1c);
  box-shadow: 0 10px 20px rgba(255, 96, 28, .25);
}
.play-card i {
  position: absolute;
  right: 26px;
  bottom: 18px;
  font-style: normal;
  font-size: 58px;
  filter: drop-shadow(0 10px 12px rgba(14, 51, 118, .18));
}
.mode-preview {
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 85% 16%, rgba(255, 220, 70, .22), transparent 28%),
    linear-gradient(180deg, #073fa9, #061b69 56%, #041246);
  box-shadow: 0 26px 70px rgba(5, 35, 106, .26);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.18);
}
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.preview-top span { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: #bfe4ff; font-weight: 800; }
.preview-top strong { font-size: 24px; }
.match-ticket {
  display: grid;
  grid-template-columns: 90px 1fr 118px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  color: var(--ink);
  background: linear-gradient(180deg, #fffdf8, #fff2df);
  box-shadow: inset 0 0 0 2px rgba(255, 167, 55, .35);
}
.match-ticket small { display: block; color: #798297; font-weight: 700; }
.match-ticket b { display: block; margin-top: 4px; color: #17235a; }
.teams { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 20px; font-weight: 950; }
.teams i { color: #ff4e1b; font-size: 28px; font-style: italic; text-shadow: 1px 2px 0 #ffd24e; }
.radar-block { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; margin-top: 20px; }
.radar-circle {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #05206b 0 52%, transparent 53%),
    conic-gradient(#ff6a1d 0 72%, rgba(255,255,255,.15) 72% 100%);
  box-shadow: 0 0 0 8px rgba(255,255,255,.06), inset 0 0 20px rgba(255,255,255,.16);
}
.radar-circle span { display: block; font-size: 44px; font-weight: 950; color: #fff; }
.radar-circle em { display: block; margin-top: -28px; font-size: 13px; font-style: normal; color: #b7d8ff; }
.radar-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.radar-block li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.radar-block li b { font-size: 18px; }
.radar-block li span { color: rgba(255,255,255,.66); font-size: 13px; }
.mode-text { min-height: 78px; margin: 18px 0 22px; color: rgba(255,255,255,.82); line-height: 1.75; }

.ai-demo {
  position: relative;
  overflow: hidden;
  padding: 76px 24px;
  background:
    linear-gradient(180deg, rgba(4, 14, 48, .16), rgba(4, 12, 38, .76)),
    radial-gradient(circle at 24% 16%, rgba(255,98,25,.23), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(35,115,255,.36), transparent 36%),
    linear-gradient(135deg, #06184f, #082b88 52%, #03133e);
}
.ai-demo::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -48%;
  height: 68%;
  background: radial-gradient(ellipse at center, rgba(35, 183, 58, .78), transparent 62%);
  transform: perspective(520px) rotateX(58deg);
  opacity: .72;
}
.demo-layout {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 38px;
  align-items: center;
}
.demo-phone {
  width: 270px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(180deg, #334872, #071334);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  transform: rotate(-2deg);
}
.demo-phone img { width: 100%; height: 520px; object-fit: cover; object-position: center top; border-radius: 25px; }
.analysis-card {
  padding: 28px;
  border-radius: 26px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 26px 68px rgba(0, 0, 0, .22);
}
.analysis-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.analysis-title span {
  color: #fff;
  font-weight: 950;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8b2d, #ff4b1a);
}
.analysis-title b { color: #10276a; font-size: 27px; }
.analysis-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.analysis-table div {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 15px;
  padding: 14px;
  background: linear-gradient(180deg, #f3f8ff, #fff);
  border: 1px solid rgba(20, 89, 205, .10);
}
.analysis-table small { color: #71809c; font-weight: 800; }
.analysis-table strong { margin-top: 8px; font-size: 18px; color: #082f96; }
.reason-list { display: grid; gap: 12px; margin: 22px 0; }
.reason-list p {
  margin: 0;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 11px;
  color: #43506c;
  line-height: 1.7;
}
.reason-list i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-weight: 950;
  color: #fff;
  background: linear-gradient(180deg, #2d82ff, #114eea);
}
.analysis-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.analysis-note { margin: 14px 0 0; color: #7b8497; font-size: 13px; line-height: 1.6; }

.engine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.engine-card {
  min-height: 238px;
  padding: 26px 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #f7fbff);
  border: 1px solid rgba(12, 78, 190, .09);
  box-shadow: 0 18px 46px rgba(12, 51, 130, .10);
}
.engine-card i {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #eef6ff, #fff2df);
  font-style: normal;
  font-size: 30px;
}
.engine-card h3 { margin: 20px 0 10px; color: #10276a; font-size: 22px; }
.engine-card p { margin: 0; color: var(--muted); line-height: 1.75; }

.screens-section { padding-top: 36px; }
.screen-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.screen-rail figure {
  margin: 0;
  border-radius: 24px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(12, 78, 190, .09);
  box-shadow: 0 18px 46px rgba(12, 51, 130, .10);
}
.screen-rail img {
  width: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 18px;
}
.screen-rail figcaption { padding: 12px 4px 4px; text-align: center; font-weight: 900; color: #123d9b; }

.download-section {
  padding: 70px 24px;
  background:
    radial-gradient(circle at 18% 42%, rgba(255, 112, 25, .22), transparent 28%),
    radial-gradient(circle at 82% 40%, rgba(28, 99, 255, .38), transparent 30%),
    linear-gradient(135deg, #061849, #082e84 56%, #05133c);
  color: #fff;
}
.download-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: center;
}
.download-copy span { color: #ffd45a; }
.download-copy h2 { color: #fff; }
.download-copy p { max-width: 720px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.8; }
.apk-meta { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.apk-meta div {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}
.apk-meta small { display: block; color: rgba(255,255,255,.62); font-weight: 800; }
.apk-meta b { display: block; margin-top: 8px; color: #fff; font-size: 17px; word-break: break-all; }
.download-box-large {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  text-align: center;
  box-shadow: 0 26px 70px rgba(0,0,0,.24);
}
.download-box-large img {
  width: 168px;
  margin: 0 auto 16px;
  padding: 9px;
  border-radius: 16px;
  background: #fff;
}
.download-box-large p { margin: 12px 0 0; color: rgba(255,255,255,.72); }

.company-section { padding-top: 64px; padding-bottom: 112px; padding: 72px 0; }
.company-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: center;
  padding: 34px 24px;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid rgba(12, 78, 190, .09);
}
.company-card p { margin: 0; color: #52607b; font-size: 17px; line-height: 1.85; }
.company-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; }
.company-tags b {
  padding: 8px 13px;
  border-radius: 999px;
  color: #0b4ad6;
  background: #eff6ff;
  font-size: 14px;
}

.site-footer {
  padding: 30px 20px 28px;
  background: #000;
  color: rgba(255, 255, 255, .82);
  text-align: center;
  font-weight: 400;
}
.site-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  line-height: 1.7;
}
.site-footer a,
.site-footer strong {
  color: rgba(255, 255, 255, .86);
  font: inherit;
  font-weight: 400;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer span { color: rgba(255, 255, 255, .45); }
.site-footer p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.5;
}

.mobile-sticky {
  display: none;
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(4, 11, 33, .68) 24%, rgba(4, 11, 33, .95));
}
.mobile-sticky button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 950;
  font-size: 16px;
  background: linear-gradient(180deg, #ff9d35, #ff4e1b);
  box-shadow: 0 12px 34px rgba(255, 78, 27, .36), inset 0 2px rgba(255,255,255,.32);
}

.modal {
  width: min(440px, calc(100vw - 32px));
  border: 0;
  padding: 0;
  border-radius: 26px;
  background: transparent;
  overflow: visible;
}
.modal::backdrop { background: rgba(4, 11, 33, .68); backdrop-filter: blur(6px); }
.modal-card {
  position: relative;
  padding: 28px;
  border-radius: 26px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
}
.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eef3ff;
  color: #0b3fa8;
  font-size: 25px;
  line-height: 1;
}
.modal-logo { width: 64px; margin: 0 auto 12px; }
.modal h3 { margin: 0; font-size: 26px; color: #10276a; }
.modal-sub { margin: 10px 0 16px; color: #66708a; line-height: 1.6; }
.modal-qr img { width: 170px; margin: 0 auto 16px; border: 1px solid #dbe8ff; border-radius: 14px; padding: 5px; }
.modal-info { display: grid; gap: 8px; margin: 0 0 18px; text-align: left; }
.modal-info div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f5f8ff; }
.modal-info dt { color: #7a859b; font-weight: 800; }
.modal-info dd { margin: 0; color: #10276a; font-weight: 900; word-break: break-all; }
.modal-tip { margin: 14px 0 0; color: #7a859b; line-height: 1.6; font-size: 13px; }
.report-card-modal { text-align: left; }
.report-card-modal h3 { text-align: center; }
.report-detail { margin: 18px 0; display: grid; gap: 12px; }
.report-detail p { margin: 0; padding: 14px; border-radius: 14px; background: #f5f8ff; color: #44516d; line-height: 1.7; }
.report-detail b { color: #0b3fa8; }

@media (max-width: 1120px) {
  .site-header { padding: 0 24px; }
  .top-nav { gap: 20px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual {
    width: min(100%, 860px);
    min-height: 390px;
    margin: 0 auto;
  }
  .phone-stack { left: clamp(170px, 27vw, 240px); right: auto; }
  /* .mascot-card { left: clamp(-240px, -27vw, -170px); } */
  .overview-row, .why-row { grid-template-columns: 145px repeat(2, 1fr); }
  .overview-row .mini-card:nth-of-type(3), .overview-row .mini-card:nth-of-type(4) { margin-top: 0; }
  .steps-row { grid-template-columns: 145px 1fr; }
  .steps-row .arrow { display: none; }
  .engine-grid { grid-template-columns: repeat(2, 1fr); }
  .screen-rail { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .site-header {
    height: 60px;
    padding: 0 14px;
  }
  .brand { min-width: 0; gap: 8px; }
  .brand img { width: 38px; height: 38px; }
  .brand strong { font-size: 16px; }
  .brand em { display: none; }
  .top-nav { display: none; }
  .header-download { padding: 9px 13px; font-size: 14px; border-radius: 999px; }
  .hero { padding: 88px 16px 42px; min-height: auto; }
  .hero::before { height: 46%; bottom: -28%; }
  .hero h1 { font-size: 46px; letter-spacing: -1px; }
  .hero-subtitle { font-size: 17px; margin-bottom: 20px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .btn { min-height: 48px; padding: 0 14px; font-size: 15px; }
  .download-card.compact { margin-top: 16px; }
  .qr-box { width: 98px; }
  .store-line { min-height: 49px; padding: 7px 10px; }
  .store-icon { width: 28px; height: 28px; font-size: 21px; }
  .store-line b { font-size: 14px; }
  .store-line em { font-size: 11px; }
  .safe-pills { gap: 6px; }
  .safe-pills span { font-size: 12px; padding: 6px 9px; }
  .hero-visual { min-height: 330px; margin-top: 18px; }
  .mascot-card { width: 150px; height: 238px; left: -96px; top: 42px; border-radius: 22px; }
  .phone-stack { width: 330px; height: 330px; left: 90px; top: 0; }
  .phone { width: 124px; border-radius: 22px; padding: 6px; }
  .phone::before { width: 46px; height: 12px; top: 6px; }
  .phone img { border-radius: 17px; }
  .phone-main { width: 154px; left: 88px; }
  .phone-left { left: 10px; top: 44px; }
  .phone-right { right: 8px; top: 48px; }
  .overview { margin-top: -22px; padding: 0 14px 44px; }
  .overview-panel { border-radius: 24px; padding: 14px; }
  .overview-row, .why-row, .steps-row { grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }
  .row-title { flex-direction: row; align-items: baseline; flex-wrap: wrap; padding-left: 4px; }
  .row-title b { font-size: 20px; }
  .row-title span { font-size: 17px; }
  .row-title em { width: 100%; font-size: 11px; }
  .mini-card { grid-template-columns: 48px 1fr; min-height: 86px; padding: 13px; }
  .mini-card i { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; }
  .mini-card strong { font-size: 16px; }
  .mini-card p { font-size: 13px; }
  .step { grid-template-columns: 40px 44px 1fr; padding: 10px 4px; }
  .safe-row { grid-template-columns: 42px 1fr; gap: 9px; padding: 12px 2px 0; }
  .safe-row p { grid-column: 1 / -1; font-size: 14px; }
  .safe-row i { width: 40px; height: 40px; font-size: 22px; }
  .safe-row strong { font-size: 18px; }
  .play-section, .engine-section, .screens-section, .company-section { padding: 48px 14px; }
  .section-head { margin-bottom: 22px; text-align: left; }
  .section-head h2, .download-copy h2, .company-card h2 { font-size: 28px; }
  .section-head p { font-size: 15px; }
  .play-layout { grid-template-columns: 1fr; }
  .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .play-card { min-height: 142px; padding: 16px; border-radius: 16px; }
  .play-name { font-size: 24px; }
  .play-card em { margin: 10px 0 18px; font-size: 13px; }
  .play-card b { min-height: 30px; padding: 0 10px; font-size: 13px; }
  .play-card i { font-size: 42px; right: 14px; bottom: 14px; }
  .mode-preview { padding: 16px; border-radius: 20px; }
  .match-ticket { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .radar-block { grid-template-columns: 1fr; justify-items: center; }
  .radar-block ul { width: 100%; }
  .ai-demo { padding: 52px 14px; }
  .demo-layout { grid-template-columns: 1fr; gap: 22px; }
  .demo-phone { width: min(245px, 78vw); }
  .demo-phone img { height: 470px; }
  .analysis-card { padding: 18px; border-radius: 22px; }
  .analysis-title { align-items: flex-start; flex-direction: column; gap: 10px; }
  .analysis-title b { font-size: 22px; }
  .analysis-table { grid-template-columns: repeat(2, 1fr); }
  .analysis-table div { min-height: 78px; padding: 12px; }
  .analysis-table strong { font-size: 16px; }
  .analysis-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .engine-grid { grid-template-columns: 1fr; }
  .engine-card { min-height: 0; padding: 20px; }
  .screen-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
  }
  .screen-rail figure { min-width: 210px; scroll-snap-align: start; }
  .screen-rail img { height: 390px; }
  .download-section { padding: 48px 14px; }
  .download-inner { grid-template-columns: 1fr; }
  .apk-meta { grid-template-columns: repeat(2, 1fr); }
  .download-box-large img { width: 150px; }
  .company-card { grid-template-columns: 1fr; padding: 22px; }
  .company-tags { grid-column: auto; }
  .site-footer { padding: 26px 14px 96px; font-size: 14px; }
  .site-footer-links { gap: 6px 9px; }
  .site-footer p { font-size: 14px; }
  .mobile-sticky { display: block; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 40px; }
  .hero-actions { grid-template-columns: 1fr; }
  .download-card.compact { display: grid; grid-template-columns: 94px 1fr; }
  .hero-visual { min-height: 298px; }
  .mascot-card { width: 132px; height: 210px; }
  .phone-stack { left: 74px; transform: scale(.92); transform-origin: left top; }
  .phone-stack .mascot-card { left: -87px; }
  .play-grid { grid-template-columns: 1fr; }
  .analysis-actions { grid-template-columns: 1fr; }
  .apk-meta { grid-template-columns: 1fr; }
}
.toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 18px);
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  background: rgba(3, 17, 55, .92);
  box-shadow: 0 16px 38px rgba(0,0,0,.26);
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 820px) { .toast { bottom: 86px; } }
.margin-top{  margin-top: 10px; }