:root {
  --ink: #141a24;
  --body: #4a5363;
  --muted: #646c79;
  --line: #e3e7ed;
  --canvas: #f3f5f8;
  --blue: #2f6bea;
  --blue-soft: #eaf1fe;
  --mint: #5be0a5;
  --navy: #252c3a;
  --font: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --figures: "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.defs {
  position: absolute;
}

/* Clouds drift slowly behind everything: the brand's own outline, not a gradient wash. */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cloud {
  position: absolute;
  left: 0;
  top: var(--top);
  width: var(--size);
  height: auto;
  fill: none;
  stroke: var(--stroke);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: var(--opacity);
  animation: drift var(--duration) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}

.cloud--1 { --top: 3%;  --rest: 6%;  --size: 120px; --stroke: var(--mint); --opacity: 0.75; --duration: 95s;  --delay: -10s; }
.cloud--2 { --top: 46%; --rest: 84%; --size: 130px; --stroke: var(--blue); --opacity: 0.16; --duration: 130s; --delay: -70s; }
.cloud--3 { --top: 54%; --rest: 78%; --size: 300px; --stroke: var(--mint); --opacity: 0.45; --duration: 160s; --delay: -40s; }
.cloud--4 { --top: 68%; --rest: 2%;  --size: 150px; --stroke: var(--blue); --opacity: 0.14; --duration: 110s; --delay: -95s; }
.cloud--5 { --top: 1%;  --rest: 62%; --size: 80px;  --stroke: var(--mint); --opacity: 0.6;  --duration: 120s; --delay: -60s; }
.cloud--6 { --top: 80%; --rest: 40%; --size: 220px; --stroke: var(--mint); --opacity: 0.35; --duration: 145s; --delay: -120s; }

@keyframes drift {
  from { transform: translate3d(-40vw, 0, 0); }
  to   { transform: translate3d(115vw, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud {
    left: var(--rest);
    animation: none;
  }
}

.site-header,
.hero,
.site-footer {
  position: relative;
  z-index: 1;
}

.site-header {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
}

.brand__mark {
  width: 30px;
  height: 30px;
}

.open-app {
  color: var(--body);
  font-size: 14px;
  text-decoration: none;
}

.open-app:hover {
  color: var(--blue);
}

.hero {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lead {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--body);
  font-size: 17px;
  line-height: 1.75;
  text-wrap: balance;
}

.actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.button {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button--primary {
  background: var(--blue);
  color: #fff;
}

.button--primary:hover {
  background: #2457c5;
}

.button--secondary {
  background: var(--ink);
  color: #fff;
}

.button--secondary:hover {
  background: #283140;
}

.button.is-unavailable {
  background: #e9edf3;
  color: var(--muted);
  cursor: default;
  transform: none;
}

.meta {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-wrap: balance;
}

/* Product shots are drawn in HTML and scale with their box (container units). */
.shot {
  margin: 0;
}

.shot--desktop {
  width: 100%;
  max-width: 1080px;
  margin-top: 52px;
  container-type: inline-size;
  text-align: left;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}

.shot--phone {
  display: none;
}

.win {
  height: 46cqw;
  border-radius: 1.6cqw 1.6cqw 0 0;
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--line), 0 2cqw 6cqw rgba(20, 26, 36, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.win__bar {
  height: 3.6cqw;
  padding: 0 1.6cqw;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  font-size: 1.15cqw;
  font-weight: 700;
  flex-shrink: 0;
}

.win__mark {
  width: 1.7cqw;
  height: 1.7cqw;
}

.win__controls {
  margin-left: auto;
  display: flex;
  gap: 2.2cqw;
}

.win__controls b {
  width: 0.9cqw;
  height: 0.9cqw;
  border: 0.12cqw solid #4a5363;
  border-radius: 0.2cqw;
}

.win__controls b:first-child {
  height: 0;
  border-width: 0.12cqw 0 0;
  align-self: center;
}

.win__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.win__nav {
  width: 15cqw;
  padding: 0.6cqw 1cqw;
  display: flex;
  flex-direction: column;
  gap: 0.4cqw;
  color: var(--body);
  font-size: 1.1cqw;
  font-weight: 700;
}

.win__nav span {
  padding: 0.8cqw 1cqw;
  border-radius: 1cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.win__nav .is-current {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0.15cqw 0.4cqw rgba(20, 26, 36, 0.08);
}

.win__nav em {
  min-width: 1.6cqw;
  height: 1.6cqw;
  border-radius: 0.8cqw;
  background: var(--blue);
  color: #fff;
  font-size: 0.9cqw;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.win__main {
  flex: 1;
  min-width: 0;
  padding: 0.6cqw 1.6cqw 0 0.4cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

.win__title {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-size: 1.6cqw;
  font-weight: 800;
}

.win__search {
  flex: 1;
  height: 3cqw;
  border-radius: 1cqw;
  background: #fff;
}

.win__speed {
  padding: 1.4cqw 1.8cqw;
  border-radius: 1.4cqw;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 3cqw;
}

.win__speed-text {
  display: flex;
  flex-direction: column;
}

.win__speed-text small {
  color: var(--muted);
  font-size: 0.95cqw;
}

.win__speed-text strong {
  font-family: var(--figures);
  font-size: 2.4cqw;
  font-weight: 800;
  line-height: 1.1;
}

.win__speed-text strong small {
  font-size: 1cqw;
}

.win__chart {
  flex: 1;
  height: 4cqw;
}

.win__list {
  flex: 1;
  padding: 0.8cqw;
  border-radius: 1.4cqw 1.4cqw 0 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.2cqw;
}

.task {
  padding: 0.8cqw;
  border-radius: 1cqw;
  display: grid;
  grid-template-columns: 3cqw minmax(0, 1fr) 14cqw 7cqw 5cqw;
  align-items: center;
  gap: 1cqw;
  font-size: 1.1cqw;
}

.task.is-selected {
  background: #f1f6ff;
  font-weight: 700;
}

.task__icon {
  width: 3cqw;
  height: 3cqw;
  border-radius: 0.9cqw;
  flex-shrink: 0;
}

.task__icon--archive { background: #fff1dc; }
.task__icon--apk { background: #e6f9ee; }
.task__icon--exe { background: #e7eefd; }

.task__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task__bar {
  height: 0.5cqw;
  border-radius: 0.25cqw;
  background: #edf0f4;
  overflow: hidden;
}

.task__bar i {
  display: block;
  height: 100%;
  background: var(--blue);
}

.task__speed {
  font-family: var(--figures);
  font-size: 1.05cqw;
  font-weight: 800;
  text-align: right;
}

.task__eta {
  color: var(--muted);
  font-size: 1cqw;
  text-align: right;
}

.task__state {
  grid-column: span 2;
  color: var(--body);
  font-size: 1cqw;
  text-align: right;
}

.site-footer {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 32px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  color: var(--muted);
  font-size: 13px;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--blue);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Phones: a phone shot reads better than a shrunken desktop window. */
@media (max-width: 719px) {
  .site-header {
    padding: 18px 20px;
  }

  .hero {
    padding: 28px 20px 0;
  }

  .lead {
    font-size: 16px;
  }

  .actions {
    width: 100%;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .shot--desktop {
    display: none;
  }

  .shot--phone {
    display: block;
    width: min(300px, 78vw);
    margin-top: 40px;
    container-type: inline-size;
    text-align: left;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent);
  }

  .cloud--3,
  .cloud--6 {
    --size: 180px;
  }

  .site-footer {
    padding: 18px 20px 24px;
  }
}

.phone {
  height: 150cqw;
  padding: 3.6cqw;
  border-radius: 15cqw 15cqw 0 0;
  background: #0e131c;
}

.phone__screen {
  height: 100%;
  padding: 13cqw 6cqw 0;
  border-radius: 11.5cqw 11.5cqw 0 0;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  gap: 4cqw;
}

.phone__title {
  font-size: 8cqw;
  font-weight: 800;
}

.phone__card {
  padding: 5cqw;
  border-radius: 6cqw;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  font-size: 4.2cqw;
}

.phone__card small {
  color: var(--muted);
  font-size: 3.8cqw;
}

.phone__speed {
  font-family: var(--figures);
  font-size: 10cqw;
  font-weight: 800;
  line-height: 1.05;
}

.phone__speed small {
  font-size: 4cqw;
}

.phone__row {
  display: flex;
  align-items: center;
  gap: 3cqw;
  min-width: 0;
}

.phone__row b {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone .task__icon {
  width: 10cqw;
  height: 10cqw;
  border-radius: 3cqw;
}

.phone .task__bar {
  height: 1.8cqw;
  border-radius: 0.9cqw;
}

.phone__foot {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 3.6cqw;
}