:root {
      --bg: #05050b;
      --bg2: #0b1020;
      --shell-bg: #071826;
      --shell-bg-2: #0a1122;
      --shell-bg-3: #10091b;
      --card: #07070f;
      --card2: #171729;
      --white: #ffffff;
      --cyan: #00e5ff;
      --violet: #7c5cff;
      --pink: #ff4ecd;
      --gold: #ffb800;
      --green: #25ff9c;
      --radius: 34px;
      --shadow: 0 24px 65px rgba(0, 0, 0, .48);
      --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color-scheme: dark;
    }

    @property --hx-connect-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

    * {
      box-sizing: border-box;
    }

    html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: var(--shell-bg);
      background:
        radial-gradient(circle at 16% -8%, rgba(0, 229, 255, .20), transparent 36%),
        radial-gradient(circle at 92% 108%, rgba(255, 78, 205, .16), transparent 42%),
        radial-gradient(circle at 50% 116%, rgba(124, 92, 255, .15), transparent 46%),
        linear-gradient(145deg, var(--shell-bg), var(--shell-bg-2) 50%, var(--shell-bg-3));
      overscroll-behavior: none;
    }

    body {
      margin: 0;
      width: 100%;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
      background-color: var(--shell-bg);
      background:
        radial-gradient(circle at 16% -8%, rgba(0, 229, 255, .20), transparent 36%),
        radial-gradient(circle at 92% 108%, rgba(255, 78, 205, .16), transparent 42%),
        radial-gradient(circle at 50% 116%, rgba(124, 92, 255, .15), transparent 46%),
        linear-gradient(145deg, var(--shell-bg), var(--shell-bg-2) 50%, var(--shell-bg-3));
      color: var(--white);
      font-family: var(--font);
      overscroll-behavior: none;
      touch-action: pan-y;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a {
      -webkit-tap-highlight-color: transparent;
    }

    .hx-site {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 100vh;
      min-height: 100dvh;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      -webkit-overflow-scrolling: touch;
      padding:
        max(12px, env(safe-area-inset-top))
        12px
        calc(max(80px, env(safe-area-inset-bottom)) + 26px);
      background-color: var(--shell-bg);
      background:
        radial-gradient(circle at 14% -6%, rgba(0, 229, 255, .24), transparent 34%),
        radial-gradient(circle at 88% 72%, rgba(255, 78, 205, .17), transparent 38%),
        radial-gradient(circle at 50% 112%, rgba(124, 92, 255, .24), transparent 44%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 229, 255, .10), transparent 58%),
        linear-gradient(145deg, var(--shell-bg), var(--bg2) 48%, var(--shell-bg-3));
      background-size: 180% 180%;
      background-position: center;
    }

    .hx-site.hx-site--connect {
      padding-bottom: max(54px, calc(env(safe-area-inset-bottom) + 22px));
    }

    .hx-site::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .17;
      background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 30px 30px;
      background-position: 0 0;
    }

    .hx-site::after {
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto;
      height: calc(150px + env(safe-area-inset-bottom));
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 18% 100%, rgba(0, 229, 255, .16), transparent 56%),
        radial-gradient(ellipse at 82% 88%, rgba(255, 78, 205, .14), transparent 58%),
        linear-gradient(180deg, transparent 0%, rgba(7, 24, 38, .62) 54%, rgba(16, 9, 27, .88) 100%);
    }

    .hx-page {
      width: 100%;
      max-width: 560px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      overflow: hidden;
      text-align: center;
      color: var(--white);
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      will-change: transform;
      transform: translateY(0);
      background:
        radial-gradient(circle at 15% 0%, rgba(0,229,255,.28), transparent 34%),
        radial-gradient(circle at 90% 100%, rgba(255,78,205,.22), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(124,92,255,.14), transparent 45%),
        linear-gradient(145deg, var(--card), var(--card2) 50%, #07070d);
      background-size: 180% 180%;
      background-position: center;
    }

    .hx-bg-grid {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .25;
      background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 28px 28px;
      background-position: 0 0;
    }

    .hx-orb {
      position: absolute;
      z-index: 1;
      pointer-events: none;
      border-radius: 50%;
      filter: blur(20px);
      opacity: .55;
    }

    .hx-orb.one {
      width: 95px;
      height: 95px;
      left: -35px;
      top: 90px;
      background: rgba(0,229,255,.25);
    }

    .hx-orb.two {
      width: 125px;
      height: 125px;
      right: -50px;
      top: 520px;
      background: rgba(255,78,205,.22);
    }

    .hx-orb.three {
      width: 110px;
      height: 110px;
      left: 40%;
      bottom: 140px;
      background: rgba(255,184,0,.18);
    }

    .hx-section {
      position: relative;
      z-index: 3;
      padding: 30px 18px 28px;
    }

    .hx-divider {
      position: relative;
      z-index: 4;
      height: 1px;
      margin: 0 18px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    }

    .hx-icon {
      width: 108px;
      height: 108px;
      margin: 0 auto 15px;
      border-radius: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.38), transparent 30%),
        radial-gradient(circle at 72% 78%, rgba(0,229,255,.18), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(255,184,0,.22), transparent 48%),
        linear-gradient(145deg, rgba(255,184,0,.26), rgba(255,78,205,.18), rgba(0,229,255,.22));
      box-shadow:
        inset 0 0 26px rgba(255,255,255,.14),
        inset 0 0 38px rgba(255,184,0,.10),
        0 0 34px rgba(255,184,0,.26),
        0 0 44px rgba(0,229,255,.20);
      animation: iconFloat 4.2s ease-in-out infinite;
    }

    .hx-icon::before {
      content: "";
      position: absolute;
      z-index: 1;
      width: 82px;
      height: 28px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,184,0,.36), rgba(0,229,255,.16), transparent);
      filter: blur(9px);
      opacity: .8;
      animation: beeTrail 3.2s ease-in-out infinite;
    }

    .hx-icon::after {
      content: "✦";
      position: absolute;
      right: 16px;
      top: 14px;
      z-index: 2;
      font-size: 18px;
      color: #ffe58a;
      opacity: .85;
      text-shadow: 0 0 12px rgba(255,184,0,.8);
      animation: spark 2.8s ease-in-out infinite;
    }

    .hx-icon span {
      position: relative;
      z-index: 3;
      font-size: 56px;
      filter:
        drop-shadow(0 0 10px rgba(255,184,0,.9))
        drop-shadow(0 0 18px rgba(0,229,255,.36));
      animation: beeFly 2.7s ease-in-out infinite;
    }

    .hx-title {
      margin: 0;
      font-size: 38px;
      line-height: 1.05;
      font-weight: 950;
      letter-spacing: 0;
      color: var(--white);
      text-shadow:
        0 0 16px rgba(0,229,255,.46),
        0 0 34px rgba(255,78,205,.20);
    }

    .hx-title span {
      display: block;
      margin-top: 5px;
      font-size: 24px;
      color: #dffaff;
    }

    .hx-title.gold span {
      color: #fff3d0;
    }

    .hx-text {
      max-width: 455px;
      margin: 13px auto 18px;
      font-size: 15px;
      line-height: 1.52;
      opacity: .93;
    }

    .hx-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 22px 0 20px;
    }

    .hx-feature-card {
      height: 148px;
      min-width: 0;
      padding: 12px 7px 11px;
      border-radius: 24px;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-rows: 42px 30px 34px 30px;
      align-items: center;
      justify-items: center;
      background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow:
        inset 0 0 22px rgba(255,255,255,.06),
        0 16px 34px rgba(0,0,0,.26),
        0 0 18px rgba(0,229,255,.07);
    }

    .hx-feature-card.speed {
      border-color: rgba(255,184,0,.32);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,184,0,.16), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
      box-shadow:
        inset 0 0 22px rgba(255,255,255,.06),
        0 16px 34px rgba(0,0,0,.26),
        0 0 30px rgba(255,184,0,.18);
    }

    .hx-feature-card.countries {
      border-color: rgba(37,255,156,.22);
      box-shadow:
        inset 0 0 22px rgba(255,255,255,.06),
        0 16px 34px rgba(0,0,0,.26),
        0 0 26px rgba(37,255,156,.14);
    }

    .hx-feature-card.youtube {
      border-color: rgba(255,78,78,.24);
      box-shadow:
        inset 0 0 22px rgba(255,255,255,.06),
        0 16px 34px rgba(0,0,0,.26),
        0 0 28px rgba(255,78,78,.16);
    }

    .hx-feature-visual {
      width: 100%;
      height: 42px;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hx-speed-meter {
      width: 66px;
      height: 38px;
      position: relative;
    }

    .hx-speed-meter::before {
      content: "";
      position: absolute;
      left: 2px;
      right: 2px;
      bottom: 0;
      height: 31px;
      border-radius: 70px 70px 9px 9px;
      background:
        conic-gradient(from 220deg,
          rgba(255,184,0,.12) 0deg,
          rgba(255,184,0,.95) 46deg,
          rgba(0,229,255,.95) 92deg,
          rgba(37,255,156,.95) 132deg,
          transparent 134deg);
      filter: drop-shadow(0 0 13px rgba(255,184,0,.35));
    }

    .hx-speed-meter::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 0;
      height: 23px;
      border-radius: 55px 55px 8px 8px;
      background: rgba(10, 18, 32, .84);
    }

    .hx-speed-needle {
      position: absolute;
      left: 50%;
      bottom: 5px;
      z-index: 4;
      width: 3px;
      height: 27px;
      border-radius: 999px;
      background: linear-gradient(to top, #fff, var(--green));
      transform-origin: bottom center;
      transform: translateX(-50%) rotate(-58deg);
      box-shadow:
        0 0 12px rgba(37,255,156,.55),
        0 0 16px rgba(255,184,0,.28);
      will-change: transform;
      animation: speedNeedleSweep 3.2s ease-in-out infinite;
    }

    .hx-speed-core {
      position: absolute;
      left: 50%;
      bottom: 1px;
      z-index: 5;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #fff;
      transform: translateX(-50%);
      box-shadow:
        0 0 10px rgba(255,255,255,.55),
        0 0 16px rgba(37,255,156,.45);
    }

    .hx-speed-max {
      position: absolute;
      right: -4px;
      top: 2px;
      z-index: 6;
      padding: 2px 5px;
      border-radius: 999px;
      background: rgba(37,255,156,.18);
      color: #dffff3;
      font-size: 8px;
      line-height: 1;
      font-weight: 950;
      border: 1px solid rgba(37,255,156,.16);
      box-shadow: 0 0 12px rgba(37,255,156,.28);
    }

    .hx-smart-country {
      width: 52px;
      height: 32px;
      position: relative;
    }

    .hx-smart-country::before {
      content: "";
      position: absolute;
      inset: 2px 0;
      border-radius: 999px;
      background: rgba(37,255,156,.12);
      border: 1px solid rgba(37,255,156,.18);
      box-shadow:
        0 0 18px rgba(37,255,156,.18),
        inset 0 0 12px rgba(255,255,255,.06);
      animation: smartPulse 2.2s ease-in-out infinite;
    }

    .hx-smart-country::after {
      content: "↻";
      position: absolute;
      right: -3px;
      top: -3px;
      z-index: 4;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(0,229,255,.20);
      color: #e9ffff;
      font-size: 11px;
      font-weight: 950;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 12px rgba(0,229,255,.35);
      animation: rotate 2.8s linear infinite;
    }

    .hx-smart-country span {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
      opacity: 0;
      transform: translateY(8px) scale(.78);
    }

    .hx-smart-country span:nth-child(1) { animation: flagSwitch 8s infinite 0s; }
    .hx-smart-country span:nth-child(2) { animation: flagSwitch 8s infinite 2s; }
    .hx-smart-country span:nth-child(3) { animation: flagSwitch 8s infinite 4s; }
    .hx-smart-country span:nth-child(4) { animation: flagSwitch 8s infinite 6s; }

    .hx-youtube-clean {
      width: 56px;
      height: 34px;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 42%),
        linear-gradient(145deg, rgba(255,78,78,.25), rgba(0,229,255,.16));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow:
        inset 0 0 14px rgba(255,255,255,.08),
        0 0 22px rgba(255,78,78,.22);
    }

    .hx-youtube-clean .play {
      position: absolute;
      left: 19px;
      top: 8px;
      width: 21px;
      height: 18px;
      border-radius: 7px;
      background: rgba(255,255,255,.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      box-shadow: 0 0 14px rgba(255,255,255,.16);
      animation: playClean 2.4s ease-in-out infinite;
    }

    .hx-youtube-clean .ad {
      position: absolute;
      left: 5px;
      bottom: 6px;
      padding: 2px 4px;
      border-radius: 5px;
      background: rgba(255,54,54,.90);
      color: #fff;
      font-size: 8px;
      font-weight: 950;
      line-height: 1;
      box-shadow: 0 0 10px rgba(255,54,54,.5);
      animation: adVanish 4s ease-in-out infinite;
    }

    .hx-youtube-clean .slash {
      position: absolute;
      left: 5px;
      top: 16px;
      width: 46px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, #ff4444, #fff, transparent);
      transform: rotate(-28deg) scaleX(0);
      transform-origin: center;
      animation: adSlash 4s ease-in-out infinite;
    }

    .hx-youtube-clean .shield {
      position: absolute;
      right: 3px;
      top: 1px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: rgba(37,255,156,.20);
      color: #bffff0;
      font-size: 11px;
      font-weight: 950;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(.5);
      box-shadow: 0 0 14px rgba(37,255,156,.40);
      animation: shieldPop 4s ease-in-out infinite;
    }

    .hx-feature-main {
      position: relative;
      z-index: 2;
      width: 100%;
      font-size: 23px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0;
      color: #fff;
      white-space: nowrap;
      text-shadow: 0 0 18px rgba(255,255,255,.22);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hx-feature-main small {
      font-size: 12px;
      opacity: .82;
      margin-right: 3px;
    }

    .hx-feature-card.youtube .hx-feature-main {
      font-size: 16px;
    }

    .hx-feature-label {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 0 2px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.16;
      opacity: .88;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hx-feature-pill {
      position: relative;
      z-index: 2;
      width: 100%;
      min-height: 27px;
      padding: 4px 5px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.08);
      font-size: 9px;
      line-height: 1.15;
      font-weight: 950;
      opacity: .86;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-wrap: anywhere;
    }

    .hx-feature-card.speed .hx-feature-pill {
      background: rgba(255,184,0,.14);
      border-color: rgba(255,184,0,.12);
      color: #fff8dc;
    }

    .hx-feature-card.countries .hx-feature-pill {
      background: rgba(37,255,156,.13);
      border-color: rgba(37,255,156,.13);
      color: #eafff5;
    }

    .hx-feature-card.youtube .hx-feature-pill {
      background: rgba(255,78,78,.14);
      color: #fff;
    }

    .hx-actions {
      width: min(100%, 440px);
      display: grid;
      grid-template-columns: minmax(0, 1.38fr) minmax(0, .92fr);
      gap: 9px;
      margin: 17px auto 0;
      justify-items: center;
    }

    .hx-button {
      width: 100%;
      min-height: 48px;
      padding: 8px 12px;
      border-radius: 16px;
      color: #fff;
      text-decoration: none;
      font-size: 13.5px;
      font-weight: 950;
      line-height: 1.05;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,.16);
      background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 14px rgba(255,255,255,.10),
        0 8px 18px rgba(0,0,0,.18);
      transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
    }

    .hx-actions .hx-button {
      width: 100%;
    }

    @media (hover: hover) and (pointer: fine) {
      .hx-button:hover {
        transform: translateY(-1px);
        filter: brightness(1.08);
      }
    }

    .hx-button:active {
      transform: scale(.985);
    }

    .hx-button:focus-visible {
      outline: 3px solid rgba(0, 229, 255, .85);
      outline-offset: 3px;
    }

    .hx-button span {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    .hx-button::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 58%);
      opacity: .55;
    }

    .hx-button.connect-server {
      --hx-connect-angle: 0deg;
      grid-column: 1 / -1;
      min-height: 60px;
      border-radius: 18px;
      color: #f7fbff;
      isolation: isolate;
      contain: paint;
      overflow: hidden;
      border: 2px solid transparent;
      background:
        radial-gradient(circle at 50% 0%, rgba(0,229,255,.24), transparent 45%) padding-box,
        linear-gradient(145deg, #14264e 0%, #1b2d58 48%, #211d43 100%) padding-box,
        conic-gradient(
          from var(--hx-connect-angle),
          #00e5ff 0deg,
          #74f5ff 46deg,
          #f3feff 88deg,
          #7c5cff 136deg,
          #ff4ecd 190deg,
          #f3feff 250deg,
          #74f5ff 310deg,
          #00e5ff 360deg
        ) border-box;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -10px 22px rgba(124,92,255,.10),
        inset 0 0 14px rgba(255,255,255,.10),
        0 8px 18px rgba(0,0,0,.18),
        0 0 16px rgba(0,229,255,.18),
        0 0 28px rgba(124,92,255,.12);
      animation: hxConnectBorderClockwise 5.8s linear infinite;
    }

    .hx-button.connect-server::before {
      content: "";
      position: absolute;
      inset: 1px;
      z-index: 1;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.24), transparent 56%),
        radial-gradient(ellipse at 50% 0%, rgba(0,229,255,.16), transparent 62%);
      opacity: .52;
    }

    .hx-actions .hx-button.connect-server {
      width: min(100%, 390px);
    }

    .hx-button.connect-server span {
      font-size: 17px;
    }

    .hx-button.update-server,
    .hx-button.region {
      min-height: 84px;
      padding: 10px 8px;
      justify-content: center;
      gap: 7px;
      color: #f6fbff;
    }

    .hx-button.update-server {
      color: #f6fbff;
      border-color: rgba(0,229,255,.24);
      background:
        radial-gradient(circle at 50% 0%, rgba(47,140,255,.25), transparent 40%),
        linear-gradient(145deg, rgba(47,140,255,.14), rgba(88,103,255,.09) 52%, rgba(255,255,255,.07)),
        rgba(255,255,255,.055);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 12px rgba(255,255,255,.09),
        0 8px 18px rgba(0,0,0,.18),
        0 0 18px rgba(0,229,255,.11);
    }

    .hx-button.update-server::before {
      background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 58%);
      opacity: .55;
    }

    .hx-button.region {
      border-color: rgba(0,229,255,.24);
      background:
        radial-gradient(circle at 50% 0%, rgba(47,140,255,.25), transparent 40%),
        linear-gradient(145deg, rgba(47,140,255,.14), rgba(88,103,255,.09) 52%, rgba(255,255,255,.07)),
        rgba(255,255,255,.055);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 12px rgba(255,255,255,.09),
        0 8px 18px rgba(0,0,0,.18),
        0 0 18px rgba(0,229,255,.11);
    }

    .hx-button.gold {
      min-height: 50px;
      padding: 8px 12px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--gold), var(--pink), var(--cyan));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 0 14px rgba(255,255,255,.13),
        0 8px 18px rgba(255,184,0,.17),
        0 0 22px rgba(255,78,205,.15);
    }

    .hx-update-left,
    .hx-region-left {
      display: flex;
      align-items: center;
    }

    .hx-update-left,
    .hx-region-left {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      gap: 7px;
      text-align: center;
      min-width: 0;
    }

    .hx-update-icon,
    .hx-region-icon {
      width: 32px;
      height: 32px;
      border-radius: 12px;
      flex-shrink: 0;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.38), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.08));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 0 16px rgba(0,229,255,.11);
    }

    .hx-button.update-server .hx-update-icon {
      width: 36px;
      height: 36px;
      border-radius: 14px;
      color: #ffffff;
      font-size: 20px;
      background:
        radial-gradient(circle at 32% 20%, rgba(255,255,255,.92), transparent 28%),
        radial-gradient(circle at 72% 82%, rgba(255,78,205,.34), transparent 42%),
        linear-gradient(145deg, rgba(0,229,255,.72), rgba(124,92,255,.56));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 0 -8px 16px rgba(16,23,60,.24),
        0 0 18px rgba(0,229,255,.28),
        0 8px 18px rgba(0,0,0,.20);
      text-shadow: 0 0 10px rgba(255,255,255,.62);
      overflow: hidden;
    }

    .hx-update-glyph {
      width: 25px;
      height: 25px;
      display: block;
      overflow: visible;
      filter: drop-shadow(0 0 4px rgba(255,255,255,.32));
    }

    .hx-update-orbits {
      transform-origin: 12px 12px;
      transition: transform .34s cubic-bezier(.2,.75,.25,1);
    }

    .hx-update-location {
      fill: rgba(247,253,255,.94);
      stroke: rgba(17,48,91,.34);
      stroke-width: .7;
      filter: drop-shadow(0 0 3px rgba(255,255,255,.48));
    }

    .hx-update-location-dot {
      fill: #35e8ff;
      stroke: rgba(7,31,65,.52);
      stroke-width: .6;
    }

    @media (hover: hover) and (pointer: fine) {
      .hx-button.update-server:hover .hx-update-orbits {
        transform: rotate(26deg);
      }
    }

    .hx-button.update-server:active .hx-update-orbits {
      transform: rotate(48deg);
    }

    .hx-update-text,
    .hx-region-text {
      min-width: 0;
      display: flex;
      flex-direction: column;
      line-height: 1.08;
      align-items: center;
      text-align: center;
    }

    .hx-update-text b {
      font-size: 12.8px;
      font-weight: 950;
      color: #f6fbff;
    }

    .hx-region-text b {
      font-size: 12.8px;
      font-weight: 950;
      white-space: nowrap;
    }

    .hx-update-text small,
    .hx-region-text small {
      margin-top: 2px;
      font-size: 9.2px;
      font-weight: 850;
      opacity: .82;
    }

    .hx-note {
      max-width: 380px;
      margin: 12px auto 0;
      font-size: 11px;
      font-weight: 800;
      opacity: .70;
      line-height: 1.35;
    }

    .hx-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 950;
      margin-bottom: 14px;
    }

    .hx-badge.online {
      background:
        radial-gradient(circle at 18% 50%, rgba(37,255,156,.24), transparent 38%),
        rgba(37,255,156,.12);
      color: #e8fff5;
      border: 1px solid rgba(37,255,156,.16);
      box-shadow:
        inset 0 0 18px rgba(255,255,255,.05),
        0 0 24px rgba(37,255,156,.22);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .hx-badge.gold {
      background: rgba(255,184,0,.14);
      color: #fff3d0;
      box-shadow: 0 0 24px rgba(255,184,0,.18);
    }

    .hx-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 16px var(--green);
      animation: dotPulse 1.2s infinite;
    }

    .hx-badge.gold .hx-dot {
      background: var(--gold);
      box-shadow: 0 0 16px var(--gold);
    }

    .hx-status {
      position: relative;
      height: 44px;
      max-width: 426px;
      margin: -2px auto 18px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 14% 50%, rgba(37,255,156,.15), transparent 25%),
        radial-gradient(circle at 86% 50%, rgba(0,229,255,.12), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.075));
      border: 1px solid rgba(255,255,255,.16);
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 0 18px rgba(255,255,255,.08),
        0 14px 30px rgba(0,0,0,.20),
        0 0 26px rgba(0,229,255,.11);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .hx-status div {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      font-size: 13.5px;
      font-weight: 950;
      opacity: 0;
      transform: translateY(12px);
      text-shadow: 0 0 14px rgba(255,255,255,.18);
    }

    .hx-status div:nth-child(1) { animation: statusSwitch 8s infinite 0s; }
    .hx-status div:nth-child(2) { animation: statusSwitch 8s infinite 2s; }
    .hx-status div:nth-child(3) { animation: statusSwitch 8s infinite 4s; }
    .hx-status div:nth-child(4) { animation: statusSwitch 8s infinite 6s; }

    .hx-scanner {
      position: relative;
      width: 176px;
      height: 176px;
      margin: 4px auto 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate;
    }

    .hx-scanner::before {
      content: "";
      position: absolute;
      inset: 8px;
      z-index: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(0,229,255,.22), transparent 60%),
        radial-gradient(circle at 55% 62%, rgba(255,78,205,.15), transparent 58%);
      filter: blur(2px);
      box-shadow:
        0 0 38px rgba(0,229,255,.18),
        inset 0 0 30px rgba(255,255,255,.06);
    }

    .hx-ring {
      position: absolute;
      z-index: 1;
      border-radius: 50%;
      border: 1px solid rgba(0,229,255,.32);
      box-shadow:
        inset 0 0 18px rgba(0,229,255,.10),
        0 0 18px rgba(0,229,255,.10);
      animation: radar 2.8s linear infinite;
    }

    .hx-ring:nth-child(1) {
      inset: 0;
    }

    .hx-ring:nth-child(2) {
      inset: 18px;
      animation-delay: .4s;
      border-color: rgba(124,92,255,.34);
    }

    .hx-ring:nth-child(3) {
      inset: 36px;
      animation-delay: .8s;
      border-color: rgba(255,78,205,.30);
    }

    .hx-rocket-orbit {
      position: absolute;
      inset: 0;
      z-index: 4;
      border-radius: 50%;
      animation: rotate 5.6s linear infinite;
      will-change: transform;
    }

    .hx-rocket-orbit span {
      position: absolute;
      top: -1px;
      left: 50%;
      font-size: 27px;
      transform: translateX(-50%) rotate(38deg);
      filter:
        drop-shadow(0 0 10px rgba(0,229,255,.78))
        drop-shadow(0 0 14px rgba(255,184,0,.34));
    }

    .hx-core {
      width: 98px;
      height: 98px;
      z-index: 3;
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 18%, rgba(255,255,255,.34), transparent 34%),
        radial-gradient(circle at 58% 78%, rgba(255,78,205,.17), transparent 46%),
        radial-gradient(circle at 50% 52%, rgba(0,229,255,.18), transparent 58%),
        linear-gradient(145deg, rgba(0,229,255,.30), rgba(124,92,255,.24));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        inset 0 0 24px rgba(255,255,255,.16),
        inset 0 0 38px rgba(0,229,255,.10),
        0 0 36px rgba(0,229,255,.32),
        0 0 48px rgba(124,92,255,.18);
      animation: corePulse 2.4s ease-in-out infinite;
    }

    .hx-core span {
      font-size: 44px;
      filter: drop-shadow(0 0 10px rgba(0,229,255,.45));
      animation: globeMove 2.3s ease-in-out infinite;
    }

    .hx-flags {
      overflow: hidden;
      margin-top: 14px;
      padding: 2px 0;
      mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }

    .hx-flags-track {
      display: flex;
      gap: 10px;
      width: max-content;
      animation: flagsMove 32s linear infinite;
    }

    .hx-flags-track span {
      min-width: 50px;
      height: 48px;
      padding: 0 10px;
      border-radius: 16px;
      font-size: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 35% 18%, rgba(255,255,255,.20), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.065));
      border: 1px solid rgba(255,255,255,.105);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 0 14px rgba(255,255,255,.045),
        0 10px 20px rgba(0,0,0,.16);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .hx-bottom {
      width: fit-content;
      max-width: 100%;
      margin: 16px auto 0;
      padding: 8px 13px;
      border-radius: 999px;
      font-size: 12.6px;
      font-weight: 900;
      color: rgba(235,253,255,.96);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    .hx-ref {
      padding-top: 32px;
      padding-bottom: 32px;
    }

    .hx-ref .hx-title {
      font-size: 36px;
      max-width: 440px;
      margin: 0 auto;
    }

    .hx-ref .hx-title span {
      font-size: 22px;
      margin-top: 6px;
    }

    .hx-ref-text {
      max-width: 445px;
      margin: 15px auto 20px;
      font-size: 15px;
      line-height: 1.55;
      opacity: .9;
    }

    .hx-ref-text b {
      color: #fff6d6;
      text-shadow: 0 0 14px rgba(255, 184, 0, .22);
    }

    @keyframes siteBg {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    @keyframes gridMove {
      from { background-position: 0 0; }
      to { background-position: 60px 60px; }
    }

    @keyframes iconFloat {
      0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
      50% { transform: translateY(-5px) rotate(1deg) scale(1.035); }
    }

    @keyframes beeFly {
      0%, 100% { transform: translate(0, 0) rotate(-6deg) scale(1); }
      50% { transform: translate(-3px, -5px) rotate(-3deg) scale(1.05); }
    }

    @keyframes beeTrail {
      0% { opacity: 0; transform: translateX(-74px) scaleX(.5); }
      35% { opacity: .72; transform: translateX(-20px) scaleX(1); }
      100% { opacity: 0; transform: translateX(64px) scaleX(.35); }
    }

    @keyframes spark {
      0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); }
      50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
    }

    @keyframes smartPulse {
      0%, 100% { transform: scale(1); opacity: .9; }
      50% { transform: scale(1.08); opacity: 1; }
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes flagSwitch {
      0% { opacity: 0; transform: translateY(8px) scale(.78); }
      8%, 22% { opacity: 1; transform: translateY(0) scale(1); }
      30%, 100% { opacity: 0; transform: translateY(-8px) scale(.78); }
    }

    @keyframes playClean {
      0%, 100% { transform: scale(1); background: rgba(255,255,255,.18); }
      50% { transform: scale(1.08); background: rgba(37,255,156,.24); }
    }

    @keyframes adVanish {
      0%, 22% { opacity: 1; transform: translateY(0) scale(1); }
      48%, 100% { opacity: 0; transform: translateY(-12px) scale(.65); }
    }

    @keyframes adSlash {
      0%, 20% { transform: rotate(-28deg) scaleX(0); opacity: 0; }
      34% { transform: rotate(-28deg) scaleX(1); opacity: 1; }
      62%, 100% { transform: rotate(-28deg) scaleX(0); opacity: 0; }
    }

    @keyframes shieldPop {
      0%, 35% { opacity: 0; transform: scale(.5); }
      48% { opacity: 1; transform: scale(1.12); }
      62%, 100% { opacity: 1; transform: scale(1); }
    }

    @keyframes speedNeedleSweep {
      0%, 100% { transform: translateX(-50%) rotate(-48deg); }
      45% { transform: translateX(-50%) rotate(44deg); }
      62% { transform: translateX(-50%) rotate(34deg); }
    }

    @keyframes dotPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.7); opacity: .45; }
    }

    @keyframes hxConnectBorderClockwise {
      to { --hx-connect-angle: 360deg; }
    }

    @keyframes hxLaunchSpark {
      0%, 100% { opacity: .55; transform: translate3d(0, 0, 0) scale(1); }
      50% { opacity: .9; transform: translate3d(2px, -3px, 0) scale(1.06); }
    }

    @keyframes statusSwitch {
      0% { opacity: 0; transform: translateY(12px); }
      8%, 22% { opacity: 1; transform: translateY(0); }
      30%, 100% { opacity: 0; transform: translateY(-12px); }
    }

    @keyframes radar {
      0% { transform: scale(.82); opacity: .9; }
      100% { transform: scale(1.25); opacity: 0; }
    }

    @keyframes corePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    @keyframes globeMove {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-3px) rotate(8deg); }
    }

    @keyframes flagsMove {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @media (max-width: 420px) {
      .hx-site {
        padding:
          max(10px, env(safe-area-inset-top))
          8px
          calc(max(76px, env(safe-area-inset-bottom)) + 24px);
      }

      .hx-site::after {
        height: calc(170px + env(safe-area-inset-bottom));
      }

      .hx-page {
        border-radius: 30px;
      }

      .hx-section {
        padding: 28px 16px 26px;
      }

      .hx-title {
        font-size: 32px;
      }

      .hx-title span {
        font-size: 21px;
      }

      .hx-text {
        font-size: 14px;
      }

      .hx-feature-grid {
        gap: 9px;
      }

      .hx-feature-card {
        height: 142px;
        padding: 11px 6px 10px;
        border-radius: 21px;
        grid-template-rows: 40px 28px 34px 28px;
      }

      .hx-feature-main {
        font-size: 20px;
      }

      .hx-feature-card.youtube .hx-feature-main {
        font-size: 15px;
      }

      .hx-feature-label {
        font-size: 10.3px;
      }

      .hx-feature-pill {
        font-size: 8.3px;
        min-height: 25px;
      }

      .hx-actions {
        width: min(100%, 400px);
        grid-template-columns: minmax(0, 1.42fr) minmax(0, .90fr);
        gap: 8px;
        margin-top: 15px;
      }

      .hx-button {
        min-height: 46px;
        padding: 8px 10px;
        border-radius: 15px;
      }

      .hx-button.connect-server,
      .hx-button.gold {
        min-height: 58px;
        border-radius: 17px;
      }

      .hx-actions .hx-button.connect-server {
        width: min(100%, 370px);
      }

      .hx-button.connect-server span {
        font-size: 16px;
      }

      .hx-button.update-server,
      .hx-button.region {
        min-height: 82px;
        padding: 9px 7px;
      }

      .hx-update-text b,
      .hx-region-text b {
        font-size: 11.7px;
      }

      .hx-update-text small,
      .hx-region-text small {
        font-size: 8.6px;
      }

      .hx-update-icon,
      .hx-region-icon {
        width: 31px;
        height: 31px;
        font-size: 16px;
        border-radius: 11px;
      }

      .hx-status {
        height: 42px;
        margin-top: -4px;
        margin-bottom: 16px;
      }

      .hx-status div {
        padding: 0 12px;
        font-size: 12px;
      }

      .hx-scanner {
        width: 166px;
        height: 166px;
        margin-bottom: 16px;
      }

      .hx-core {
        width: 92px;
        height: 92px;
      }

      .hx-core span {
        font-size: 41px;
      }

      .hx-rocket-orbit span {
        font-size: 25px;
      }

      .hx-flags-track span {
        min-width: 46px;
        height: 45px;
        font-size: 24px;
        padding: 0 9px;
        border-radius: 15px;
      }

      .hx-bottom {
        font-size: 11.5px;
        line-height: 1.2;
      }

      .hx-ref {
        padding-top: 30px;
        padding-bottom: 28px;
      }

      .hx-ref .hx-title {
        font-size: 31px;
      }

      .hx-ref .hx-title span {
        font-size: 19px;
      }

      .hx-ref-text {
        font-size: 14px;
        margin-bottom: 17px;
      }

    }

    @media (max-width: 360px) {
      .hx-section {
        padding-left: 14px;
        padding-right: 14px;
      }

      .hx-feature-grid {
        grid-template-columns: 1fr;
      }

      .hx-feature-card {
        height: auto;
        min-height: 108px;
        grid-template-columns: 66px 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 10px;
        row-gap: 3px;
        padding: 13px;
        text-align: left;
        justify-items: start;
      }

      .hx-feature-visual {
        grid-row: 1 / 4;
        height: 54px;
      }

      .hx-feature-main,
      .hx-feature-label,
      .hx-feature-pill {
        justify-content: flex-start;
        text-align: left;
      }

      .hx-feature-pill {
        width: auto;
        max-width: 100%;
        padding: 5px 9px;
      }

      .hx-actions {
        grid-template-columns: 1fr;
        width: min(100%, 320px);
      }

      .hx-actions .hx-button,
      .hx-actions .hx-button.connect-server {
        width: 100%;
      }

      .hx-region-text b {
        white-space: normal;
      }

    }

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

      .hx-button,
      .hx-back-link {
        transition: none !important;
      }

      .hx-update-orbits {
        transition: none !important;
        transform: none !important;
      }

      .hx-dot,
      .hx-status div,
      .hx-ring,
      .hx-rocket-orbit,
      .hx-core,
      .hx-core span,
      .hx-flags-track {
        animation: none !important;
      }

      .hx-status div:first-child {
        opacity: 1;
        transform: none;
      }

      .hx-page--connect .hx-connect-hero .hx-icon,
      .hx-page--connect .hx-connect-hero .hx-icon::before,
      .hx-page--connect .hx-connect-hero .hx-icon::after,
      .hx-page--connect .hx-connect-hero .hx-icon span {
        animation: none !important;
      }

      .hx-update-hero-icon,
      .hx-update-hero-icon::before {
        animation: none !important;
      }
    }

    .hx-page--inner {
      max-width: 560px;
    }

    .hx-page--inner .hx-section {
      padding-top: 30px;
      padding-bottom: 32px;
    }

    .hx-smart-location-section {
      scroll-margin-top: calc(18px + env(safe-area-inset-top));
    }

    .hx-back-link {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      margin: 0 auto 18px;
      padding: 9px 14px;
      border-radius: 999px;
      color: rgba(245, 250, 255, .9);
      text-decoration: none;
      font-size: 12px;
      font-weight: 900;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
      transition: transform .16s ease, background .16s ease, border-color .16s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .hx-back-link:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.10);
        border-color: rgba(0,229,255,.26);
      }
    }

    .hx-page-kicker {
      margin: 0 auto 10px;
      font-size: 12px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(210,246,255,.78);
    }

    .hx-card {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      padding: 18px 15px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.13), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 0 18px rgba(255,255,255,.045),
        0 14px 30px rgba(0,0,0,.20);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .hx-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 58%);
      opacity: .72;
    }

    .hx-card > * {
      position: relative;
      z-index: 2;
    }

    .hx-grid {
      width: 100%;
      max-width: 460px;
      margin: 20px auto 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .hx-grid .hx-card {
      min-height: 138px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .hx-card-icon {
      width: 42px;
      height: 42px;
      margin: 0 auto 12px;
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 950;
      color: #ffffff;
      background:
        radial-gradient(circle at 32% 18%, rgba(255,255,255,.72), transparent 30%),
        linear-gradient(145deg, rgba(0,229,255,.38), rgba(124,92,255,.24));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 0 18px rgba(0,229,255,.14),
        0 10px 18px rgba(0,0,0,.18);
    }

    .hx-card b {
      display: block;
      color: #ffffff;
      font-size: 13.5px;
      line-height: 1.14;
      font-weight: 950;
    }

    .hx-card p,
    .hx-card span {
      display: block;
      margin: 7px 0 0;
      color: rgba(246,251,255,.74);
      font-size: 11px;
      line-height: 1.35;
      font-weight: 760;
    }

    .hx-page--connect .hx-connect-hero {
      padding-top: 30px;
      padding-bottom: 30px;
    }

    .hx-page--connect .hx-connect-hero .hx-title {
      max-width: 460px;
      margin-left: auto;
      margin-right: auto;
    }

    .hx-page--connect .hx-connect-hero .hx-text {
      max-width: 420px;
      margin-bottom: 12px;
    }



    .hx-contact-actions {
      width: min(100%, 430px);
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }

    .hx-contact-actions .hx-contact-button {
      min-height: 56px;
      border-radius: 18px;
      gap: 8px;
      font-size: 15px;
      overflow: hidden;
      transition: transform .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .hx-contact-actions .hx-contact-button::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(110deg, transparent 12%, rgba(255,255,255,.18), transparent 56%);
      opacity: .32;
      transform: translateX(-34%);
    }

    .hx-contact-button.telegram {
      border-color: rgba(0,229,255,.25);
      background:
        radial-gradient(circle at 50% 0%, rgba(0,229,255,.30), transparent 44%),
        radial-gradient(circle at 92% 100%, rgba(124,92,255,.16), transparent 38%),
        linear-gradient(145deg, rgba(0,133,255,.26), rgba(255,255,255,.065));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 12px rgba(255,255,255,.06),
        0 10px 20px rgba(0,0,0,.18),
        0 0 22px rgba(0,229,255,.13);
    }

    .hx-contact-button.vk {
      border-color: rgba(124,92,255,.30);
      background:
        radial-gradient(circle at 50% 0%, rgba(86,148,255,.30), transparent 42%),
        radial-gradient(circle at 92% 100%, rgba(255,78,205,.13), transparent 42%),
        linear-gradient(145deg, rgba(47,140,255,.22), rgba(124,92,255,.17), rgba(255,255,255,.065));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 12px rgba(255,255,255,.06),
        0 10px 20px rgba(0,0,0,.18),
        0 0 22px rgba(124,92,255,.15);
    }

    .hx-contact-icon {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    }

    .hx-contact-icon--vk::before {
      content: "";
      width: 13px;
      height: 13px;
      border-radius: 4px;
      background: linear-gradient(145deg, #74f5ff, #7c5cff);
      box-shadow: 0 0 12px rgba(124,92,255,.34);
    }

    .hx-contact-actions .hx-inner-home {
      grid-column: 1 / -1;
    }

    .hx-actions--inner {
      width: min(100%, 430px);
      grid-template-columns: 1fr;
      margin-top: 20px;
    }

    .hx-actions--inner .hx-button {
      width: 100%;
      min-height: 58px;
      border-radius: 18px;
      font-size: 16px;
    }

    .hx-actions--inner.hx-contact-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .hx-actions--inner.hx-contact-actions .hx-contact-button {
      min-height: 56px;
      font-size: 15px;
    }

    @media (max-width: 430px) {
      .hx-page--connect .hx-connect-hero {
        padding-top: 24px;
        padding-bottom: 24px;
      }

      .hx-page--connect .hx-connect-hero .hx-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 10px;
        border-radius: 22px;
      }

      .hx-page--connect .hx-connect-hero .hx-icon span {
        font-size: 36px;
      }

      .hx-page--connect .hx-connect-hero .hx-title {
        max-width: 330px;
        font-size: 31px;
      }

      .hx-page--connect .hx-connect-hero .hx-title span {
        margin-top: 5px;
        font-size: 16.8px;
      }

      .hx-page--connect .hx-connect-hero .hx-text {
        max-width: 330px;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 13.2px;
        line-height: 1.42;
      }


      .hx-actions--inner.hx-contact-actions {
        width: min(100%, 330px);
        gap: 8px;
        margin-top: 15px;
      }

      .hx-actions--inner.hx-contact-actions .hx-contact-button {
        min-height: 50px;
        border-radius: 17px;
        font-size: 13.8px;
      }

      .hx-contact-icon {
        width: 25px;
        height: 25px;
        border-radius: 9px;
      }
    }

    @media (max-width: 390px) {
      .hx-page--connect .hx-connect-hero .hx-title {
        font-size: 29px;
      }

      .hx-page--connect .hx-connect-hero .hx-title span {
        font-size: 15.8px;
      }

      .hx-actions--inner.hx-contact-actions {
        width: min(100%, 312px);
      }
    }

    @media (max-width: 375px) {
      .hx-page--connect .hx-connect-hero {
        padding-top: 22px;
        padding-bottom: 22px;
      }

      .hx-page--connect .hx-connect-hero .hx-text {
        font-size: 12.7px;
      }

    }

    @media (max-width: 340px) {
      .hx-page--connect .hx-connect-hero .hx-icon {
        width: 64px;
        height: 64px;
        border-radius: 20px;
      }

      .hx-page--connect .hx-connect-hero .hx-icon span {
        font-size: 32px;
      }

      .hx-page--connect .hx-connect-hero .hx-title {
        font-size: 26px;
      }

      .hx-page--connect .hx-connect-hero .hx-title span {
        font-size: 14.3px;
      }

      .hx-actions--inner.hx-contact-actions {
        width: min(100%, 286px);
      }

      .hx-actions--inner.hx-contact-actions {
        grid-template-columns: 1fr;
      }

      .hx-actions--inner.hx-contact-actions .hx-contact-button {
        min-height: 48px;
      }
    }

    .hx-page--update .hx-section {
      padding-top: 28px;
      padding-bottom: calc(34px + env(safe-area-inset-bottom));
    }

    .hx-update-hero-icon {
      width: 82px;
      height: 82px;
      margin-bottom: 12px;
      border-radius: 26px;
      background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.32), transparent 34%),
        radial-gradient(circle at 70% 84%, rgba(255,78,205,.13), transparent 46%),
        linear-gradient(145deg, rgba(0,229,255,.24), rgba(124,92,255,.18), rgba(255,255,255,.07));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 0 18px rgba(255,255,255,.07),
        0 10px 22px rgba(0,0,0,.16),
        0 0 24px rgba(0,229,255,.14);
    }

    .hx-update-hero-icon::before {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, rgba(0,229,255,.0), rgba(0,229,255,.38), rgba(255,78,205,.26), rgba(0,229,255,.0));
      filter: none;
      opacity: .54;
      animation: rotate 5.8s linear infinite;
    }

    .hx-update-hero-icon::after {
      display: none;
    }

    .hx-update-hero-icon span {
      font-size: 38px;
      filter: drop-shadow(0 0 12px rgba(0,229,255,.34));
      animation: none;
    }

    .hx-update-kicker {
      width: fit-content;
      margin-bottom: 9px;
      padding: 6px 11px;
      border-radius: 999px;
      color: rgba(220,250,255,.88);
      background: rgba(0,229,255,.085);
      border: 1px solid rgba(0,229,255,.13);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    }

    .hx-page--update .hx-title {
      max-width: 420px;
      margin: 0 auto;
      font-size: clamp(30px, 6vw, 42px);
      line-height: 1.05;
      text-wrap: balance;
    }

    .hx-page--update .hx-title span {
      max-width: 350px;
      margin: 7px auto 0;
      font-size: clamp(16px, 3.4vw, 20px);
      line-height: 1.18;
      color: rgba(217,249,255,.92);
      text-wrap: balance;
    }

    .hx-page--update .hx-text {
      max-width: 430px;
      margin: 12px auto 15px;
      color: rgba(246,251,255,.82);
      font-size: clamp(13.5px, 2.6vw, 15px);
      line-height: 1.5;
      text-wrap: balance;
    }

    .hx-update-grid {
      max-width: 500px;
      margin-top: 0;
      gap: 9px;
    }

    .hx-update-card {
      min-height: 118px;
      padding: 14px 12px;
      border-radius: 21px;
      background:
        radial-gradient(circle at 50% 0%, rgba(0,229,255,.09), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.036));
      border-color: rgba(186,235,255,.10);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 22px rgba(0,0,0,.16);
    }

    .hx-update-card::before {
      opacity: .48;
    }

    .hx-update-card-icon {
      width: 34px;
      height: 34px;
      margin-bottom: 10px;
      border-radius: 13px;
      color: rgba(239,252,255,.96);
      font-size: 10px;
      letter-spacing: .04em;
      background:
        radial-gradient(circle at 32% 18%, rgba(255,255,255,.36), transparent 34%),
        linear-gradient(145deg, rgba(0,229,255,.18), rgba(124,92,255,.15));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 0 14px rgba(0,229,255,.08);
    }

    .hx-update-card b {
      font-size: 13px;
    }

    .hx-update-card p {
      margin-top: 6px;
      font-size: 10.4px;
      color: rgba(246,251,255,.68);
    }

    .hx-update-actions {
      width: min(100%, 390px);
      margin-top: 17px;
      gap: 10px;
    }

    .hx-button.telegram {
      color: #06131e;
      background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.78), transparent 36%),
        linear-gradient(135deg, #6df4ff, #7c7bff 52%, #ff63c9);
      border-color: rgba(255,255,255,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.44),
        inset 0 -12px 28px rgba(38,32,98,.14),
        0 14px 30px rgba(0,229,255,.14),
        0 0 26px rgba(255,78,205,.12);
    }

    .hx-button.telegram span {
      color: #071221;
      text-shadow: none;
    }

    .hx-button.telegram.hx-update-cta {
      min-height: 52px;
      color: #f8fcff;
      background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.16), transparent 34%),
        radial-gradient(circle at 86% 100%, rgba(124,92,255,.14), transparent 42%),
        linear-gradient(135deg, rgba(22,46,81,.94), rgba(31,36,78,.93) 58%, rgba(37,30,65,.90));
      border-color: rgba(123,239,255,.20);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -10px 20px rgba(0,0,0,.08),
        0 10px 22px rgba(0,0,0,.15),
        0 0 16px rgba(0,229,255,.07);
    }

    .hx-button.telegram.hx-update-cta span {
      color: #f8fcff;
      text-shadow: 0 0 14px rgba(0,229,255,.12);
    }

    .hx-page--connect .hx-contact-button.telegram {
      color: #f6fbff;
      border-color: rgba(0,229,255,.30);
      background:
        radial-gradient(circle at 50% 0%, rgba(0,229,255,.30), transparent 42%),
        radial-gradient(circle at 92% 100%, rgba(124,92,255,.16), transparent 40%),
        linear-gradient(145deg, rgba(0,133,255,.26), rgba(255,255,255,.065));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 12px rgba(255,255,255,.06),
        0 10px 20px rgba(0,0,0,.18),
        0 0 22px rgba(0,229,255,.13);
    }

    .hx-page--connect .hx-contact-button.vk {
      color: #f6fbff;
      border-color: rgba(124,92,255,.30);
      background:
        radial-gradient(circle at 50% 0%, rgba(86,148,255,.30), transparent 42%),
        radial-gradient(circle at 92% 100%, rgba(255,78,205,.13), transparent 42%),
        linear-gradient(145deg, rgba(47,140,255,.22), rgba(124,92,255,.17), rgba(255,255,255,.065));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 0 12px rgba(255,255,255,.06),
        0 10px 20px rgba(0,0,0,.18),
        0 0 22px rgba(124,92,255,.15);
    }

    .hx-page--connect .hx-contact-button.telegram span,
    .hx-page--connect .hx-contact-button.vk span {
      color: #f6fbff;
      text-shadow: 0 0 12px rgba(255,255,255,.10);
    }

    .hx-page--connect .hx-connect-hero {
      width: min(100%, 540px);
      margin: 0 auto;
      padding: 28px 24px 26px;
      overflow: hidden;
      isolation: isolate;
      border-radius: 32px;
      background:
        radial-gradient(circle at 50% -8%, rgba(123,239,255,.17), transparent 35%),
        radial-gradient(circle at 15% 14%, rgba(0,229,255,.12), transparent 34%),
        radial-gradient(circle at 90% 86%, rgba(255,78,205,.12), transparent 38%),
        linear-gradient(145deg, rgba(13,29,52,.76), rgba(19,19,43,.72) 52%, rgba(28,14,39,.66));
      border: 1px solid rgba(168,239,255,.13);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -22px 44px rgba(0,0,0,.13),
        inset 0 0 22px rgba(255,255,255,.035),
        0 18px 44px rgba(0,0,0,.22),
        0 0 34px rgba(0,229,255,.07);
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
    }

    .hx-page--connect .hx-connect-hero::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 32%),
        linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.055) 34%, transparent 52% 100%);
      opacity: .82;
    }

    .hx-page--connect .hx-connect-hero::after {
      content: "";
      position: absolute;
      z-index: 0;
      left: 18%;
      right: 18%;
      top: 114px;
      height: 1px;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(0,229,255,.22), rgba(255,255,255,.18), rgba(255,78,205,.16), transparent);
      opacity: .72;
    }

    .hx-page--connect .hx-connect-hero > * {
      position: relative;
      z-index: 2;
    }

    .hx-page--connect .hx-connect-hero .hx-icon {
      width: 68px;
      height: 68px;
      margin-bottom: 11px;
      border-radius: 23px;
      background:
        radial-gradient(circle at 34% 18%, rgba(255,255,255,.28), transparent 32%),
        radial-gradient(circle at 68% 82%, rgba(255,78,205,.14), transparent 44%),
        radial-gradient(circle at 50% 50%, rgba(255,184,0,.08), transparent 54%),
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(0,229,255,.11), rgba(124,92,255,.10));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 0 16px rgba(255,255,255,.055),
        0 10px 24px rgba(0,0,0,.16),
        0 0 22px rgba(0,229,255,.10),
        0 0 28px rgba(255,184,0,.07);
    }

    .hx-page--connect .hx-connect-hero .hx-icon::before {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      opacity: .35;
      filter: blur(0);
      background: conic-gradient(from 140deg, transparent 0 42%, rgba(0,229,255,.34), rgba(255,255,255,.32), transparent 68% 100%);
      animation: hxLaunchSpark 5.6s ease-in-out infinite;
    }

    .hx-page--connect .hx-connect-hero .hx-icon span {
      font-size: 33px;
      filter:
        drop-shadow(0 0 10px rgba(255,184,0,.24))
        drop-shadow(0 0 12px rgba(0,229,255,.16));
    }

    .hx-page--connect .hx-connect-hero .hx-page-kicker {
      margin-top: 0;
      margin-bottom: 10px;
      padding: 6px 11px;
      width: fit-content;
      color: rgba(226,250,255,.86);
      background:
        radial-gradient(circle at 30% 0%, rgba(0,229,255,.18), transparent 45%),
        rgba(255,255,255,.055);
      border: 1px solid rgba(123,239,255,.16);
      border-radius: 999px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 16px rgba(0,229,255,.08);
    }

    .hx-page--connect .hx-connect-hero .hx-title {
      max-width: 420px;
      font-size: clamp(34px, 6.1vw, 48px);
      line-height: 1.02;
      text-shadow:
        0 0 14px rgba(255,255,255,.12),
        0 0 22px rgba(0,229,255,.08);
    }

    .hx-page--connect .hx-connect-hero .hx-title span {
      margin-top: 6px;
      color: rgba(220,250,255,.86);
      font-size: clamp(16px, 3vw, 20px);
      line-height: 1.12;
      text-shadow: 0 0 14px rgba(0,229,255,.12);
    }

    .hx-page--connect .hx-connect-hero .hx-text {
      max-width: 360px;
      margin: 11px auto 11px;
      color: rgba(246,251,255,.78);
      font-size: 13.4px;
      line-height: 1.42;
    }


    @media (max-width: 430px) {
      .hx-page--connect .hx-connect-hero {
        width: min(100%, 340px);
        padding: 20px 16px 18px;
        border-radius: 26px;
      }

      .hx-page--connect .hx-connect-hero::after {
        top: 95px;
        left: 22%;
        right: 22%;
      }

      .hx-page--connect .hx-connect-hero .hx-icon {
        width: 62px;
        height: 62px;
        margin-bottom: 8px;
        border-radius: 20px;
      }

      .hx-page--connect .hx-connect-hero .hx-icon span {
        font-size: 31px;
      }

      .hx-page--connect .hx-connect-hero .hx-page-kicker {
        margin-bottom: 8px;
        padding: 5px 10px;
        font-size: 10px;
      }

      .hx-page--connect .hx-connect-hero .hx-title {
        max-width: 300px;
        font-size: 30px;
      }

      .hx-page--connect .hx-connect-hero .hx-title span {
        margin-top: 4px;
        font-size: 15px;
      }

      .hx-page--connect .hx-connect-hero .hx-text {
        max-width: 292px;
        margin: 9px auto 9px;
        font-size: 12.6px;
        line-height: 1.34;
      }


    }

    @media (max-width: 375px) {
      .hx-page--connect .hx-connect-hero {
        width: min(100%, 318px);
        padding: 18px 14px 16px;
      }

      .hx-page--connect .hx-connect-hero .hx-title {
        font-size: 28px;
      }

      .hx-page--connect .hx-connect-hero .hx-title span {
        font-size: 14.2px;
      }

    }

    @media (max-width: 340px) {
      .hx-page--connect .hx-connect-hero {
        width: min(100%, 286px);
        padding: 16px 12px 15px;
        border-radius: 23px;
      }

      .hx-page--connect .hx-connect-hero .hx-icon {
        width: 56px;
        height: 56px;
      }

      .hx-page--connect .hx-connect-hero .hx-icon span {
        font-size: 28px;
      }

      .hx-page--connect .hx-connect-hero .hx-title {
        font-size: 25px;
      }

      .hx-page--connect .hx-connect-hero .hx-title span {
        font-size: 13.2px;
      }

      .hx-page--connect .hx-connect-hero .hx-text {
        max-width: 252px;
        font-size: 11.8px;
      }

    }

































    @media (max-width: 430px) {













    }

    @media (max-width: 340px) {




    }

    @media (max-width: 420px) {
      .hx-page--update .hx-section {
        padding-top: 24px;
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
      }

      .hx-update-hero-icon {
        width: 70px;
        height: 70px;
        border-radius: 22px;
        margin-bottom: 10px;
      }

      .hx-update-hero-icon::before {
        width: 40px;
        height: 40px;
      }

      .hx-update-hero-icon span {
        font-size: 32px;
      }

      .hx-page--update .hx-title {
        max-width: 330px;
        font-size: 31px;
      }

      .hx-page--update .hx-title span {
        max-width: 300px;
        font-size: 16px;
      }

      .hx-page--update .hx-text {
        max-width: 330px;
        margin-top: 10px;
        margin-bottom: 13px;
        font-size: 13.2px;
      }

      .hx-update-grid {
        width: min(100%, 330px);
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .hx-grid .hx-card.hx-update-card {
        min-height: 76px;
        display: grid;
        grid-template-columns: 38px 1fr;
        column-gap: 10px;
        align-items: center;
        justify-items: start;
        justify-content: stretch;
        padding: 11px 12px;
        text-align: left;
        border-radius: 18px;
      }

      .hx-update-card-icon {
        width: 34px;
        height: 34px;
        margin: 0;
      }

      .hx-update-card p {
        margin-top: 3px;
      }

      .hx-update-actions {
        width: min(100%, 330px);
        margin-top: 15px;
      }

      .hx-actions--inner .hx-button.hx-update-cta {
        min-height: 50px;
        border-radius: 17px;
        font-size: 14.5px;
      }
    }

    @media (max-width: 360px) {
      .hx-page--update .hx-title {
        font-size: 28px;
      }

      .hx-page--update .hx-title span {
        font-size: 14.5px;
      }

      .hx-page--update .hx-text {
        font-size: 12.8px;
      }

      .hx-update-grid,
      .hx-update-actions {
        width: min(100%, 292px);
      }
    }

    .hx-page--appstore .hx-section {
      padding-top: 28px;
      padding-bottom: calc(34px + env(safe-area-inset-bottom));
    }

    .hx-appstore-icon {
      width: 82px;
      height: 82px;
      margin-bottom: 12px;
      border-radius: 26px;
      background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.38), transparent 32%),
        radial-gradient(circle at 74% 82%, rgba(0,229,255,.12), transparent 44%),
        linear-gradient(145deg, rgba(255,255,255,.24), rgba(87,111,160,.12), rgba(255,78,205,.08));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 0 18px rgba(255,255,255,.07),
        0 10px 22px rgba(0,0,0,.16),
        0 0 22px rgba(181,232,255,.14);
    }

    .hx-appstore-icon::before {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(0,229,255,.055));
      filter: none;
      opacity: .65;
      animation: none;
    }

    .hx-appstore-icon::after {
      display: none;
    }

    .hx-appstore-icon span {
      color: #fff;
      font-size: 40px;
      filter:
        drop-shadow(0 0 12px rgba(255,255,255,.46))
        drop-shadow(0 0 18px rgba(0,229,255,.18));
      animation: none;
    }

    .hx-appstore-kicker {
      width: fit-content;
      margin-bottom: 9px;
      padding: 6px 11px;
      border-radius: 999px;
      color: rgba(236,247,255,.90);
      background: rgba(255,255,255,.065);
      border: 1px solid rgba(255,255,255,.09);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    }

    .hx-page--appstore .hx-title {
      max-width: 420px;
      margin: 0 auto;
      font-size: clamp(31px, 6.1vw, 43px);
      line-height: 1.05;
      text-wrap: balance;
    }

    .hx-page--appstore .hx-title span {
      max-width: 335px;
      margin: 7px auto 0;
      color: rgba(221,249,255,.92);
      font-size: clamp(15px, 3.3vw, 19px);
      line-height: 1.18;
      text-wrap: balance;
    }

    .hx-page--appstore .hx-text {
      max-width: 405px;
      margin: 12px auto 15px;
      color: rgba(246,251,255,.82);
      font-size: clamp(13.5px, 2.6vw, 15px);
      line-height: 1.5;
      text-wrap: balance;
    }

    .hx-appstore-actions {
      width: min(100%, 390px);
      margin-top: 14px;
      gap: 10px;
    }

    @media (max-width: 420px) {
      .hx-page--appstore .hx-section {
        padding-top: 24px;
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
      }

      .hx-appstore-icon {
        width: 70px;
        height: 70px;
        border-radius: 22px;
        margin-bottom: 10px;
      }

      .hx-appstore-icon::before {
        width: 44px;
        height: 44px;
        border-radius: 16px;
      }

      .hx-appstore-icon span {
        font-size: 34px;
      }

      .hx-page--appstore .hx-title {
        max-width: 320px;
        font-size: 31px;
      }

      .hx-page--appstore .hx-title span {
        max-width: 300px;
        font-size: 15.5px;
      }

      .hx-page--appstore .hx-text {
        max-width: 326px;
        margin-top: 10px;
        margin-bottom: 13px;
        font-size: 13.2px;
      }

      .hx-appstore-actions {
        width: min(100%, 330px);
      }

    }

    @media (max-width: 360px) {
      .hx-page--appstore .hx-title {
        font-size: 28px;
      }

      .hx-page--appstore .hx-title span {
        font-size: 14.2px;
      }

      .hx-page--appstore .hx-text {
        font-size: 12.8px;
      }

      .hx-appstore-actions {
        width: min(100%, 292px);
      }
    }

    .hx-button.bonus-link {
      grid-column: 1 / -1;
      min-height: 62px;
      padding: 10px 22px;
      justify-content: center;
      color: #f9fbff;
      border-color: rgba(255, 255, 255, .12);
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 184, 0, .14), transparent 44%),
        radial-gradient(circle at 82% 92%, rgba(255, 78, 205, .10), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.052));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 0 16px rgba(255,255,255,.065),
        0 10px 20px rgba(0,0,0,.18),
        0 0 18px rgba(255,184,0,.07);
    }

    .hx-actions .hx-button.bonus-link {
      width: min(100%, 390px);
    }

    .hx-button.bonus-link::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), transparent 58%),
        radial-gradient(ellipse at 50% 0%, rgba(255, 226, 153, .12), transparent 48%);
      opacity: .46;
    }

    .hx-bonus-copy {
      width: min(100%, 310px);
      flex: 0 1 310px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      min-width: 0;
      text-align: center;
    }

    .hx-bonus-badge {
      width: min(100%, 190px);
      max-width: 100%;
      padding: 3px 7px;
      border-radius: 999px;
      color: #fff3c9;
      background: rgba(255,184,0,.095);
      border: 1px solid rgba(255,184,0,.12);
      font-size: 8.5px;
      line-height: 1;
      font-weight: 900;
      opacity: .9;
      text-align: center;
    }

    .hx-bonus-copy strong {
      max-width: 100%;
      color: #f9fbff;
      font-size: 15.8px;
      line-height: 1.05;
      font-weight: 950;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 0 12px rgba(255,255,255,.12);
    }

    .hx-bonus-copy small {
      max-width: 100%;
      color: rgba(242,248,255,.72);
      font-size: 10px;
      line-height: 1.12;
      font-weight: 780;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hx-page--bonus .hx-bonus-hub {
      padding-top: 34px;
      padding-bottom: calc(34px + env(safe-area-inset-bottom));
    }

    .hx-bonus-badge-main {
      padding: 7px 11px;
      font-size: 9px;
      line-height: 1;
      letter-spacing: .03em;
      text-transform: none;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 0 14px rgba(255,184,0,.09);
    }

    .hx-bonus-title {
      max-width: 470px;
      margin: 14px auto 0;
      font-size: clamp(30px, 6vw, 44px);
      line-height: 1.06;
      text-wrap: balance;
    }

    .hx-bonus-lead {
      max-width: 405px;
      margin: 11px auto 0;
      color: rgba(246,251,255,.78);
      font-size: clamp(13.5px, 2.8vw, 16px);
      line-height: 1.5;
    }

    .hx-bonus-reward {
      position: relative;
      width: min(100%, 380px);
      margin: 16px auto 0;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      overflow: hidden;
      text-align: center;
      border-radius: 22px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,210,104,.13), transparent 34%),
        radial-gradient(circle at 88% 88%, rgba(0,229,255,.09), transparent 42%),
        linear-gradient(145deg, rgba(34,44,80,.62), rgba(22,25,52,.74));
      border: 1px solid rgba(191,234,255,.13);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 0 14px rgba(255,255,255,.032),
        0 9px 22px rgba(0,0,0,.17),
        0 0 16px rgba(255,184,0,.055);
    }

    .hx-bonus-reward::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,.045) 48%, transparent 62%);
      opacity: .20;
      pointer-events: none;
    }

    .hx-bonus-reward-icon {
      position: relative;
      z-index: 1;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 17px;
      font-size: 23px;
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.38), transparent 34%),
        linear-gradient(145deg, rgba(255,197,73,.30), rgba(255,78,205,.14), rgba(0,229,255,.16));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.17),
        0 0 14px rgba(255,184,0,.10);
    }

    .hx-bonus-reward-content {
      position: relative;
      z-index: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .hx-bonus-reward-content strong {
      display: block;
      color: #fff;
      font-size: clamp(28px, 5.3vw, 39px);
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0;
      text-wrap: balance;
      text-shadow:
        0 0 14px rgba(255,255,255,.12),
        0 0 20px rgba(255,184,0,.09);
    }

    .hx-bonus-reward-content span {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      margin: 0 0 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255,184,0,.11);
      border: 1px solid rgba(255,184,0,.12);
      color: #fff4c9;
      font-size: 9.3px;
      line-height: 1.05;
      font-weight: 900;
      text-transform: uppercase;
    }

    .hx-bonus-reward-content small {
      display: block;
      margin-top: 5px;
      color: rgba(255,244,201,.78);
      font-size: 11px;
      line-height: 1.3;
      font-weight: 850;
      max-width: 220px;
    }

    .hx-bonus-timeline {
      position: relative;
      width: min(100%, 530px);
      margin: 17px auto 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .hx-bonus-timeline::before {
      content: "";
      display: none;
    }

    .hx-bonus-step {
      position: relative;
      z-index: 1;
      min-height: 102px;
      padding: 11px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.11), transparent 40%),
        linear-gradient(145deg, rgba(255,255,255,.068), rgba(255,255,255,.032));
      border: 1px solid rgba(255,255,255,.078);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.095),
        0 8px 18px rgba(0,0,0,.10);
    }

    .hx-bonus-step-num {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: #fff;
      font-size: 13.5px;
      line-height: 1;
      font-weight: 950;
      background:
        radial-gradient(circle at 35% 18%, rgba(255,255,255,.22), transparent 38%),
        linear-gradient(145deg, rgba(255,184,0,.24), rgba(255,78,205,.14), rgba(0,229,255,.12));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 0 12px rgba(255,184,0,.075);
    }

    .hx-bonus-step b {
      display: block;
      color: #fff;
      font-size: 12.2px;
      line-height: 1.12;
      font-weight: 920;
    }

    .hx-bonus-step span {
      display: block;
      margin-top: 4px;
      color: rgba(246,251,255,.66);
      font-size: 9.2px;
      line-height: 1.24;
      font-weight: 740;
    }

    .hx-bonus-note {
      width: min(100%, 460px);
      margin: 12px auto 0;
      padding: 8px 11px;
      border-radius: 15px;
      color: rgba(246,251,255,.58);
      font-size: 10.2px;
      line-height: 1.35;
      font-weight: 760;
      background: rgba(255,255,255,.034);
      border: 1px solid rgba(255,255,255,.055);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    }

    .hx-bonus-actions {
      margin-top: 14px;
      gap: 9px;
      justify-items: center;
    }

    .hx-bonus-cta {
      width: min(100%, 370px);
      min-height: 52px;
      color: #f7fbff;
      background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.16), transparent 34%),
        radial-gradient(circle at 86% 100%, rgba(255,184,0,.10), transparent 42%),
        linear-gradient(135deg, rgba(29,56,91,.92), rgba(34,39,83,.92) 58%, rgba(54,40,81,.88));
      border-color: rgba(123,239,255,.20);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -10px 20px rgba(0,0,0,.08),
        0 10px 22px rgba(0,0,0,.15),
        0 0 16px rgba(0,229,255,.07);
    }

    .hx-bonus-cta span {
      color: #f7fbff;
      text-shadow: 0 0 14px rgba(255,255,255,.12);
    }

    .hx-inner-home,
    .hx-bonus-home {
      margin: 0;
      justify-self: center;
      min-height: 34px;
      padding: 7px 11px;
      font-size: 10.5px;
      opacity: .62;
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      .hx-feature-card,
      .hx-card,
      .hx-badge.online,
      .hx-status,
      .hx-flags-track span {
        background-color: rgba(26,32,58,.88);
      }
    }

    @media (max-width: 700px) {
      .hx-bonus-timeline {
        width: min(100%, 430px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 420px) {
      .hx-grid {
        grid-template-columns: 1fr;
        gap: 9px;
      }

      .hx-grid .hx-card {
        min-height: 92px;
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        text-align: left;
        justify-content: stretch;
        justify-items: start;
        padding: 14px;
      }

      .hx-grid .hx-card-icon {
        margin: 0;
      }

      .hx-card b {
        font-size: 13px;
      }

      .hx-card p,
      .hx-card span {
        font-size: 10.5px;
      }

      .hx-actions .hx-button.bonus-link {
        width: min(100%, 370px);
        min-height: 60px;
        padding: 9px 16px;
      }

      .hx-bonus-copy strong {
        font-size: 15px;
      }

      .hx-bonus-copy small {
        font-size: 9.4px;
      }

      .hx-page--bonus .hx-bonus-hub {
        padding-top: 28px;
      }

      .hx-bonus-title {
        max-width: 330px;
        font-size: 28px;
        line-height: 1.08;
      }

      .hx-bonus-lead {
        max-width: 330px;
        margin-top: 10px;
        font-size: 13.4px;
        line-height: 1.46;
      }

      .hx-bonus-reward {
        width: min(100%, 310px);
        gap: 7px;
        margin-top: 14px;
        padding: 12px;
        border-radius: 18px;
      }

      .hx-bonus-reward-icon {
        width: 40px;
        height: 40px;
        border-radius: 15px;
        font-size: 21px;
      }

      .hx-bonus-reward-content strong {
        font-size: 26px;
      }

      .hx-bonus-reward-content span {
        margin-bottom: 5px;
        padding: 3px 8px;
        font-size: 8.8px;
      }

      .hx-bonus-reward-content small {
        margin-top: 4px;
        font-size: 9.4px;
      }

      .hx-bonus-timeline {
        width: min(100%, 340px);
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 15px;
      }

      .hx-bonus-timeline::before {
        display: none;
      }

      .hx-bonus-step {
        min-height: 0;
        display: grid;
        grid-template-columns: 36px 1fr;
        align-items: center;
        justify-items: start;
        gap: 10px;
        padding: 9px 11px;
        text-align: left;
        border-radius: 17px;
      }

      .hx-bonus-step-num {
        width: 31px;
        height: 31px;
        border-radius: 11px;
        font-size: 14px;
      }

      .hx-bonus-step b {
        font-size: 12.4px;
      }

      .hx-bonus-step span {
        font-size: 9.5px;
      }

      .hx-bonus-note {
        width: min(100%, 320px);
        margin-top: 11px;
        padding: 7px 10px;
        font-size: 9.4px;
      }

      .hx-bonus-cta {
        width: min(100%, 320px);
        min-height: 48px;
      }
    }

    @media (max-width: 360px) {
      .hx-bonus-title {
        font-size: 25px;
      }

      .hx-bonus-lead {
        font-size: 12.8px;
      }

      .hx-bonus-reward {
        width: min(100%, 282px);
        padding: 11px 10px;
        gap: 6px;
      }

      .hx-bonus-reward-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        font-size: 20px;
      }

      .hx-bonus-reward-content strong {
        font-size: 24px;
      }

      .hx-bonus-reward-content span {
        font-size: 7.8px;
      }

      .hx-bonus-reward-content small {
        font-size: 8.8px;
      }
    }

/* === Bonus page refresh — 20260723-056 === */
.hx-page--bonus .hx-bonus-hub {
  padding-top: clamp(24px, 5vw, 38px);
  padding-bottom: calc(clamp(28px, 5vw, 40px) + env(safe-area-inset-bottom));
}

.hx-page--bonus .hx-bonus-intro {
  width: min(100%, 600px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(210px, .75fr);
  align-items: stretch;
  gap: 16px;
}

.hx-page--bonus .hx-bonus-intro-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.hx-page--bonus .hx-bonus-badge-main {
  margin: 0;
  padding: 7px 12px;
  background: rgba(255,190,66,.09);
  border-color: rgba(255,211,126,.14);
}

.hx-page--bonus .hx-bonus-badge-main .hx-dot {
  animation-duration: 3.2s;
}

.hx-page--bonus .hx-bonus-reveal {
  opacity: 0;
  transform:
    translate3d(
      var(--hx-bonus-reveal-x, 0),
      var(--hx-bonus-reveal-y, 18px),
      0
    )
    scale(var(--hx-bonus-reveal-scale, .985));
  transition:
    opacity .74s cubic-bezier(.2, .75, .25, 1),
    transform .88s cubic-bezier(.16, 1.08, .3, 1);
  transition-delay: var(--hx-bonus-reveal-delay, 0ms);
}

.hx-page--bonus .hx-bonus-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hx-page--bonus .hx-bonus-title.hx-bonus-reveal {
  transform-origin: 50% 70%;
}

.hx-page--bonus .hx-bonus-title.hx-bonus-reveal > span,
.hx-page--bonus .hx-bonus-lead.hx-bonus-reveal > span {
  opacity: 0;
  transition:
    opacity .68s ease,
    transform .78s cubic-bezier(.16, 1.06, .3, 1);
}

.hx-page--bonus .hx-bonus-title.hx-bonus-reveal > span {
  display: block;
}

.hx-page--bonus .hx-bonus-title.hx-bonus-reveal > span:first-child,
.hx-page--bonus .hx-bonus-lead.hx-bonus-reveal > span:first-child {
  transform: translate3d(0, 6px, 0);
}

.hx-page--bonus .hx-bonus-title.hx-bonus-reveal > span:last-child,
.hx-page--bonus .hx-bonus-lead.hx-bonus-reveal > span:last-child {
  transform: translate3d(0, 6px, 0);
}

.hx-page--bonus .hx-bonus-title.hx-bonus-reveal.is-visible > span,
.hx-page--bonus .hx-bonus-lead.hx-bonus-reveal.is-visible > span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hx-page--bonus .hx-bonus-title.is-visible > span:first-child,
.hx-page--bonus .hx-bonus-lead.is-visible > span:first-child { transition-delay: .22s; }

.hx-page--bonus .hx-bonus-title.is-visible > span:last-child,
.hx-page--bonus .hx-bonus-lead.is-visible > span:last-child { transition-delay: .40s; }

.hx-page--bonus .hx-bonus-reward.hx-bonus-reveal .hx-bonus-reward-icon,
.hx-page--bonus .hx-bonus-reward.hx-bonus-reveal .hx-bonus-reward-content {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.96);
  transition:
    opacity .68s ease,
    transform .76s cubic-bezier(.16, 1.06, .3, 1);
}

.hx-page--bonus .hx-bonus-reward.hx-bonus-reveal.is-visible .hx-bonus-reward-icon,
.hx-page--bonus .hx-bonus-reward.hx-bonus-reveal.is-visible .hx-bonus-reward-content {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hx-page--bonus .hx-bonus-reward.is-visible .hx-bonus-reward-icon { transition-delay: .24s; }
.hx-page--bonus .hx-bonus-reward.is-visible .hx-bonus-reward-content { transition-delay: .44s; }

.hx-page--bonus .hx-bonus-reward-icon::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255,214,125,.66);
  border-radius: 21px;
  opacity: 0;
  transform: scale(.66);
  pointer-events: none;
}

.hx-page--bonus .hx-bonus-reward.is-visible .hx-bonus-reward-icon::after {
  animation: hx-bonus-reward-ring .78s cubic-bezier(.18, .76, .24, 1) .34s both;
}

.hx-page--bonus .hx-bonus-reward.hx-bonus-reveal::before {
  opacity: 0;
  transform: translate3d(-115%, 0, 0) skewX(-14deg);
  transition:
    opacity .18s ease,
    transform .92s cubic-bezier(.22, .72, .25, 1);
}

.hx-page--bonus .hx-bonus-reward.hx-bonus-reveal.is-visible::before {
  opacity: .32;
  transform: translate3d(115%, 0, 0) skewX(-14deg);
  transition-delay: .28s;
}

.hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-route-head > * {
  opacity: 0;
  transform: translate3d(0, 7px, 0);
  transition:
    opacity .64s ease,
    transform .72s cubic-bezier(.2, .72, .25, 1);
}

.hx-page--bonus .hx-bonus-route.hx-bonus-reveal.is-visible .hx-bonus-route-head > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hx-page--bonus .hx-bonus-route.is-visible .hx-bonus-route-head > :first-child { transition-delay: .18s; }
.hx-page--bonus .hx-bonus-route.is-visible .hx-bonus-route-head > :last-child { transition-delay: .36s; }

.hx-page--bonus .hx-bonus-timeline::before {
  content: none;
  display: none;
}

.hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-step,
.hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-note {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity .68s ease,
    transform .76s cubic-bezier(.2, .72, .25, 1);
}

.hx-page--bonus .hx-bonus-route.hx-bonus-reveal.is-visible .hx-bonus-step,
.hx-page--bonus .hx-bonus-route.hx-bonus-reveal.is-visible .hx-bonus-note {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hx-page--bonus .hx-bonus-route .hx-bonus-step:nth-child(1) { --hx-bonus-step-delay: .20s; --hx-bonus-step-glow-delay: .30s; --hx-bonus-step-accent: 105, 222, 255; }
.hx-page--bonus .hx-bonus-route .hx-bonus-step:nth-child(2) { --hx-bonus-step-delay: .40s; --hx-bonus-step-glow-delay: 1.00s; --hx-bonus-step-accent: 112, 167, 255; }
.hx-page--bonus .hx-bonus-route .hx-bonus-step:nth-child(3) { --hx-bonus-step-delay: .60s; --hx-bonus-step-glow-delay: 1.70s; --hx-bonus-step-accent: 178, 126, 255; }
.hx-page--bonus .hx-bonus-route .hx-bonus-step:nth-child(4) { --hx-bonus-step-delay: .80s; --hx-bonus-step-glow-delay: 2.40s; --hx-bonus-step-accent: 255, 211, 121; }

.hx-page--bonus .hx-bonus-step {
  position: relative;
  z-index: 1;
}

.hx-page--bonus .hx-bonus-step-num {
  position: relative;
  isolation: isolate;
}

.hx-page--bonus .hx-bonus-step-num::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4px;
  border: 1px solid rgba(var(--hx-bonus-step-accent), .62);
  border-radius: 13px;
  opacity: 0;
  transform: scale(.70);
  background: radial-gradient(circle, rgba(var(--hx-bonus-step-accent), .24), transparent 72%);
  box-shadow:
    0 0 14px rgba(var(--hx-bonus-step-accent), .30),
    inset 0 0 8px rgba(var(--hx-bonus-step-accent), .18);
  pointer-events: none;
}

.hx-page--bonus .hx-bonus-route.is-visible .hx-bonus-step-num::after {
  animation: hx-bonus-step-glow 1.30s cubic-bezier(.16, .82, .24, 1) var(--hx-bonus-step-glow-delay) both;
}

.hx-page--bonus .hx-bonus-route.is-visible .hx-bonus-step {
  transition-delay: var(--hx-bonus-step-delay);
}

.hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-step-num,
.hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-step > div:last-child {
  opacity: 0;
  transition:
    opacity .58s ease,
    transform .70s cubic-bezier(.16, 1.08, .3, 1);
}

.hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-step-num {
  transform: translate3d(-4px, 0, 0) scale(.76) rotate(-7deg);
}

.hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-step > div:last-child {
  transform: translate3d(-7px, 0, 0);
}

.hx-page--bonus .hx-bonus-route.hx-bonus-reveal.is-visible .hx-bonus-step-num,
.hx-page--bonus .hx-bonus-route.hx-bonus-reveal.is-visible .hx-bonus-step > div:last-child {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0);
}

.hx-page--bonus .hx-bonus-route.is-visible .hx-bonus-step-num {
  transition-delay: calc(var(--hx-bonus-step-delay) + .10s);
}

.hx-page--bonus .hx-bonus-route.is-visible .hx-bonus-step > div:last-child {
  transition-delay: calc(var(--hx-bonus-step-delay) + .18s);
}

.hx-page--bonus .hx-bonus-route.is-visible .hx-bonus-note { transition-delay: 1s; }

.hx-page--bonus .hx-bonus-actions.hx-bonus-reveal > * {
  opacity: 0;
  transition: opacity .68s ease;
}

.hx-page--bonus .hx-bonus-actions.hx-bonus-reveal.is-visible > * {
  opacity: 1;
}

.hx-page--bonus .hx-bonus-actions.is-visible > :nth-child(1) { transition-delay: .18s; }
.hx-page--bonus .hx-bonus-actions.is-visible > :nth-child(2) { transition-delay: .36s; }
.hx-page--bonus .hx-bonus-actions.is-visible > :nth-child(3) { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  .hx-page--bonus .hx-bonus-reveal,
  .hx-page--bonus .hx-bonus-title.hx-bonus-reveal > span,
  .hx-page--bonus .hx-bonus-lead.hx-bonus-reveal > span,
  .hx-page--bonus .hx-bonus-reward.hx-bonus-reveal .hx-bonus-reward-icon,
  .hx-page--bonus .hx-bonus-reward.hx-bonus-reveal .hx-bonus-reward-content,
  .hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-route-head > *,
  .hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-step,
  .hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-step-num,
  .hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-step > div:last-child,
  .hx-page--bonus .hx-bonus-route.hx-bonus-reveal .hx-bonus-note,
  .hx-page--bonus .hx-bonus-actions.hx-bonus-reveal > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hx-page--bonus .hx-bonus-reward.hx-bonus-reveal::before {
    opacity: .20;
    transform: none;
    transition: none;
  }

  .hx-page--bonus .hx-bonus-reward.is-visible .hx-bonus-reward-icon::after {
    animation: none;
  }

  .hx-page--bonus .hx-bonus-route.is-visible .hx-bonus-step-num::after {
    animation: none;
    opacity: .28;
    transform: none;
  }
}

@keyframes hx-bonus-reward-ring {
  0% { opacity: 0; transform: scale(.66); }
  32% { opacity: .92; }
  100% { opacity: 0; transform: scale(1.36); }
}

@keyframes hx-bonus-step-glow {
  0% { opacity: 0; transform: scale(.70); }
  46% { opacity: 1; transform: scale(1.13); }
  100% { opacity: .38; transform: scale(1); }
}

.hx-page--bonus .hx-bonus-title {
  max-width: 360px;
  margin: 13px 0 0;
  font-size: clamp(31px, 5vw, 44px);
  line-height: 1.02;
  text-align: left;
}

.hx-page--bonus .hx-bonus-lead {
  box-sizing: border-box;
  max-width: 390px;
  margin: 12px 0 0;
  padding: 12px 14px;
  display: grid;
  gap: 7px;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  border: 1px solid rgba(255,221,153,.11);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(255,198,78,.08), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(99,139,190,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.hx-page--bonus .hx-bonus-lead-question {
  display: block;
  color: rgba(248,252,255,.96);
  font-size: clamp(13px, 2.1vw, 14.5px);
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: -.012em;
}

.hx-page--bonus .hx-bonus-lead-detail {
  display: block;
  color: rgba(196,205,222,.78);
  font-size: clamp(11px, 1.9vw, 12.5px);
  line-height: 1.48;
  font-weight: 520;
}

.hx-page--bonus .hx-bonus-lead-detail strong {
  font-weight: 850;
}

.hx-page--bonus .hx-bonus-lead-telegram {
  color: rgba(143,224,255,.96);
}

.hx-page--bonus .hx-bonus-lead-days {
  color: rgba(255,224,157,.98);
}

.hx-page--bonus .hx-bonus-reward {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 18px 16px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 12px;
  text-align: left;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,211,108,.16), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(83,204,255,.10), transparent 42%),
    linear-gradient(145deg, rgba(41,45,76,.72), rgba(18,25,52,.76));
  border-color: rgba(255,221,153,.15);
}

.hx-page--bonus .hx-bonus-reward-icon {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  font-size: 23px;
}

.hx-page--bonus .hx-bonus-reward-content {
  align-items: flex-start;
  text-align: left;
}

.hx-page--bonus .hx-bonus-reward-content span {
  margin-bottom: 7px;
  padding: 4px 8px;
  font-size: 8px;
  white-space: nowrap;
}

.hx-page--bonus .hx-bonus-reward-content strong {
  font-size: clamp(28px, 4.5vw, 36px);
  white-space: nowrap;
}

.hx-page--bonus .hx-bonus-reward-content small {
  max-width: 150px;
  margin-top: 5px;
  font-size: 9.5px;
  line-height: 1.25;
}

.hx-page--bonus .hx-bonus-route {
  box-sizing: border-box;
  width: min(100%, 600px);
  margin: 17px auto 0;
  padding: 14px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(76,211,255,.08), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.062), rgba(255,255,255,.028));
  border: 1px solid rgba(196,225,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.12);
}

.hx-page--bonus .hx-bonus-route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 3px 11px;
  text-align: left;
}

.hx-page--bonus .hx-bonus-route-head strong {
  color: rgba(249,252,255,.98);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}

.hx-page--bonus .hx-bonus-route-head span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: rgba(218,239,255,.76);
  background: rgba(112,185,255,.08);
  border: 1px solid rgba(145,207,255,.10);
  font-size: 8.5px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hx-page--bonus .hx-bonus-timeline {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  list-style: none;
  border-radius: 18px;
  background: rgba(7,18,43,.28);
  border: 1px solid rgba(194,224,255,.08);
}

.hx-page--bonus .hx-bonus-step {
  min-height: 112px;
  padding: 13px 10px;
  gap: 9px;
  border: 0;
  border-right: 1px solid rgba(191,220,255,.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hx-page--bonus .hx-bonus-step:last-child {
  border-right: 0;
}

.hx-page--bonus .hx-bonus-step-num {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 12px;
  background: linear-gradient(145deg, rgba(104,210,255,.24), rgba(160,91,255,.19));
  border-color: rgba(174,222,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}

.hx-page--bonus .hx-bonus-step b {
  font-size: 11.5px;
  line-height: 1.18;
}

.hx-page--bonus .hx-bonus-step span {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.3;
}

.hx-page--bonus .hx-bonus-note {
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0 0;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
  border-radius: 14px;
  font-size: 9.6px;
  line-height: 1.35;
}

.hx-page--bonus .hx-bonus-note > span:first-child {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: rgba(164,246,221,.96);
  background: rgba(50,190,151,.10);
  border: 1px solid rgba(101,224,186,.13);
  font-size: 12px;
  font-weight: 900;
}

.hx-page--bonus .hx-bonus-actions {
  margin-top: 14px;
}

.hx-page--bonus .hx-bonus-share-cta {
  width: min(100%, 430px);
  min-height: 64px;
  padding: 10px 56px;
  justify-content: center;
  gap: 0;
  text-align: center;
  color: rgba(238,249,255,.98);
  cursor: pointer;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,190,83,.18), transparent 33%),
    radial-gradient(circle at 88% 110%, rgba(79,202,255,.16), transparent 42%),
    linear-gradient(135deg, rgba(45,51,80,.84), rgba(25,54,80,.78) 54%, rgba(43,40,84,.78));
  border-color: rgba(255,211,130,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(91,202,255,.08),
    0 10px 24px rgba(0,0,0,.16);
}

.hx-page--bonus .hx-bonus-share-cta::after {
  content: "";
  position: absolute;
  right: -38px;
  top: -72px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid rgba(112,218,255,.12);
  box-shadow: inset 0 0 28px rgba(130,94,255,.07);
  pointer-events: none;
}

.hx-page--bonus .hx-bonus-share-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: rgba(255,245,215,.96);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,230,157,.24), transparent 42%),
    linear-gradient(145deg, rgba(211,151,49,.25), rgba(70,161,196,.20) 58%, rgba(112,74,174,.20));
  border: 1px solid rgba(255,216,143,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 5px 14px rgba(0,0,0,.16);
  font-size: 0;
  line-height: 1;
  font-weight: 500;
}

.hx-page--bonus .hx-bonus-share-icon::before {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 2px;
  font-size: 28px;
  line-height: 1;
}

.hx-page--bonus .hx-bonus-share-cta.is-copied .hx-bonus-share-icon {
  font-size: 0;
  transform: translateY(-50%) scale(1.04);
}

.hx-page--bonus .hx-bonus-share-cta.is-copied .hx-bonus-share-icon::before {
  content: "✓";
  padding-bottom: 1px;
  font-size: 23px;
  font-weight: 900;
  animation: hx-bonus-copy-check .42s cubic-bezier(.16, 1.12, .3, 1) both;
}

.hx-page--bonus .hx-bonus-copy-burst {
  position: absolute;
  z-index: 2;
  left: 35px;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hx-page--bonus .hx-bonus-copy-burst i {
  --hx-bonus-burst-x: 0px;
  --hx-bonus-burst-y: 0px;
  --hx-bonus-burst-r: 120deg;
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  opacity: 0;
  background: rgba(255,226,151,.96);
}

.hx-page--bonus .hx-bonus-copy-burst i:nth-child(1) { --hx-bonus-burst-x: -24px; --hx-bonus-burst-y: -20px; --hx-bonus-burst-r: -110deg; }
.hx-page--bonus .hx-bonus-copy-burst i:nth-child(2) { --hx-bonus-burst-x: 0px; --hx-bonus-burst-y: -27px; --hx-bonus-burst-r: 140deg; background: rgba(125,231,255,.96); }
.hx-page--bonus .hx-bonus-copy-burst i:nth-child(3) { --hx-bonus-burst-x: 24px; --hx-bonus-burst-y: -18px; --hx-bonus-burst-r: 190deg; background: rgba(203,151,255,.96); }
.hx-page--bonus .hx-bonus-copy-burst i:nth-child(4) { --hx-bonus-burst-x: -28px; --hx-bonus-burst-y: 13px; --hx-bonus-burst-r: 150deg; background: rgba(126,241,205,.96); }
.hx-page--bonus .hx-bonus-copy-burst i:nth-child(5) { --hx-bonus-burst-x: 5px; --hx-bonus-burst-y: 24px; --hx-bonus-burst-r: -160deg; }
.hx-page--bonus .hx-bonus-copy-burst i:nth-child(6) { --hx-bonus-burst-x: 29px; --hx-bonus-burst-y: 12px; --hx-bonus-burst-r: 130deg; background: rgba(125,231,255,.96); }

.hx-page--bonus .hx-bonus-share-cta.is-copied .hx-bonus-copy-burst i {
  animation: hx-bonus-copy-burst .68s cubic-bezier(.18, .74, .25, 1) both;
}

@keyframes hx-bonus-copy-check {
  0% { opacity: 0; transform: scale(.55) rotate(-18deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes hx-bonus-copy-burst {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.35) rotate(0); }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--hx-bonus-burst-x), var(--hx-bonus-burst-y), 0) scale(.92) rotate(var(--hx-bonus-burst-r));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--bonus .hx-bonus-share-cta.is-copied .hx-bonus-share-icon::before,
  .hx-page--bonus .hx-bonus-share-cta.is-copied .hx-bonus-copy-burst i {
    animation: none;
  }
}

.hx-page--bonus .hx-bonus-share-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  color: inherit;
  text-shadow: none;
}

.hx-page--bonus .hx-bonus-share-copy strong {
  font-size: 15.5px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -.015em;
}

.hx-page--bonus .hx-bonus-share-copy small {
  color: rgba(198,220,235,.72);
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: .035em;
}

.hx-page--bonus .hx-bonus-share-cta:focus-visible {
  outline: 2px solid rgba(116,222,255,.94);
  outline-offset: 3px;
}

.hx-page--bonus .hx-bonus-share-cta.is-copied {
  color: rgba(235,255,248,.98);
  background: linear-gradient(135deg, rgba(31,137,107,.68), rgba(37,100,132,.66));
  border-color: rgba(113,236,196,.32);
}

.hx-page--bonus .hx-bonus-share-cta.is-copied .hx-bonus-share-icon {
  color: rgba(220,255,242,.98);
  background: rgba(65,190,145,.20);
  border-color: rgba(126,238,198,.28);
}

.hx-page--bonus .hx-bonus-share-cta.is-error {
  color: rgba(255,236,232,.98);
  background: rgba(136,57,72,.50);
  border-color: rgba(255,157,157,.24);
}

.hx-page--bonus .hx-bonus-cta {
  width: min(100%, 430px);
  min-height: 54px;
  gap: 11px;
  color: rgba(247,252,255,.98);
  background:
    radial-gradient(circle at 16% 0%, rgba(95,224,255,.18), transparent 38%),
    radial-gradient(circle at 90% 100%, rgba(176,86,255,.12), transparent 44%),
    linear-gradient(135deg, rgba(22,62,100,.96), rgba(37,43,91,.95) 58%, rgba(61,36,87,.92));
  border-color: rgba(122,224,255,.24);
}

.hx-page--bonus .hx-bonus-cta > span:not(.hx-update-social-icon) {
  color: rgba(247,252,255,.98);
}

@media (max-width: 700px) {
  .hx-page--bonus .hx-bonus-intro,
  .hx-page--bonus .hx-bonus-route {
    width: min(100%, 430px);
  }

  .hx-page--bonus .hx-bonus-intro {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .hx-page--bonus .hx-bonus-intro-copy {
    align-items: center;
    text-align: center;
  }

  .hx-page--bonus .hx-bonus-title,
  .hx-page--bonus .hx-bonus-lead {
    margin-inline: auto;
  }

  .hx-page--bonus .hx-bonus-title {
    text-align: center;
  }

  .hx-page--bonus .hx-bonus-lead {
    text-align: left;
  }

  .hx-page--bonus .hx-bonus-title {
    max-width: 400px;
    font-size: clamp(29px, 8vw, 36px);
    line-height: 1.04;
  }

  .hx-page--bonus .hx-bonus-lead {
    max-width: 395px;
  }

  .hx-page--bonus .hx-bonus-reward {
    grid-template-columns: 52px minmax(0, 1fr);
    width: 100%;
    padding: 14px 17px;
    gap: 15px;
  }

  .hx-page--bonus .hx-bonus-reward-content {
    width: 100%;
  }

  .hx-page--bonus .hx-bonus-reward-content strong {
    font-size: clamp(29px, 7.3vw, 33px);
  }

  .hx-page--bonus .hx-bonus-reward-content small {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(9px, 2.2vw, 10.2px);
  }

  .hx-page--bonus .hx-bonus-timeline {
    grid-template-columns: 1fr;
  }

  .hx-page--bonus .hx-bonus-step {
    min-height: 0;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 10px;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid rgba(191,220,255,.08);
  }

  .hx-page--bonus .hx-bonus-step:last-child {
    border-bottom: 0;
  }

  .hx-page--bonus .hx-bonus-step b {
    font-size: 12.5px;
  }

  .hx-page--bonus .hx-bonus-step span {
    font-size: 9.5px;
  }
}

@media (min-width: 701px) {
  .hx-page--bonus .hx-bonus-actions.hx-bonus-reveal.is-visible .hx-bonus-cta,
  .hx-page--bonus .hx-bonus-cta {
    transition:
      transform .28s cubic-bezier(.2, .8, .2, 1),
      box-shadow .28s ease,
      border-color .28s ease,
      background .28s ease;
  }

  .hx-page--bonus .hx-bonus-cta:hover {
    transform: translateY(-3px);
    border-color: rgba(135, 235, 255, .52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 14px 30px rgba(4,12,35,.24),
      0 0 24px rgba(67, 198, 255, .18);
  }

  .hx-page--bonus .hx-bonus-cta:active {
    transform: translateY(-1px) scale(.99);
  }
}


/* === Hide redundant bonus badge — 20260806-259 === */
.hx-page--bonus .hx-bonus-intro-copy > .hx-badge.gold {
  display: none;
}

/* === Bonus heading width — 20260806-261 === */
@media (min-width: 701px) {
  .hx-page--bonus .hx-bonus-title {
    max-width: 760px;
  }
}

@media (max-width: 420px) {
  .hx-page--bonus .hx-bonus-hub {
    padding-top: 24px;
  }

  .hx-page--bonus .hx-bonus-intro,
  .hx-page--bonus .hx-bonus-route {
    width: min(100%, 340px);
  }

  .hx-page--bonus .hx-bonus-title {
    max-width: 330px;
    font-size: 29px;
  }

  .hx-page--bonus .hx-bonus-lead {
    max-width: 330px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  .hx-page--bonus .hx-bonus-reward {
    grid-template-columns: 45px minmax(0, 1fr);
    padding: 11px 13px;
    border-radius: 20px;
  }

  .hx-page--bonus .hx-bonus-reward-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 20px;
  }

  .hx-page--bonus .hx-bonus-reward-content strong {
    font-size: 27px;
  }

  .hx-page--bonus .hx-bonus-reward-content small {
    font-size: 9px;
  }

  .hx-page--bonus .hx-bonus-route {
    margin-top: 13px;
    padding: 10px;
    border-radius: 20px;
  }

  .hx-page--bonus .hx-bonus-route-head {
    padding-bottom: 9px;
  }

  .hx-page--bonus .hx-bonus-route-head strong {
    font-size: 13.5px;
  }

  .hx-page--bonus .hx-bonus-route-head span {
    font-size: 7.5px;
  }

  .hx-page--bonus .hx-bonus-actions,
  .hx-page--bonus .hx-bonus-cta,
  .hx-page--bonus .hx-bonus-share-cta {
    width: min(100%, 340px);
  }

  .hx-page--bonus .hx-bonus-share-cta {
    min-height: 60px;
    padding: 9px 52px;
    gap: 0;
  }

  .hx-page--bonus .hx-bonus-share-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 13px;
  }

  .hx-page--bonus .hx-bonus-copy-burst {
    left: 33px;
  }

  .hx-page--bonus .hx-bonus-share-copy strong {
    font-size: 14.5px;
  }

  .hx-page--bonus .hx-bonus-share-copy small {
    font-size: 8.8px;
  }
}

@media (max-width: 360px) {
  .hx-page--bonus .hx-bonus-reward-content small {
    white-space: normal;
  }
}

/* === Bonus card inside purchase panel — 20260727-132 === */
.hx-page--home .hx-home-connect .hx-purchase-card > .hx-purchase-bonus {
  width: calc(100% + clamp(36px, 7vw, 52px));
  margin:
    calc(clamp(18px, 3.5vw, 26px) - 4px)
    calc(0px - clamp(18px, 3.5vw, 26px))
    0;
}

@media (max-width: 430px) {
  .hx-page--home .hx-home-connect .hx-purchase-card > .hx-purchase-bonus {
    width: calc(100% + 28px);
    margin: 12px -14px 0;
  }
}












.hx-connect-title {
  margin: 0;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-align: left;
}

.hx-connect-title span {
  display: block;
  margin-top: 14px;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: rgba(215, 246, 255, 0.92);
  text-shadow: 0 0 28px rgba(116, 223, 255, 0.22);
}










.hx-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}

.hx-contact-button {
  min-height: 74px;
  border-radius: 24px;
  justify-content: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease;
}

.hx-contact-button.telegram {
  background:
    radial-gradient(circle at 20% 10%, rgba(118, 235, 255, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(39, 104, 156, 0.48), rgba(40, 45, 102, 0.42));
  border-color: rgba(87, 220, 255, 0.32);
  box-shadow: 0 14px 36px rgba(43, 185, 255, 0.16);
}

.hx-contact-button.vk {
  background:
    radial-gradient(circle at 20% 10%, rgba(139, 157, 255, 0.24), transparent 38%),
    linear-gradient(135deg, rgba(79, 88, 184, 0.5), rgba(112, 57, 149, 0.42));
  border-color: rgba(140, 121, 255, 0.34);
  box-shadow: 0 14px 36px rgba(125, 82, 255, 0.15);
}

.hx-contact-button:hover {
  transform: translateY(-3px);
}

.hx-contact-button:active {
  transform: translateY(-1px) scale(0.99);
}

.hx-contact-button:focus-visible,
.hx-inner-home:focus-visible {
  outline: 2px solid rgba(143, 230, 255, 0.75);
  outline-offset: 4px;
}

.hx-contact-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  font-size: 20px;
}

.hx-contact-icon--vk {
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.hx-inner-home {
  display: inline-flex;
  width: fit-content;
  margin: 18px auto 0;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(238, 244, 255, 0.62);
  font-weight: 800;
}

@media (max-width: 860px) {




  .hx-connect-title {
    text-align: center;
    margin-inline: auto;
  }

}

@media (max-width: 520px) {




  .hx-connect-title {
    font-size: clamp(38px, 12vw, 52px);
  }

  .hx-connect-title span {
    font-size: clamp(20px, 6vw, 27px);
  }





  .hx-contact-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hx-contact-button {
    min-height: 62px;
    border-radius: 20px;
    font-size: 19px;
    gap: 8px;
  }

  .hx-contact-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 17px;
  }

}

@media (max-width: 340px) {
  .hx-contact-actions {
    grid-template-columns: 1fr;
  }

  .hx-connect-title {
    font-size: 36px;
  }
}

/* === Home access price — 20260727-128 === */
.hx-page--home .hx-home-connect .hx-price-section {
  padding: clamp(12px, 2.4vw, 20px) clamp(14px, 3vw, 24px) clamp(20px, 3.2vw, 28px);
}

.hx-page--home .hx-home-connect .hx-price-card {
  position: relative;
  width: min(100%, 520px);
  min-height: 112px;
  margin: 0 auto;
  padding: clamp(18px, 3.4vw, 26px) clamp(18px, 4vw, 30px);
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  text-align: left;
  border: 1px solid rgba(138, 226, 255, .24);
  border-radius: clamp(24px, 4vw, 30px);
  background:
    radial-gradient(circle at 10% 0%, rgba(41, 220, 255, .17), transparent 45%),
    radial-gradient(circle at 94% 100%, rgba(188, 103, 255, .17), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(72,115,209,.11) 48%, rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 28px rgba(96, 142, 255, .055),
    0 16px 34px rgba(0,0,0,.23),
    0 0 28px rgba(39, 205, 255, .08);
}

.hx-page--home .hx-home-connect .hx-price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  width: 68%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(113, 239, 255, .78), rgba(205, 160, 255, .66), transparent);
  box-shadow: 0 0 12px rgba(80, 221, 255, .32);
}

.hx-page--home .hx-home-connect .hx-price-copy {
  min-width: 0;
}

.hx-page--home .hx-home-connect .hx-price-kicker {
  display: block;
  color: rgba(190, 235, 255, .76);
  font-size: clamp(10px, 2vw, 12px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hx-page--home .hx-home-connect .hx-price-copy h2 {
  margin: 7px 0 0;
  color: #f7fbff;
  font-size: clamp(21px, 4.8vw, 28px);
  line-height: 1.04;
  font-weight: 950;
  letter-spacing: -.025em;
  text-shadow: 0 0 18px rgba(102, 221, 255, .22);
}

.hx-page--home .hx-home-connect .hx-price-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  color: #ffffff;
  white-space: nowrap;
  text-shadow:
    0 0 18px rgba(87, 225, 255, .32),
    0 0 28px rgba(165, 104, 255, .16);
}

.hx-page--home .hx-home-connect .hx-price-value strong {
  font-size: clamp(42px, 8vw, 58px);
  line-height: .9;
  font-weight: 950;
  letter-spacing: -.055em;
}

.hx-page--home .hx-home-connect .hx-price-value span {
  color: #a9efff;
  font-size: clamp(22px, 4.5vw, 30px);
  line-height: 1;
  font-weight: 900;
}

@media (max-width: 360px) {
  .hx-page--home .hx-home-connect .hx-price-card {
    min-height: 100px;
    padding-inline: 16px;
    gap: 10px;
  }

  .hx-page--home .hx-home-connect .hx-price-kicker {
    font-size: 9px;
    letter-spacing: .09em;
  }

  .hx-page--home .hx-home-connect .hx-price-copy h2 {
    font-size: 19px;
  }

  .hx-page--home .hx-home-connect .hx-price-value {
    gap: 4px;
  }

  .hx-page--home .hx-home-connect .hx-price-value strong {
    font-size: 38px;
  }

  .hx-page--home .hx-home-connect .hx-price-value span {
    font-size: 20px;
  }
}

/* === Home speed feature — 20260726-123 === */
.hx-page--home .hx-home-connect .hx-feature-card.speed {
  border-color: rgba(255, 204, 84, .62);
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 221, 122, .28), transparent 43%),
    radial-gradient(circle at 8% 94%, rgba(255, 126, 34, .15), transparent 47%),
    linear-gradient(150deg, rgba(255,255,255,.18), rgba(255,184,0,.075) 46%, rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 26px rgba(255,184,0,.075),
    0 15px 30px rgba(0,0,0,.24),
    0 0 28px rgba(255,184,0,.18);
}

.hx-page--home .hx-home-connect .hx-feature-card.speed::before {
  height: 58%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 72%),
    radial-gradient(circle at 50% 0%, rgba(255,239,184,.19), transparent 66%);
  opacity: .92;
}

.hx-page--home .hx-home-connect .hx-feature-card.speed::after {
  content: "";
  position: absolute;
  inset: -28% -72%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-28%, 0, 0) rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent 44%,
    rgba(255,255,255,.20) 49%,
    rgba(255,226,146,.34) 50%,
    rgba(255,255,255,.12) 52%,
    transparent 57%
  );
  animation: hxSpeedCardSweep 5.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-feature-visual {
  filter: drop-shadow(0 0 10px rgba(255, 201, 68, .26));
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-speed-meter {
  width: clamp(64px, 16vw, 74px);
  height: 42px;
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-speed-meter::before {
  left: 1px;
  right: 1px;
  height: 35px;
  background:
    conic-gradient(
      from 220deg,
      rgba(255,139,32,.20) 0deg,
      #ffb800 40deg,
      #ffe47a 67deg,
      #54eeff 100deg,
      #25ff9c 132deg,
      transparent 134deg
    );
  filter:
    drop-shadow(0 0 8px rgba(255,184,0,.42))
    drop-shadow(0 0 13px rgba(73,235,255,.20));
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-speed-meter::after {
  left: 9px;
  right: 9px;
  height: 25px;
  border: 1px solid rgba(255,239,190,.08);
  background:
    radial-gradient(circle at 50% 100%, rgba(255,184,0,.10), transparent 55%),
    rgba(7, 15, 29, .91);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.48);
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-speed-needle {
  bottom: 5px;
  height: 29px;
  background: linear-gradient(to top, #fff8da, #fff, #42ffd1);
  box-shadow:
    0 0 8px rgba(255,255,255,.70),
    0 0 14px rgba(37,255,156,.58),
    0 0 20px rgba(255,184,0,.38);
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-speed-core {
  width: 13px;
  height: 13px;
  background: #fffdf4;
  box-shadow:
    0 0 0 4px rgba(255,211,89,.10),
    0 0 13px rgba(255,255,255,.82),
    0 0 22px rgba(255,184,0,.38);
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-speed-max {
  color: #fff6cf;
  border-color: rgba(255,220,116,.26);
  background: linear-gradient(135deg, rgba(255,184,0,.24), rgba(37,255,156,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 14px rgba(255,184,0,.18);
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-feature-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: #fff;
  font-size: clamp(23px, 6.2vw, 29px);
  letter-spacing: -.045em;
  text-shadow:
    0 0 10px rgba(255,255,255,.28),
    0 0 22px rgba(255,184,0,.24),
    0 6px 16px rgba(0,0,0,.24);
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-feature-main small {
  margin-right: 4px;
  color: #ffe89c;
  font-size: clamp(8px, 2.2vw, 10px);
  font-weight: 950;
  letter-spacing: .02em;
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-feature-label {
  color: rgba(255,250,232,.98);
  text-shadow: 0 2px 12px rgba(0,0,0,.24);
}

.hx-page--home .hx-home-connect .hx-feature-card.speed .hx-feature-pill {
  color: #fff6d2;
  border-color: rgba(255,218,112,.24);
  background:
    linear-gradient(180deg, rgba(255,221,124,.18), rgba(255,154,44,.11));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 0 14px rgba(255,184,0,.09);
  letter-spacing: .035em;
}

/* === Home countries feature — 20260726-124 === */
.hx-page--home .hx-home-connect .hx-feature-card.countries {
  border-color: rgba(72, 255, 182, .54);
  background:
    radial-gradient(circle at 50% -8%, rgba(77,255,188,.24), transparent 43%),
    radial-gradient(circle at 92% 94%, rgba(40,208,255,.13), transparent 47%),
    linear-gradient(150deg, rgba(255,255,255,.17), rgba(37,255,156,.065) 46%, rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 0 0 26px rgba(37,255,156,.065),
    0 15px 30px rgba(0,0,0,.24),
    0 0 28px rgba(37,255,156,.15);
}

.hx-page--home .hx-home-connect .hx-feature-card.countries::before {
  height: 58%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(circle at 50% 0%, rgba(179,255,229,.18), transparent 66%);
  opacity: .9;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries::after {
  content: "";
  position: absolute;
  inset: -28% -72%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-28%, 0, 0) rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent 44%,
    rgba(255,255,255,.14) 49%,
    rgba(105,255,211,.28) 50%,
    rgba(89,224,255,.12) 52%,
    transparent 57%
  );
  animation: hxCountryCardSweep 6.4s cubic-bezier(.4, 0, .2, 1) infinite 1.2s;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-feature-visual {
  filter: drop-shadow(0 0 10px rgba(46,255,183,.24));
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country {
  width: 58px;
  height: 36px;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country::before {
  inset: 1px 0;
  border-color: rgba(88,255,197,.31);
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.15), transparent 32%),
    linear-gradient(145deg, rgba(37,255,156,.17), rgba(35,193,255,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 13px rgba(255,255,255,.045),
    0 0 18px rgba(37,255,156,.18);
  animation-duration: 3.8s;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country::after {
  right: -4px;
  top: -4px;
  width: 17px;
  height: 17px;
  color: #efffff;
  border: 1px solid rgba(141,255,226,.22);
  background: linear-gradient(145deg, rgba(37,255,156,.30), rgba(43,192,255,.25));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 13px rgba(37,255,156,.30);
  animation-duration: 4.4s;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country span {
  font-size: 27px;
  animation-name: hxCountryRouteSwitch;
  animation-duration: 10s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-iteration-count: infinite;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country span:nth-child(1) {
  animation-delay: 0s;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country span:nth-child(2) {
  animation-delay: 2.5s;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country span:nth-child(3) {
  animation-delay: 5s;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country span:nth-child(4) {
  animation-delay: 7.5s;
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-feature-main {
  color: #f4fffb;
  font-size: clamp(23px, 6.2vw, 29px);
  letter-spacing: -.035em;
  text-shadow:
    0 0 10px rgba(255,255,255,.24),
    0 0 22px rgba(37,255,156,.22),
    0 6px 16px rgba(0,0,0,.22);
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-feature-label {
  color: rgba(238,255,249,.98);
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}

.hx-page--home .hx-home-connect .hx-feature-card.countries .hx-feature-pill {
  color: #e9fff7;
  border-color: rgba(94,255,201,.23);
  background:
    linear-gradient(180deg, rgba(93,255,203,.17), rgba(23,199,229,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 14px rgba(37,255,156,.08);
  letter-spacing: .018em;
}

/* === Home YouTube feature — 20260727-127 === */
.hx-page--home .hx-home-connect .hx-feature-card.youtube {
  border-color: rgba(255, 105, 162, .54);
  background:
    radial-gradient(circle at 50% -8%, rgba(255,105,162,.23), transparent 43%),
    radial-gradient(circle at 92% 94%, rgba(185,76,255,.14), transparent 47%),
    linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,78,145,.065) 46%, rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 0 0 26px rgba(255,78,145,.06),
    0 15px 30px rgba(0,0,0,.24),
    0 0 28px rgba(255,78,145,.15);
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube::before {
  height: 58%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(circle at 50% 0%, rgba(255,196,221,.17), transparent 66%);
  opacity: .9;
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube::after {
  content: "";
  position: absolute;
  inset: -28% -72%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-28%, 0, 0) rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent 44%,
    rgba(255,255,255,.14) 49%,
    rgba(255,137,190,.28) 50%,
    rgba(181,110,255,.12) 52%,
    transparent 57%
  );
  animation: hxYoutubeCardSweep 6.8s cubic-bezier(.4, 0, .2, 1) infinite 2.2s;
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-feature-visual {
  filter: drop-shadow(0 0 10px rgba(255,83,151,.23));
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean {
  width: 62px;
  height: 40px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean .play {
  left: 12px;
  top: 7px;
  width: 38px;
  height: 26px;
  border-radius: 8px;
  font-size: 0;
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(145deg, #ff3159, #d91443);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 0 15px rgba(255,42,93,.34);
  animation: hxYoutubePlayPulse 6.8s ease-in-out infinite;
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean .play::before {
  content: "▶";
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  transform: translateX(1px);
  text-shadow: 0 1px 5px rgba(80,0,18,.42);
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean .ad {
  left: 0;
  top: 1px;
  bottom: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #ff9fbd;
  box-shadow: none;
  text-shadow: 0 0 8px rgba(255,70,127,.44);
  animation-duration: 6.8s;
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean .slash {
  left: 1px;
  top: 19px;
  width: 60px;
  background: linear-gradient(90deg, transparent, #ff4b70 16%, #fff 50%, #80efff 84%, transparent);
  box-shadow: 0 0 8px rgba(255,111,165,.38);
  animation-duration: 6.8s;
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean .shield {
  right: 0;
  top: 0;
  width: 18px;
  height: 18px;
  color: #8dffd1;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 17px;
  box-shadow: none;
  text-shadow: 0 0 10px rgba(37,255,156,.42);
  animation-duration: 6.8s;
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-feature-main {
  color: #fff8fc;
  font-size: clamp(15px, 4.2vw, 18px);
  letter-spacing: -.025em;
  text-shadow:
    0 0 10px rgba(255,255,255,.22),
    0 0 21px rgba(255,78,145,.21),
    0 6px 16px rgba(0,0,0,.22);
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-feature-label {
  color: rgba(255,241,248,.98);
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}

.hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-feature-pill {
  color: #fff1f8;
  border-color: rgba(255,131,181,.23);
  background:
    linear-gradient(180deg, rgba(255,123,176,.17), rgba(169,73,255,.10));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 14px rgba(255,78,145,.08);
  letter-spacing: .018em;
}

@keyframes hxSpeedCardSweep {
  0%, 68% {
    opacity: 0;
    transform: translate3d(-30%, 0, 0) rotate(18deg);
  }

  74% {
    opacity: .52;
  }

  88%, 100% {
    opacity: 0;
    transform: translate3d(30%, 0, 0) rotate(18deg);
  }
}

@keyframes hxCountryCardSweep {
  0%, 70% {
    opacity: 0;
    transform: translate3d(-30%, 0, 0) rotate(18deg);
  }

  76% {
    opacity: .46;
  }

  90%, 100% {
    opacity: 0;
    transform: translate3d(30%, 0, 0) rotate(18deg);
  }
}

@keyframes hxCountryRouteSwitch {
  0% {
    opacity: 0;
    transform: translate3d(8px, 5px, 0) scale(.80);
  }

  8%, 22% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  29%, 100% {
    opacity: 0;
    transform: translate3d(-8px, -4px, 0) scale(.82);
  }
}

@keyframes hxYoutubeCardSweep {
  0%, 72% {
    opacity: 0;
    transform: translate3d(-30%, 0, 0) rotate(18deg);
  }

  78% {
    opacity: .44;
  }

  92%, 100% {
    opacity: 0;
    transform: translate3d(30%, 0, 0) rotate(18deg);
  }
}

@keyframes hxYoutubePlayPulse {
  0%,
  100% {
    opacity: .94;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@media (max-width: 360px) {
  .hx-page--home .hx-home-connect .hx-feature-card.speed .hx-speed-meter {
    width: 61px;
    height: 39px;
  }

  .hx-page--home .hx-home-connect .hx-feature-card.speed .hx-feature-main {
    font-size: clamp(19px, 6vw, 22px);
  }

  .hx-page--home .hx-home-connect .hx-feature-card.countries .hx-smart-country {
    width: 52px;
    height: 34px;
  }

  .hx-page--home .hx-home-connect .hx-feature-card.countries .hx-feature-main {
    font-size: clamp(19px, 6vw, 22px);
  }

  .hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean {
    width: 56px;
    height: 34px;
  }

  .hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean .play {
    left: 10px;
    top: 5px;
    width: 36px;
    height: 24px;
  }

  .hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-youtube-clean .slash {
    top: 16px;
    width: 54px;
  }

  .hx-page--home .hx-home-connect .hx-feature-card.youtube .hx-feature-main {
    font-size: clamp(13.5px, 4.2vw, 15.5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--home .hx-home-connect .hx-feature-card.speed::after,
  .hx-page--home .hx-home-connect .hx-feature-card.countries::after,
  .hx-page--home .hx-home-connect .hx-feature-card.youtube::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-contact-button {
    transition: none;
  }

  .hx-contact-button:hover,
  .hx-contact-button:active {
    transform: none;
  }
}

/* Compact premium connect hero */
.hx-page--connect .hx-connect-compact {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 30px) clamp(18px, 3vw, 28px);
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  border-radius: clamp(28px, 4vw, 42px);
  background:
    radial-gradient(circle at 50% -10%, rgba(116, 232, 255, 0.16), transparent 34%),
    radial-gradient(circle at 12% 18%, rgba(0, 229, 255, 0.10), transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(255, 78, 205, 0.11), transparent 38%),
    linear-gradient(145deg, rgba(10, 25, 45, 0.82), rgba(17, 18, 42, 0.76) 56%, rgba(31, 15, 42, 0.68));
  border: 1px solid rgba(170, 238, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 18px 42px rgba(0, 0, 0, 0.22),
    0 0 30px rgba(0, 229, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hx-page--connect .hx-connect-compact::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 34%),
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, 0.045) 36%, transparent 54% 100%);
  opacity: 0.72;
}

.hx-page--connect .hx-connect-compact::after {
  display: none;
}

.hx-connect-compact > * {
  position: relative;
  z-index: 2;
}

.hx-connect-top {
  display: grid;
  justify-items: center;
  gap: 0;
  padding-top: 4px;
}





.hx-page--connect .hx-connect-compact .hx-connect-title {
  max-width: 430px;
  margin: 0;
  font-size: clamp(34px, 6vw, 48px);
  line-height: 1.02;
  text-align: center;
}

.hx-page--connect .hx-connect-compact .hx-connect-title span {
  margin-top: 6px;
  font-size: clamp(16px, 3vw, 20px);
  line-height: 1.15;
  color: rgba(220, 250, 255, 0.88);
}



.hx-connect-cta {
  width: min(100%, 420px);
  display: grid;
  gap: 9px;
  margin-top: 2px;
}

.hx-connect-cta p {
  margin: 0;
  color: rgba(226, 250, 255, 0.70);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hx-connect-compact .hx-contact-actions {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hx-connect-compact .hx-contact-button {
  min-height: 52px;
  padding: 11px 14px;
  border-radius: 18px;
  justify-content: center;
  gap: 9px;
  color: #f8fcff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  border: 1px solid rgba(148, 228, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 10px 22px rgba(0, 0, 0, 0.14);
  transition: transform 180ms ease, opacity 180ms ease, border-color 180ms ease;
}

.hx-connect-compact .hx-contact-button.telegram {
  background:
    radial-gradient(circle at 22% 0%, rgba(0, 229, 255, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(25, 96, 150, 0.36), rgba(38, 47, 108, 0.30));
  border-color: rgba(86, 220, 255, 0.26);
}

.hx-connect-compact .hx-contact-button.vk {
  background:
    radial-gradient(circle at 24% 0%, rgba(126, 156, 255, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(70, 84, 170, 0.34), rgba(108, 59, 150, 0.28));
  border-color: rgba(144, 124, 255, 0.26);
}

.hx-connect-compact .hx-contact-button:hover {
  transform: translateY(-2px);
}

.hx-connect-compact .hx-contact-button:active {
  transform: translateY(-1px) scale(0.99);
}

.hx-connect-compact .hx-contact-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hx-connect-compact .hx-contact-icon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}

.hx-connect-compact .hx-contact-icon--telegram {
  color: #dff8ff;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.30), transparent 36%),
    linear-gradient(145deg, rgba(28, 180, 236, 0.76), rgba(48, 113, 205, 0.58));
}

.hx-connect-compact .hx-contact-icon--vk {
  color: #f5fbff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.07em;
  text-transform: lowercase;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.28), transparent 36%),
    linear-gradient(145deg, rgba(78, 141, 255, 0.70), rgba(100, 88, 205, 0.56));
}

.hx-connect-compact .hx-contact-icon--vk::before {
  display: none;
}

.hx-process-mini {
  width: min(100%, 430px);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
  color: rgba(246, 251, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.hx-process-mini span {
  white-space: nowrap;
}

.hx-process-mini b {
  color: rgba(129, 233, 255, 0.92);
  font-weight: 950;
  letter-spacing: 0.06em;
}

.hx-process-mini i {
  width: 14px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.20), rgba(255, 255, 255, 0.42), rgba(255, 78, 205, 0.20));
}

.hx-page--connect .hx-connect-compact .hx-inner-home {
  min-height: 34px;
  margin: 0;
  padding: 8px 13px;
  border-radius: 999px;
  color: rgba(246, 251, 255, 0.68);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-compact {
    width: min(100%, 348px);
    padding: 18px 14px 16px;
    gap: 12px;
    border-radius: 28px;
  }




  .hx-page--connect .hx-connect-compact .hx-connect-title {
    max-width: 304px;
    font-size: 30px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title span {
    font-size: 15px;
  }


  .hx-connect-cta {
    width: 100%;
    gap: 8px;
  }

  .hx-connect-compact .hx-contact-button {
    min-height: 48px;
    border-radius: 16px;
    font-size: 14px;
  }

  .hx-process-mini {
    width: 100%;
    padding: 7px 9px;
    gap: 6px;
    font-size: 10px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-compact {
    width: min(100%, 288px);
    padding: 15px 11px 14px;
    gap: 10px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: 25px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title span {
    font-size: 13.2px;
  }

  .hx-connect-compact .hx-contact-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hx-connect-compact .hx-contact-button {
    min-height: 46px;
  }

  .hx-process-mini i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hx-connect-compact .hx-contact-button {
    transition: none;
    animation: none;
  }

  .hx-connect-compact .hx-contact-button:hover,
  .hx-connect-compact .hx-contact-button:active {
    transform: none;
  }
}

.hx-page--connect .hx-connect-compact .hx-connect-top > .hx-connect-title:first-child {
  margin-top: 0;
}


/* Final mobile polish for /connect/ top action block */
.hx-page--connect .hx-connect-compact {
  width: min(100%, 540px);
  padding: clamp(20px, 3.2vw, 28px) clamp(16px, 3vw, 24px) clamp(16px, 2.8vw, 24px);
  gap: 12px;
  border-radius: clamp(28px, 4vw, 36px);
  border-color: rgba(170, 238, 255, 0.11);
  background:
    radial-gradient(circle at 50% -12%, rgba(116, 232, 255, 0.11), transparent 34%),
    radial-gradient(circle at 12% 18%, rgba(0, 229, 255, 0.075), transparent 30%),
    radial-gradient(circle at 88% 92%, rgba(255, 78, 205, 0.075), transparent 36%),
    linear-gradient(145deg, rgba(10, 25, 45, 0.78), rgba(17, 18, 42, 0.72) 58%, rgba(31, 15, 42, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 14px 34px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(0, 229, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hx-page--connect .hx-connect-compact::before {
  opacity: 0.46;
}

.hx-page--connect .hx-connect-compact .hx-connect-top {
  padding-top: 0;
}

.hx-page--connect .hx-connect-compact .hx-connect-title {
  max-width: min(100%, 480px);
  font-size: clamp(34px, 7.2vw, 50px);
  line-height: 0.98;
}

.hx-page--connect .hx-connect-compact .hx-connect-cta {
  width: min(100%, 400px);
  gap: 8px;
  margin-top: 0;
}

.hx-page--connect .hx-connect-compact .hx-connect-cta p {
  font-size: 12px;
  letter-spacing: 0.11em;
  color: rgba(226, 250, 255, 0.64);
}

.hx-page--connect .hx-connect-compact .hx-contact-actions {
  gap: 9px;
}

.hx-page--connect .hx-connect-compact .hx-contact-button {
  min-height: 56px;
  padding: 9px 13px;
  border-radius: 17px;
  font-size: 15.5px;
  border-color: rgba(170, 238, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 9px 20px rgba(0, 0, 0, 0.14);
}

.hx-page--connect .hx-connect-compact .hx-contact-icon {
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

.hx-page--connect .hx-connect-compact .hx-contact-icon svg {
  width: 15px;
  height: 15px;
}

.hx-page--connect .hx-connect-compact .hx-contact-icon--vk {
  font-size: 12px;
  letter-spacing: -0.055em;
}

.hx-page--connect .hx-process-mini {
  width: min(100%, 400px);
  padding: 6px 9px;
  gap: 6px;
  font-size: 10.5px;
  color: rgba(246, 251, 255, 0.68);
  background: rgba(255, 255, 255, 0.026);
  border-color: rgba(255, 255, 255, 0.052);
  box-shadow: none;
}

.hx-page--connect .hx-process-mini b {
  color: rgba(129, 233, 255, 0.82);
}

.hx-page--connect .hx-process-mini i {
  width: 10px;
  opacity: 0.52;
}

.hx-page--connect .hx-connect-compact .hx-inner-home {
  min-height: 30px;
  margin-top: -2px;
  padding: 7px 12px;
  font-size: 12px;
  color: rgba(246, 251, 255, 0.48);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.075);
  box-shadow: none;
}

.hx-page--connect .hx-divider {
  margin: 24px auto;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-compact {
    width: min(100%, 352px);
    padding: 22px 16px 18px;
    gap: 10px;
    border-radius: 30px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    max-width: 320px;
    font-size: clamp(36px, 9.6vw, 42px);
  }

  .hx-page--connect .hx-connect-compact .hx-connect-cta p {
    font-size: 11.5px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 58px;
    padding: 9px 10px;
    font-size: 15px;
  }

  .hx-page--connect .hx-process-mini {
    padding: 6px 8px;
    gap: 5px;
    font-size: 10px;
  }

  .hx-page--connect .hx-connect-compact .hx-inner-home {
    min-height: 29px;
    padding: 6px 11px;
    font-size: 11.5px;
  }

  .hx-page--connect .hx-divider {
    margin: 22px auto;
  }
}

@media (max-width: 375px) {
  .hx-page--connect .hx-connect-compact {
    width: min(100%, 330px);
    padding: 20px 14px 16px;
    gap: 9px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: 33px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-actions {
    gap: 8px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 54px;
    font-size: 14px;
  }

  .hx-page--connect .hx-process-mini {
    gap: 4px;
    font-size: 9.5px;
  }

  .hx-page--connect .hx-process-mini i {
    width: 8px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-compact {
    width: min(100%, 288px);
    padding: 18px 11px 15px;
    gap: 9px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: 29px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 46px;
  }

  .hx-page--connect .hx-process-mini {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 16px;
    padding: 7px;
    gap: 5px;
  }

  .hx-page--connect .hx-process-mini span {
    justify-content: center;
  }

  .hx-page--connect .hx-process-mini i {
    display: none;
  }

  .hx-page--connect .hx-divider {
    margin: 18px auto;
  }
}

/* /connect/ top block: keep it on the shared page background */
.hx-page--connect .hx-connect-hero.hx-connect-compact {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hx-page--connect .hx-connect-hero.hx-connect-compact::before,
.hx-page--connect .hx-connect-hero.hx-connect-compact::after {
  content: none;
  display: none;
  background: none;
  border: 0;
  box-shadow: none;
}

.hx-page--connect .hx-connect-compact .hx-contact-icon--vk::before {
  content: none;
  display: none;
}

/* /connect/ refined top controls */
.hx-page--connect .hx-connect-hero.hx-connect-compact {
  width: min(100%, 620px);
  padding: clamp(16px, 3vw, 26px) clamp(14px, 3vw, 24px) clamp(14px, 2.5vw, 22px);
  gap: clamp(10px, 2vw, 16px);
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hx-page--connect .hx-connect-hero.hx-connect-compact::before,
.hx-page--connect .hx-connect-hero.hx-connect-compact::after {
  content: none;
  display: none;
  background: none;
  border: 0;
  box-shadow: none;
}

.hx-page--connect .hx-connect-compact .hx-connect-title {
  max-width: min(100%, 420px);
  font-size: clamp(40px, 7vw, 58px);
  line-height: 0.96;
}

.hx-page--connect .hx-connect-compact .hx-connect-cta {
  width: min(100%, 440px);
  gap: 9px;
}

.hx-page--connect .hx-connect-compact .hx-connect-cta p {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  color: rgba(226, 250, 255, 0.58);
}

.hx-page--connect .hx-connect-compact .hx-contact-actions {
  gap: 10px;
}

.hx-page--connect .hx-connect-compact .hx-contact-button {
  min-height: 60px;
  padding: 10px 16px;
  border-radius: 18px;
  gap: 10px;
  color: rgba(250, 253, 255, 0.96);
  font-size: 16px;
  border: 1px solid rgba(160, 235, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 10px 24px rgba(0, 0, 0, 0.12);
}

.hx-page--connect .hx-connect-compact .hx-contact-button.telegram {
  background:
    radial-gradient(circle at 18% 0%, rgba(59, 206, 255, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(18, 74, 120, 0.46), rgba(32, 43, 104, 0.36));
  border-color: rgba(78, 218, 255, 0.30);
}

.hx-page--connect .hx-connect-compact .hx-contact-button.vk {
  background:
    radial-gradient(circle at 18% 0%, rgba(125, 155, 255, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(53, 68, 146, 0.48), rgba(87, 54, 138, 0.38));
  border-color: rgba(144, 128, 255, 0.30);
}

.hx-page--connect .hx-connect-compact .hx-contact-button:hover {
  transform: translateY(-2px);
  opacity: 0.98;
}

.hx-page--connect .hx-connect-compact .hx-contact-button:active {
  transform: translateY(0) scale(0.99);
}

.hx-page--connect .hx-connect-compact .hx-contact-button:focus-visible {
  outline: 2px solid rgba(122, 235, 255, 0.78);
  outline-offset: 3px;
}

.hx-page--connect .hx-connect-compact .hx-contact-icon {
  width: 30px;
  height: 30px;
  border-radius: 11px;
}

.hx-page--connect .hx-connect-compact .hx-contact-icon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: currentColor;
}

.hx-page--connect .hx-connect-compact .hx-contact-icon--telegram {
  color: #f5fdff;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.34), transparent 36%),
    linear-gradient(145deg, rgba(38, 184, 242, 0.78), rgba(44, 112, 206, 0.64));
}

.hx-page--connect .hx-connect-compact .hx-contact-icon--vk {
  color: #f5fbff;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.32), transparent 36%),
    linear-gradient(145deg, rgba(82, 144, 255, 0.78), rgba(90, 84, 210, 0.64));
}

.hx-page--connect .hx-connect-compact .hx-contact-icon--vk::before {
  content: none;
  display: none;
}

.hx-page--connect .hx-process-mini {
  width: min(100%, 440px);
  padding: 0;
  gap: 7px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hx-page--connect .hx-process-mini span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 8px 11px;
  border-radius: 999px;
  color: rgba(246, 251, 255, 0.72);
  background: rgba(255, 255, 255, 0.036);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.hx-page--connect .hx-process-mini b {
  margin-right: 5px;
  color: rgba(122, 235, 255, 0.88);
}

.hx-page--connect .hx-process-mini i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.75;
  background: rgba(122, 235, 255, 0.58);
}

.hx-page--connect .hx-connect-compact .hx-inner-home {
  min-height: 28px;
  padding: 6px 11px;
  color: rgba(246, 251, 255, 0.42);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    width: min(100%, 360px);
    padding: 16px 13px 14px;
    gap: 10px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: clamp(42px, 11vw, 48px);
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 56px;
    padding: 9px 12px;
    font-size: 15px;
  }

  .hx-page--connect .hx-process-mini {
    gap: 5px;
    font-size: 9.5px;
  }

  .hx-page--connect .hx-process-mini span {
    min-height: 28px;
    padding: 7px 9px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    width: min(100%, 292px);
  }

  .hx-page--connect .hx-connect-compact .hx-contact-actions {
    grid-template-columns: 1fr;
  }

  .hx-page--connect .hx-process-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hx-page--connect .hx-process-mini i {
    display: none;
  }
}

/* /connect/ typography and spacing polish */
.hx-page--connect .hx-connect-hero.hx-connect-compact {
  width: min(100%, 680px);
  padding: clamp(30px, 4.5vw, 44px) clamp(18px, 4vw, 34px) clamp(18px, 3vw, 26px);
  gap: clamp(14px, 2.4vw, 22px);
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hx-page--connect .hx-connect-hero.hx-connect-compact::before,
.hx-page--connect .hx-connect-hero.hx-connect-compact::after {
  content: none;
  display: none;
  background: none;
  border: 0;
  box-shadow: none;
}

.hx-page--connect .hx-connect-compact .hx-connect-top {
  width: min(100%, 620px);
  padding-top: clamp(8px, 1.8vw, 18px);
}

.hx-page--connect .hx-connect-compact .hx-connect-title {
  position: relative;
  max-width: min(100%, 620px);
  color: #f9fdff;
  font-size: clamp(50px, 8.3vw, 74px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-shadow:
    0 0 14px rgba(190, 247, 255, 0.26),
    0 0 34px rgba(91, 219, 255, 0.16),
    0 10px 30px rgba(0, 0, 0, 0.18);
}

.hx-page--connect .hx-connect-compact .hx-connect-title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(112%, 560px);
  height: 92px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(121, 235, 255, 0.18), rgba(122, 235, 255, 0.055) 45%, transparent 72%);
  transform: translate(-50%, -50%);
  opacity: 0.78;
  z-index: -1;
}

.hx-page--connect .hx-connect-compact .hx-connect-cta {
  width: min(100%, 520px);
  gap: clamp(12px, 2vw, 16px);
}

.hx-page--connect .hx-connect-compact .hx-connect-cta p {
  color: rgba(218, 249, 255, 0.68);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-shadow:
    0 0 12px rgba(121, 235, 255, 0.14),
    0 0 24px rgba(121, 235, 255, 0.08);
}

.hx-page--connect .hx-connect-compact .hx-contact-actions {
  gap: clamp(12px, 2.2vw, 18px);
}

.hx-page--connect .hx-connect-compact .hx-contact-button {
  min-height: 62px;
  padding-inline: clamp(14px, 3vw, 22px);
}

.hx-page--connect .hx-process-mini {
  width: min(100%, 520px);
  gap: clamp(8px, 1.6vw, 12px);
  margin-top: 2px;
}

.hx-page--connect .hx-process-mini span {
  min-height: 32px;
  padding: 8px 13px;
}

.hx-page--connect .hx-connect-compact .hx-inner-home {
  margin-top: 1px;
}

.hx-page--connect .hx-divider {
  margin: 20px auto 28px;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    width: min(100%, 374px);
    padding: 28px 14px 16px;
    gap: 13px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-top {
    padding-top: 6px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: clamp(46px, 12.4vw, 54px);
    letter-spacing: -0.018em;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title::before {
    height: 74px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-cta {
    width: min(100%, 356px);
    gap: 12px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 58px;
  }

  .hx-page--connect .hx-process-mini {
    width: min(100%, 356px);
    gap: 6px;
  }

  .hx-page--connect .hx-process-mini span {
    min-height: 30px;
    padding: 7px 10px;
  }

  .hx-page--connect .hx-divider {
    margin: 18px auto 24px;
  }
}

@media (max-width: 375px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    width: min(100%, 336px);
    padding: 26px 12px 15px;
    gap: 12px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: clamp(42px, 12.2vw, 48px);
  }

  .hx-page--connect .hx-connect-compact .hx-connect-cta p {
    font-size: 10.5px;
    letter-spacing: 0.15em;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-actions {
    gap: 9px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 54px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    width: min(100%, 292px);
    padding: 24px 10px 14px;
    gap: 11px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: 40px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-actions {
    grid-template-columns: 1fr;
  }

  .hx-page--connect .hx-process-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hx-page--connect .hx-process-mini i {
    display: none;
  }
}

/* /connect/ align top block with the horizontal divider */
.hx-page--connect .hx-connect-hero.hx-connect-compact {
  padding-bottom: clamp(30px, 4vw, 42px);
}

.hx-page--connect .hx-divider {
  margin-top: 0;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding-bottom: 34px;
  }

  .hx-page--connect .hx-divider {
    margin-top: 0;
  }
}

@media (max-width: 375px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding-bottom: 32px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding-bottom: 28px;
  }
}

/* /connect/ add breathing room between title, label and buttons */
.hx-page--connect .hx-connect-compact .hx-connect-cta {
  margin-top: clamp(12px, 2.4vw, 22px);
  gap: clamp(15px, 2.2vw, 20px);
}

.hx-page--connect .hx-connect-compact .hx-connect-cta p {
  margin-bottom: 0;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-compact .hx-connect-cta {
    margin-top: 14px;
    gap: 15px;
  }
}

@media (max-width: 375px) {
  .hx-page--connect .hx-connect-compact .hx-connect-cta {
    margin-top: 12px;
    gap: 13px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-compact .hx-connect-cta {
    margin-top: 10px;
    gap: 12px;
  }
}

/* /connect/ secondary home button */
.hx-page--connect .hx-connect-compact .hx-inner-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 0;
  margin: clamp(16px, 2.4vw, 24px) auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(205, 238, 255, 0.16);
  color: rgba(238, 247, 255, 0.78);
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}

.hx-page--connect .hx-connect-compact .hx-inner-home:hover {
  transform: translateY(-2px);
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.095);
  border-color: rgba(130, 226, 255, 0.28);
}

.hx-page--connect .hx-connect-compact .hx-inner-home:active {
  transform: translateY(0) scale(0.98);
}

.hx-page--connect .hx-connect-compact .hx-inner-home:focus-visible {
  outline: 2px solid rgba(130, 226, 255, 0.75);
  outline-offset: 4px;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-compact .hx-inner-home {
    margin-top: 14px;
    padding: 9px 15px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--connect .hx-connect-compact .hx-inner-home {
    transition: none;
  }

  .hx-page--connect .hx-connect-compact .hx-inner-home:hover,
  .hx-page--connect .hx-connect-compact .hx-inner-home:active {
    transform: none;
  }
}

/* /connect/ mobile overflow fix for the top block */
.hx-page--connect .hx-connect-hero.hx-connect-compact {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.hx-page--connect .hx-connect-compact .hx-connect-title,
.hx-page--connect .hx-connect-compact .hx-connect-cta,
.hx-page--connect .hx-connect-compact .hx-contact-actions,
.hx-page--connect .hx-process-mini {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 430px) {
  html,
  body {
    overflow-x: hidden;
  }

  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    width: 100%;
    max-width: 100%;
    padding: 22px 12px 24px;
    gap: 11px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(40px, 11.8vw, 48px);
    line-height: 0.96;
    letter-spacing: -0.045em;
    text-align: center;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title::before {
    width: 100%;
    height: 62px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-cta {
    width: 100%;
    gap: 10px;
    margin-top: 8px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-cta p {
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    width: 100%;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-width: 0;
    min-height: 52px;
    padding: 9px 11px;
    border-radius: 17px;
    gap: 9px;
    font-size: 14.5px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    flex: 0 0 28px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-icon svg {
    width: 16px;
    height: 16px;
  }

  .hx-page--connect .hx-process-mini {
    display: flex;
    width: 100%;
    gap: 5px;
    margin-top: 1px;
    font-size: 9.5px;
  }

  .hx-page--connect .hx-process-mini span {
    min-width: 0;
    min-height: 28px;
    padding: 7px 8px;
    white-space: nowrap;
  }

  .hx-page--connect .hx-process-mini b {
    margin-right: 4px;
  }

  .hx-page--connect .hx-process-mini i {
    width: 4px;
    flex: 0 0 4px;
  }

  .hx-page--connect .hx-connect-compact .hx-inner-home {
    margin-top: 10px;
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media (max-width: 375px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding: 20px 10px 22px;
    gap: 10px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: clamp(36px, 11.5vw, 43px);
    letter-spacing: -0.05em;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 50px;
    padding: 8px 9px;
    font-size: 13.5px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-icon {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    flex-basis: 26px;
  }

  .hx-page--connect .hx-process-mini {
    gap: 4px;
    font-size: 8.8px;
  }

  .hx-page--connect .hx-process-mini span {
    padding: 6px 6px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding: 18px 9px 20px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: 36px;
    letter-spacing: -0.048em;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-actions {
    grid-template-columns: 1fr;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 46px;
    justify-content: center;
  }

  .hx-page--connect .hx-process-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 9.5px;
  }

  .hx-page--connect .hx-process-mini span {
    white-space: normal;
  }

  .hx-page--connect .hx-process-mini i {
    display: none;
  }
}

/* Inner pages: consistent secondary home button */
.hx-page--inner .hx-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 0;
  margin: clamp(16px, 2.4vw, 24px) auto 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(205, 238, 255, 0.16);
  color: rgba(238, 247, 255, 0.78);
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  transition:
    transform 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}

.hx-page--inner .hx-back-link:hover {
  transform: translateY(-2px);
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.095);
  border-color: rgba(130, 226, 255, 0.28);
}

.hx-page--inner .hx-back-link:active {
  transform: translateY(0) scale(0.98);
}

.hx-page--inner .hx-back-link:focus-visible {
  outline: 2px solid rgba(130, 226, 255, 0.75);
  outline-offset: 4px;
}

@media (max-width: 430px) {
  .hx-page--inner .hx-back-link {
    margin-top: 14px;
    padding: 9px 15px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--inner .hx-back-link {
    transition: none;
  }

  .hx-page--inner .hx-back-link:hover,
  .hx-page--inner .hx-back-link:active {
    transform: none;
  }
}

/* App Store instruction page */
.hx-page--appstore {
  max-width: 1040px;
}

.hx-page--appstore .hx-appstore-manual {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  padding: clamp(28px, 4vw, 54px);
}

.hx-appstore-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.8vw, 18px);
  text-align: center;
  isolation: isolate;
}

.hx-appstore-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: clamp(128px, 18vw, 188px);
  left: 50%;
  width: min(92%, 780px);
  height: clamp(150px, 18vw, 220px);
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(91, 190, 255, 0.16), rgba(123, 97, 255, 0.08) 42%, transparent 72%);
  opacity: 0.9;
  pointer-events: none;
}

.hx-page--appstore .hx-appstore-icon {
  width: clamp(76px, 10vw, 112px);
  height: clamp(76px, 10vw, 112px);
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.46), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(100, 190, 255, 0.12) 52%, rgba(216, 83, 255, 0.14));
  box-shadow:
    0 18px 46px rgba(29, 180, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.hx-page--appstore .hx-appstore-icon span {
  font-size: clamp(40px, 5.8vw, 62px);
}

.hx-appstore-kicker {
  color: rgba(218, 239, 255, 0.82);
}

.hx-page--appstore .hx-title {
  position: relative;
  max-width: 900px;
  margin: 0;
  font-size: clamp(44px, 5.7vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.048em;
  color: rgba(255, 255, 255, 0.98);
  text-wrap: balance;
  text-shadow:
    0 0 16px rgba(210, 244, 255, 0.18),
    0 0 42px rgba(82, 190, 255, 0.18),
    0 18px 44px rgba(0, 0, 0, 0.3);
}

.hx-page--appstore .hx-title span {
  display: block;
  margin-top: clamp(18px, 2.6vw, 28px);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: rgba(214, 244, 255, 0.96);
  text-shadow:
    0 0 16px rgba(179, 238, 255, 0.22),
    0 0 34px rgba(71, 198, 255, 0.2);
}

.hx-page--appstore .hx-text {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(235, 243, 255, 0.78);
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.48;
}

.hx-appstore-image-card {
  position: relative;
  margin: 0;
  padding: clamp(8px, 1.4vw, 14px);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(85, 153, 255, 0.08) 58%, rgba(214, 83, 255, 0.08)),
    rgba(10, 16, 34, 0.54);
  border: 1px solid rgba(204, 229, 255, 0.16);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.hx-appstore-photo-stack {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
}

.hx-appstore-image-button {
  width: 100%;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  touch-action: manipulation;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.hx-appstore-image-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(97, 218, 255, 0.08));
  opacity: 0;
  transition: opacity 180ms ease;
}

.hx-appstore-image-button:hover::after,
.hx-appstore-image-button:focus-visible::after {
  opacity: 1;
}

.hx-appstore-image-button:hover {
  transform: translateY(-2px);
  border-color: rgba(132, 226, 255, 0.28);
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.26),
    0 0 34px rgba(44, 206, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hx-appstore-image-button:active {
  transform: translateY(0) scale(0.995);
}

.hx-appstore-image-button:focus-visible {
  outline: 2px solid rgba(130, 226, 255, 0.78);
  outline-offset: 4px;
}

.hx-appstore-image-card img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  background: rgba(245, 250, 255, 0.96);
}

.hx-appstore-open-label {
  position: absolute;
  right: clamp(16px, 2.4vw, 24px);
  bottom: clamp(16px, 2.4vw, 24px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  color: rgba(246, 252, 255, 0.92);
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 850;
  letter-spacing: 0.01em;
  background: rgba(6, 14, 30, 0.62);
  border: 1px solid rgba(201, 236, 255, 0.2);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hx-image-lightbox[hidden] {
  display: none;
}

.hx-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(18px + env(safe-area-inset-top)) clamp(12px, 3vw, 28px) calc(18px + env(safe-area-inset-bottom));
}

.hx-image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(54, 188, 255, 0.14), transparent 34%),
    rgba(3, 8, 18, 0.86);
  cursor: zoom-out;
}

.hx-image-lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 980px);
  max-height: calc(100svh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: clamp(8px, 1.4vw, 14px);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(76, 143, 255, 0.08)),
    rgba(10, 16, 32, 0.86);
  border: 1px solid rgba(210, 235, 255, 0.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.hx-image-lightbox__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: cover;
  border-radius: 18px;
  background: rgba(245, 250, 255, 0.96);
}

.hx-image-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(219, 240, 255, 0.24);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.95);
  font-size: 26px;
  font-weight: 650;
  line-height: 1;
  background: rgba(8, 14, 28, 0.72);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.hx-image-lightbox__close:hover,
.hx-image-lightbox__close:focus-visible {
  background: rgba(16, 28, 52, 0.82);
  border-color: rgba(130, 226, 255, 0.38);
}

body.hx-lightbox-open {
  overflow: hidden;
}

body.hx-lightbox-open .hx-site {
  overflow: hidden;
}

.hx-appstore-important {
  display: block;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: 22px;
  color: rgba(230, 241, 255, 0.84);
  background:
    linear-gradient(145deg, rgba(64, 150, 255, 0.12), rgba(255, 255, 255, 0.07)),
    rgba(14, 20, 44, 0.5);
  border: 1px solid rgba(135, 198, 255, 0.2);
  text-align: center;
}

.hx-appstore-important p {
  max-width: 780px;
  margin: 0 auto;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.42;
}

.hx-appstore-actions {
  margin-top: 0;
}

@media (max-width: 560px) {
  .hx-page--appstore .hx-appstore-manual {
    padding: clamp(22px, 5.6vw, 30px) clamp(14px, 4vw, 20px);
    gap: 18px;
  }

  .hx-page--appstore .hx-title {
    font-size: clamp(36px, 9.7vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.046em;
  }

  .hx-page--appstore .hx-title span {
    margin-top: clamp(16px, 4.6vw, 22px);
    font-size: clamp(21px, 5.4vw, 26px);
    line-height: 1.16;
  }

  .hx-page--appstore .hx-text {
    font-size: clamp(16px, 4.6vw, 19px);
    line-height: 1.42;
  }

  .hx-appstore-image-card {
    border-radius: 20px;
    padding: 7px;
  }

  .hx-appstore-image-card img {
    border-radius: 14px;
  }

  .hx-appstore-open-label {
    right: 12px;
    bottom: 12px;
    min-height: 30px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .hx-image-lightbox__panel {
    width: min(100%, 430px);
    border-radius: 20px;
  }

  .hx-image-lightbox__image {
    border-radius: 14px;
  }

  .hx-appstore-important {
    padding: 16px 14px;
  }
}

@media (max-width: 430px) {
  .hx-page--appstore {
    max-width: 100%;
  }

  .hx-page--appstore .hx-appstore-manual {
    padding: 22px 14px calc(26px + env(safe-area-inset-bottom));
    gap: 16px;
  }

  .hx-appstore-photo-stack {
    gap: 16px;
  }

  .hx-appstore-image-card {
    border-radius: 19px;
  }

  .hx-appstore-image-card img {
    border-radius: 13px;
  }

  .hx-image-lightbox {
    padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
  }

  .hx-image-lightbox__panel {
    max-height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 7px;
  }

  .hx-image-lightbox__image {
    max-height: calc(100svh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .hx-image-lightbox__close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 390px) {
  .hx-page--appstore .hx-appstore-manual {
    padding-inline: 12px;
    gap: 14px;
  }

  .hx-appstore-open-label {
    right: 10px;
    bottom: 10px;
    min-height: 28px;
    padding: 6px 9px;
    font-size: 10.5px;
  }
}

@media (max-width: 375px) {
  .hx-page--appstore .hx-title {
    font-size: clamp(32px, 9.2vw, 38px);
  }

  .hx-page--appstore .hx-title span {
    margin-top: 14px;
    font-size: clamp(19px, 5vw, 22px);
  }

  .hx-page--appstore .hx-text {
    font-size: 15px;
  }
}

@media (max-width: 340px) {
  .hx-page--appstore .hx-appstore-manual {
    padding-inline: 10px;
  }

  .hx-page--appstore .hx-title {
    font-size: 30px;
    letter-spacing: -0.04em;
  }

  .hx-appstore-open-label {
    position: static;
    width: fit-content;
    margin: 7px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-appstore-image-button,
  .hx-appstore-image-button::after {
    transition: none;
  }

  .hx-appstore-image-button:hover,
  .hx-appstore-image-button:active {
    transform: none;
  }
}

/* /connect/ reused home benefits block */
.hx-page--connect .hx-connect-hero.hx-connect-compact {
  padding-bottom: 0;
}

.hx-page--connect .hx-connect-benefits {
  padding-top: clamp(28px, 3.3vw, 36px);
  padding-bottom: clamp(10px, 1.7vw, 18px);
}

.hx-connect-benefits-title {
  margin: 0;
  color: rgba(222, 244, 255, 0.88);
  font-size: clamp(14px, 1.9vw, 18px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(91, 211, 255, 0.18);
}

.hx-page--connect .hx-connect-benefits .hx-feature-grid {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
}

.hx-page--connect .hx-connect-benefits + .hx-divider {
  width: min(86%, 420px);
  margin: 0 auto;
  opacity: 0.48;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding-bottom: 0;
  }

  .hx-page--connect .hx-connect-benefits {
    padding-top: clamp(22px, 6vw, 28px);
    padding-bottom: 8px;
  }

  .hx-connect-benefits-title {
    font-size: 13px;
    letter-spacing: 0.13em;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-benefits {
    padding-top: 22px;
    padding-bottom: 6px;
  }
}


/* 2026-07-07: home bottom corner spacing fix
   After removing the feature cards from the main page, the outer glass shell ended
   too close to the bonus button/note and its rounded bottom corner looked like
   a visual artifact. Keep the premium shell, but add breathing room only on home. */
.hx-page--home .hx-section {
  padding-bottom: clamp(44px, 7vw, 64px);
}

.hx-page--home .hx-note {
  position: relative;
  z-index: 5;
  margin-top: 16px;
}

@media (max-width: 430px) {
  .hx-page--home .hx-section {
    padding-bottom: 40px;
  }

  .hx-page--home .hx-note {
    margin-top: 15px;
  }
}

@media (max-width: 360px) {
  .hx-page--home .hx-section {
    padding-bottom: 36px;
  }
}


/* 2026-07-07: home mobile corner cleanup
   The decorative magenta orb was clipped by the shortened home shell after the
   feature cards moved to /connect/, creating a visible circle in the bottom-right
   corner. Hide that orb only on the home page and return the shell bottom spacing
   to a compact value. */
.hx-page--home .hx-orb.two {
  display: none;
}

.hx-page--home .hx-section {
  padding-bottom: 28px;
}

@media (max-width: 430px) {
  .hx-page--home .hx-section {
    padding-bottom: 28px;
  }
}

@media (max-width: 360px) {
  .hx-page--home .hx-section {
    padding-bottom: 26px;
  }
}


/* === Home screen premium CTA polish — 20260707-007 === */
.hx-page--home .hx-section {
  padding-bottom: 30px;
}

.hx-home-status {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 9px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(240, 255, 251, .96);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(37,255,156,.22);
  background:
    radial-gradient(circle at 18% 50%, rgba(37,255,156,.20), transparent 42%),
    linear-gradient(145deg, rgba(37,255,156,.12), rgba(255,255,255,.055));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 18px rgba(37,255,156,.07),
    0 0 22px rgba(37,255,156,.18),
    0 10px 22px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hx-home-status span {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow:
    0 0 0 5px rgba(37,255,156,.10),
    0 0 16px rgba(37,255,156,.72);
  animation: hxHomeStatusPulse 2.6s ease-in-out infinite;
}

.hx-page--home .hx-icon {
  margin-top: 0;
}

.hx-page--home .hx-actions {
  margin-top: 18px;
}

.hx-page--home .hx-button.connect-server {
  min-height: 66px;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -12px 24px rgba(124,92,255,.13),
    inset 0 0 18px rgba(255,255,255,.11),
    0 10px 22px rgba(0,0,0,.20),
    0 0 24px rgba(0,229,255,.23),
    0 0 38px rgba(255,78,205,.16);
}

.hx-page--home .hx-button.connect-server::after {
  content: "";
  position: absolute;
  inset: -45% -35%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 34%, rgba(255,255,255,.32) 48%, transparent 62%);
  transform: translateX(-72%) rotate(4deg);
  opacity: .42;
  animation: hxHomeButtonShine 5.4s ease-in-out infinite;
}


.hx-page--home .hx-button.region,
.hx-page--home .hx-button.update-server {
  color: rgba(247, 251, 255, .94);
  border-color: rgba(0,229,255,.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(47,140,255,.16), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 12px rgba(255,255,255,.065),
    0 8px 18px rgba(0,0,0,.16),
    0 0 12px rgba(0,229,255,.075);
}

.hx-page--home .hx-button.region .hx-region-icon,
.hx-page--home .hx-button.update-server .hx-update-icon {
  transform: scale(.94);
  opacity: .92;
}

.hx-page--home .hx-button.bonus-link {
  min-height: 54px;
  padding: 8px 18px;
  border-radius: 17px;
  border-color: rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,184,0,.11), transparent 44%),
    radial-gradient(circle at 82% 92%, rgba(255,78,205,.08), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 0 14px rgba(255,255,255,.052),
    0 9px 18px rgba(0,0,0,.15),
    0 0 12px rgba(255,184,0,.055);
}

.hx-page--home .hx-bonus-copy {
  gap: 2px;
}

.hx-page--home .hx-bonus-badge {
  width: min(100%, 166px);
  padding: 2px 7px;
  font-size: 7.9px;
  opacity: .82;
}

.hx-page--home .hx-bonus-copy strong {
  font-size: 14.8px;
}

.hx-page--home .hx-bonus-copy small {
  font-size: 9.7px;
}

.hx-page--home .hx-note {
  margin-top: 18px;
  color: rgba(235, 242, 255, .76);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: -.01em;
}

@keyframes hxHomeStatusPulse {
  0%, 100% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.14); opacity: 1; }
}

@keyframes hxHomeButtonShine {
  0%, 58% { transform: translateX(-72%) rotate(4deg); opacity: 0; }
  66% { opacity: .42; }
  82%, 100% { transform: translateX(72%) rotate(4deg); opacity: 0; }
}

@media (max-width: 430px) {
  .hx-home-status {
    margin-bottom: 13px;
    padding: 8px 14px;
    font-size: 10.4px;
  }


  .hx-page--home .hx-button.connect-server {
    min-height: 62px;
  }
}

@media (max-width: 360px) {
  .hx-home-status {
    font-size: 9.7px;
    padding: 8px 12px;
  }


  .hx-page--home .hx-note {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-home-status span,
  .hx-page--home .hx-button.connect-server::after {
    animation: none !important;
  }
}

/* === Home screen micro-polish — 20260707-009 ===
   Small premium refinements only: calmer status, richer app icon, cleaner rhythm,
   lighter bonus card. No layout rewrite and no extra heavy animation. */
.hx-page--home .hx-section {
  padding-top: 28px;
  padding-bottom: 34px;
}

.hx-page--home .hx-icon {
  width: 112px;
  height: 112px;
  margin-bottom: 16px;
  border-radius: 36px;
  overflow: visible;
  background: none;
  box-shadow: none;
  animation: none;
}

.hx-page--home .hx-icon::before {
  display: none;
}

.hx-page--home .hx-icon::after {
  display: none;
}

.hx-page--home .hx-icon span {
  transform: translateZ(0);
  filter:
    drop-shadow(0 0 9px rgba(255,184,0,.88))
    drop-shadow(0 0 18px rgba(0,229,255,.34));
}

.hx-page--home .hx-icon img {
  position: relative;
  z-index: 3;
  display: block;
  width: min(100%, 156px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 28%;
  max-width: 100%;
  border: 0;
  box-shadow: none;
  transform: none;
  filter: none;
}

.hx-home-status {
  margin-bottom: 13px;
  padding: 7px 13px;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .075em;
  color: rgba(237, 255, 249, .90);
  border-color: rgba(37,255,156,.16);
  background:
    radial-gradient(circle at 18% 50%, rgba(37,255,156,.12), transparent 42%),
    linear-gradient(145deg, rgba(37,255,156,.075), rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 16px rgba(37,255,156,.045),
    0 0 14px rgba(37,255,156,.09),
    0 8px 18px rgba(0,0,0,.14);
}

.hx-home-status span {
  width: 8px;
  height: 8px;
  flex-basis: 8px;
  box-shadow:
    0 0 0 4px rgba(37,255,156,.075),
    0 0 12px rgba(37,255,156,.58);
}

.hx-page--home .hx-text {
  margin-bottom: 16px;
}

.hx-page--home .hx-actions {
  margin-top: 16px;
  gap: 8px;
}

.hx-page--home .hx-button.connect-server {
  min-height: 64px;
  border-radius: 20px;
}

.hx-page--home .hx-button.region,
.hx-page--home .hx-button.update-server {
  height: 91px;
  min-height: 91px;
  max-height: 91px;
  align-self: stretch;
  border-radius: 17px;
}

.hx-page--home .hx-button.region {
  border-color: rgba(119,225,255,.24);
  background:
    radial-gradient(ellipse at 50% 26%, rgba(46,191,255,.18), transparent 47%),
    radial-gradient(circle at 82% 92%, rgba(255,78,205,.09), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.038));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 0 14px rgba(255,255,255,.07),
    0 8px 18px rgba(0,0,0,.16),
    0 0 15px rgba(0,229,255,.085);
}

.hx-page--home .hx-button.region::before {
  opacity: .64;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(82,220,255,.12), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 62%);
}

.hx-page--home .hx-button.region::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(68,232,255,.44), rgba(255,255,255,.34), rgba(255,99,212,.28), transparent);
}

.hx-page--home .hx-button.region .hx-region-left {
  position: relative;
  z-index: 2;
}

.hx-page--home .hx-button.region .hx-region-layout {
  width: 100%;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}

.hx-page--home .hx-button.region .hx-region-text {
  width: min(100%, 230px);
  max-width: 230px;
  flex: 0 1 auto;
  align-items: center;
  text-align: center;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.hx-page--home .hx-button.region .hx-region-text b {
  color: rgba(249,252,255,.98);
  line-height: 1;
  letter-spacing: -.014em;
  white-space: normal;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.hx-page--home .hx-button.region .hx-region-primary {
  display: block;
  font-size: clamp(14.6px, 3.35vw, 16.5px);
  font-weight: 950;
  color: rgba(249,252,255,.98);
  text-shadow: 0 0 12px rgba(119,221,255,.16);
}

.hx-page--home .hx-button.region .hx-region-store {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 3px 13px;
  border-radius: 999px;
  color: rgba(224,248,255,.94);
  background: linear-gradient(90deg, rgba(22,145,199,.16), rgba(101,71,190,.15));
  border: 1px solid rgba(116,231,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  font-size: 10.7px;
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: 0 0 8px rgba(114,223,255,.13);
}

.hx-page--home .hx-button.region .hx-region-text small {
  margin-top: 4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  color: rgba(218,235,249,.74);
  background: none;
  border: 0;
  font-size: 8.9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .055em;
  opacity: 1;
}

.hx-page--home .hx-button.update-server .hx-update-text small {
  margin-top: 3px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  color: rgba(229,248,255,.87);
  background: linear-gradient(90deg, rgba(25,132,186,.11), rgba(92,67,171,.10));
  border: 1px solid rgba(112,225,255,.13);
  font-size: 8.1px;
  line-height: 1;
  letter-spacing: .025em;
  opacity: 1;
}

.hx-page--home .hx-button.bonus-link {
  width: min(78%, 390px);
  min-height: 66px;
  margin-top: 2px;
  padding: 22px 12px 6px;
  justify-self: center;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.90);
  border-color: rgba(255,221,151,.12);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,204,111,.085), transparent 49%),
    radial-gradient(circle at 84% 80%, rgba(255,78,205,.045), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.074), rgba(255,255,255,.030));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 11px rgba(255,255,255,.03),
    0 6px 14px rgba(0,0,0,.115),
    0 0 9px rgba(255,184,0,.035);
}

.hx-page--home .hx-bonus-main {
  width: min(100%, 250px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.hx-page--home .hx-button.bonus-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,226,148,.42), rgba(255,103,212,.18), transparent);
  box-shadow: 0 0 7px rgba(255,184,0,.12);
}

.hx-page--home .hx-bonus-titleline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  width: 100%;
}

.hx-page--home .hx-bonus-titleline::before,
.hx-page--home .hx-bonus-titleline::after {
  content: "";
  width: 22px;
  height: 1px;
  flex: 0 0 22px;
  opacity: .68;
}

.hx-page--home .hx-bonus-titleline::before {
  background: linear-gradient(90deg, transparent, rgba(255,218,132,.46));
}

.hx-page--home .hx-bonus-titleline::after {
  background: linear-gradient(90deg, rgba(122,225,255,.34), transparent);
}

.hx-page--home .hx-bonus-badge {
  position: absolute;
  top: 7px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 3px 11px;
  transform: translateX(-50%);
  font-size: 7.7px;
  line-height: 1;
  opacity: 1;
  letter-spacing: .08em;
  color: rgba(255,241,192,.82);
  background: rgba(255,184,0,.07);
  border-color: rgba(255,210,112,.12);
}

.hx-page--home .hx-bonus-titleline strong {
  font-size: 14.2px;
  line-height: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 10px rgba(255,255,255,.09);
}

.hx-page--home .hx-bonus-main > small {
  font-size: 8.6px;
  line-height: 1;
  opacity: .72;
}

.hx-page--home .hx-note {
  margin-top: 18px;
  padding-top: 0;
  color: rgba(235,242,255,.78);
  font-size: 12.2px;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .hx-page--home .hx-icon:hover {
    transform: translateY(-1px) scale(1.01);
  }
}

@media (max-width: 430px) {
  .hx-page--home .hx-section {
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .hx-page--home .hx-icon {
    width: 108px;
    height: 108px;
    border-radius: 34px;
  }

  .hx-home-status {
    padding: 7px 12px;
    font-size: 9.7px;
  }

  .hx-page--home .hx-button.connect-server {
    min-height: 61px;
  }

  .hx-page--home .hx-button.region,
  .hx-page--home .hx-button.update-server {
    height: 87px;
    min-height: 87px;
    max-height: 87px;
  }

  .hx-page--home .hx-button.bonus-link {
    width: 80%;
    min-height: 64px;
    padding: 21px 10px 6px;
  }

  .hx-page--home .hx-bonus-main {
    width: min(100%, 238px);
    gap: 3px;
  }

  .hx-page--home .hx-bonus-titleline strong {
    font-size: 14px;
  }

  .hx-page--home .hx-note {
    padding-top: 0;
    font-size: 11.5px;
  }
}

@media (max-width: 360px) {
  .hx-page--home .hx-section {
    padding-top: 24px;
    padding-bottom: 26px;
  }

  .hx-page--home .hx-icon {
    width: 102px;
    height: 102px;
    border-radius: 32px;
  }

  .hx-home-status {
    padding: 7px 11px;
    font-size: 9.2px;
  }

  .hx-page--home .hx-actions {
    gap: 7px;
  }

  .hx-page--home .hx-button.bonus-link {
    width: 88%;
    min-height: 63px;
    padding: 20px 8px 6px;
  }

  .hx-page--home .hx-bonus-main {
    width: min(100%, 224px);
    gap: 3px;
  }

  .hx-page--home .hx-bonus-badge {
    padding: 3px 9px;
    font-size: 7.3px;
  }

  .hx-page--home .hx-bonus-titleline strong {
    font-size: 13.2px;
  }

  .hx-page--home .hx-bonus-main > small {
    font-size: 8.3px;
  }

}

@media (max-width: 560px) and (min-height: 700px) {
  .hx-page--home {
    min-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(106px, calc(env(safe-area-inset-bottom) + 26px)));
  }
}

@media (max-width: 430px) and (min-height: 700px) {
  .hx-page--home {
    min-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(88px, calc(env(safe-area-inset-bottom) + 20px)));
  }
}

/* === Connect page hierarchy polish — 20260711-010 ===
   Scoped to /connect/: calmer hero, clearer journey and balanced benefits. */
.hx-page--connect .hx-connect-hero.hx-connect-compact {
  padding: clamp(40px, 5.2vw, 52px) clamp(18px, 4vw, 34px) clamp(34px, 4.4vw, 44px);
  gap: clamp(16px, 2.2vw, 22px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, .105), transparent 58%),
    radial-gradient(ellipse at 82% 84%, rgba(255, 78, 205, .055), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 72%);
  border-top: 1px solid rgba(190, 238, 255, .09);
}

.hx-page--connect .hx-connect-compact .hx-connect-top {
  padding-top: 0;
}

.hx-page--connect .hx-connect-compact .hx-connect-title {
  max-width: min(100%, 600px);
  font-size: clamp(52px, 7.5vw, 68px);
  line-height: .94;
  letter-spacing: -.032em;
  color: rgba(249, 253, 255, .99);
  text-shadow:
    0 0 14px rgba(190, 247, 255, .28),
    0 0 30px rgba(91, 219, 255, .16),
    0 12px 30px rgba(0, 0, 0, .18);
}

.hx-page--connect .hx-connect-compact .hx-connect-title::before {
  width: min(108%, 560px);
  height: 86px;
  opacity: .60;
}

.hx-page--connect .hx-connect-compact .hx-connect-cta {
  width: min(100%, 520px);
  margin-top: clamp(10px, 1.8vw, 16px);
  gap: clamp(14px, 1.9vw, 18px);
}

.hx-page--connect .hx-connect-compact .hx-connect-cta p {
  color: rgba(221, 249, 255, .80);
  letter-spacing: .18em;
  text-shadow:
    0 0 12px rgba(121, 235, 255, .14),
    0 0 24px rgba(124, 92, 255, .07);
}

.hx-page--connect .hx-connect-compact .hx-contact-button {
  min-height: 64px;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 16px rgba(255, 255, 255, .04),
    0 12px 24px rgba(0, 0, 0, .15);
}

.hx-page--connect .hx-connect-compact .hx-contact-button:hover {
  border-color: rgba(171, 239, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 0 18px rgba(255, 255, 255, .05),
    0 15px 28px rgba(0, 0, 0, .17);
}

.hx-page--connect .hx-process-mini {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin-top: 6px;
}

.hx-page--connect .hx-process-mini span {
  width: 100%;
  min-height: 36px;
  padding: 9px 11px;
  color: rgba(246, 251, 255, .82);
  background:
    linear-gradient(145deg, rgba(255,255,255,.062), rgba(255,255,255,.026));
  border-color: rgba(174, 222, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.hx-page--connect .hx-process-mini b {
  color: rgba(107, 226, 255, .96);
}

.hx-page--connect .hx-process-mini i {
  width: 100%;
  height: 1px;
  border-radius: 0;
  opacity: .90;
  background: linear-gradient(90deg, rgba(0,229,255,.16), rgba(115,226,255,.62), rgba(124,92,255,.22));
}

.hx-page--connect .hx-connect-compact .hx-inner-home {
  min-height: 42px;
  margin-top: 16px;
  padding: 10px 18px;
  color: rgba(240, 248, 255, .86);
  background: rgba(255, 255, 255, .072);
  border-color: rgba(185, 227, 255, .17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 9px 22px rgba(0,0,0,.13);
}

.hx-page--connect .hx-connect-benefits {
  padding-top: clamp(30px, 3.4vw, 38px);
  padding-bottom: clamp(22px, 2.8vw, 30px);
}

.hx-page--connect .hx-connect-benefits-title {
  color: rgba(225, 247, 255, .94);
  letter-spacing: .14em;
  text-shadow:
    0 0 14px rgba(91, 211, 255, .18),
    0 0 26px rgba(124, 92, 255, .08);
}

.hx-page--connect .hx-connect-benefits .hx-feature-grid {
  align-items: stretch;
  gap: 11px;
  margin-top: clamp(20px, 2.4vw, 24px);
}

.hx-page--connect .hx-feature-card {
  border-radius: 23px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 18px rgba(255,255,255,.035),
    0 12px 26px rgba(0,0,0,.20),
    0 0 16px rgba(0,229,255,.045);
}

.hx-page--connect .hx-feature-card.speed {
  border-color: rgba(255,184,0,.27);
}

.hx-page--connect .hx-feature-card.countries {
  border-color: rgba(37,255,156,.20);
}

.hx-page--connect .hx-feature-card.youtube {
  border-color: rgba(255,92,122,.22);
}

.hx-page--connect .hx-feature-pill {
  width: calc(100% - 10px);
  opacity: .92;
}

.hx-page--connect .hx-speed-needle {
  animation-duration: 4.6s;
}

.hx-page--connect .hx-smart-country span {
  animation-duration: 10s;
}

.hx-page--connect .hx-youtube-clean .play,
.hx-page--connect .hx-youtube-clean .ad,
.hx-page--connect .hx-youtube-clean .slash,
.hx-page--connect .hx-youtube-clean .shield {
  animation-duration: 5.6s;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    width: 100%;
    padding: 34px 12px 30px;
    gap: 14px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: clamp(42px, 11.2vw, 50px);
    letter-spacing: -.042em;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title::before {
    height: 58px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-cta {
    margin-top: 8px;
    gap: 13px;
  }

  .hx-page--connect .hx-connect-compact .hx-contact-button {
    min-height: 58px;
    border-radius: 18px;
  }

  .hx-page--connect .hx-process-mini {
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1.12fr) 10px minmax(0, 1fr);
    font-size: 9.2px;
  }

  .hx-page--connect .hx-process-mini span {
    min-height: 32px;
    padding: 8px 5px;
  }

  .hx-page--connect .hx-process-mini b {
    margin-right: 3px;
  }

  .hx-page--connect .hx-connect-compact .hx-inner-home {
    min-height: 40px;
    margin-top: 12px;
    padding: 9px 15px;
    font-size: 13px;
  }

  .hx-page--connect .hx-connect-benefits {
    padding-top: 26px;
    padding-bottom: 22px;
  }

  .hx-page--connect .hx-connect-benefits-title {
    letter-spacing: .11em;
  }
}

@media (max-width: 375px) {
  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: clamp(36px, 10.8vw, 41px);
  }

  .hx-page--connect .hx-process-mini {
    grid-template-columns: minmax(0, 1fr) 7px minmax(0, 1.12fr) 7px minmax(0, 1fr);
    font-size: 8.5px;
  }

  .hx-page--connect .hx-process-mini span {
    padding-inline: 4px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding: 30px 10px 26px;
  }

  .hx-page--connect .hx-connect-compact .hx-connect-title {
    font-size: 40px;
  }

  .hx-page--connect .hx-process-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 9.5px;
  }

  .hx-page--connect .hx-process-mini i {
    display: none;
  }
}

/* === Connect benefits emphasis — 20260711-011 === */
.hx-page--connect .hx-connect-benefits-title {
  font-size: clamp(17px, 2.2vw, 21px);
  color: rgba(235, 252, 255, .98);
  letter-spacing: .125em;
  text-shadow:
    0 0 14px rgba(91, 211, 255, .22),
    0 0 28px rgba(124, 92, 255, .10);
}

.hx-page--connect .hx-connect-benefits .hx-feature-grid {
  gap: 12px;
}

.hx-page--connect .hx-feature-card {
  height: 158px;
  padding: 13px 7px 11px;
  grid-template-rows: 44px minmax(30px, auto) minmax(34px, 1fr) 30px;
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 22px rgba(255,255,255,.045),
    0 14px 30px rgba(0,0,0,.22);
}

.hx-page--connect .hx-feature-card::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  z-index: 1;
  height: 48%;
  border-radius: 22px 22px 55% 55%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.075), transparent);
  opacity: .72;
}

.hx-page--connect .hx-feature-card.speed {
  border-color: rgba(255,184,0,.42);
  background:
    radial-gradient(circle at 50% -4%, rgba(255,184,0,.23), transparent 46%),
    radial-gradient(circle at 12% 92%, rgba(255,136,52,.08), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.145), rgba(255,255,255,.058));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 0 22px rgba(255,184,0,.045),
    0 14px 30px rgba(0,0,0,.22),
    0 0 24px rgba(255,184,0,.14);
}

.hx-page--connect .hx-feature-card.countries {
  border-color: rgba(37,255,156,.34);
  background:
    radial-gradient(circle at 50% -4%, rgba(37,255,156,.17), transparent 46%),
    radial-gradient(circle at 88% 92%, rgba(0,229,255,.075), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 0 22px rgba(37,255,156,.04),
    0 14px 30px rgba(0,0,0,.22),
    0 0 24px rgba(37,255,156,.12);
}

.hx-page--connect .hx-feature-card.youtube {
  border-color: rgba(255,92,132,.36);
  background:
    radial-gradient(circle at 50% -4%, rgba(255,78,120,.18), transparent 46%),
    radial-gradient(circle at 88% 92%, rgba(255,78,205,.08), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 0 22px rgba(255,78,120,.04),
    0 14px 30px rgba(0,0,0,.22),
    0 0 24px rgba(255,78,120,.12);
}

.hx-page--connect .hx-feature-visual {
  transform: translateY(-1px) scale(1.05);
  transform-origin: center;
}

.hx-page--connect .hx-feature-main {
  font-size: 25px;
  color: #ffffff;
  text-shadow:
    0 0 14px rgba(255,255,255,.24),
    0 6px 18px rgba(0,0,0,.15);
}

.hx-page--connect .hx-feature-main small {
  color: rgba(255,255,255,.92);
  opacity: 1;
}

.hx-page--connect .hx-feature-card.youtube .hx-feature-main {
  font-size: 17.5px;
}

.hx-page--connect .hx-feature-label {
  color: rgba(250,252,255,.96);
  line-height: 1.08;
  opacity: 1;
}

.hx-page--connect .hx-feature-pill {
  width: calc(100% - 8px);
  border-color: rgba(255,255,255,.12);
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.hx-page--connect .hx-feature-card.speed .hx-feature-pill {
  color: rgba(255,249,226,.98);
  background: rgba(255,184,0,.18);
  border-color: rgba(255,210,96,.18);
}

.hx-page--connect .hx-feature-card.countries .hx-feature-pill {
  color: rgba(235,255,248,.98);
  background: rgba(37,255,156,.16);
  border-color: rgba(92,255,185,.17);
}

.hx-page--connect .hx-feature-card.youtube .hx-feature-pill {
  color: rgba(255,244,249,.98);
  background: rgba(255,78,120,.17);
  border-color: rgba(255,122,156,.17);
}

@media (max-width: 430px) {
  .hx-page--connect .hx-connect-benefits-title {
    font-size: 14px;
    letter-spacing: .105em;
  }

  .hx-page--connect .hx-connect-benefits .hx-feature-grid {
    gap: 9px;
  }

  .hx-page--connect .hx-feature-card {
    height: 148px;
    padding: 12px 6px 10px;
    grid-template-rows: 42px minmax(28px, auto) minmax(32px, 1fr) 29px;
  }

  .hx-page--connect .hx-feature-visual {
    transform: scale(1.025);
  }

  .hx-page--connect .hx-feature-main {
    font-size: 21px;
  }

  .hx-page--connect .hx-feature-card.youtube .hx-feature-main {
    font-size: 15.5px;
  }
}

@media (max-width: 360px) {
  .hx-page--connect .hx-feature-card {
    height: auto;
    min-height: 112px;
  }

  .hx-page--connect .hx-feature-visual {
    transform: none;
  }
}

/* === Connect benefits motion sync — 20260711-012 ===
   Restores the original 009 animation rhythm and keeps every animated visual
   on its own composited layer to prevent small frame-to-frame jumps. */
.hx-page--connect .hx-feature-card {
  isolation: isolate;
  transform: translateZ(0);
}

.hx-page--connect .hx-feature-visual {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hx-page--connect .hx-speed-needle {
  animation-duration: 3.2s;
  animation-timing-function: ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hx-page--connect .hx-smart-country::before {
  animation-duration: 2.2s;
  animation-timing-function: ease-in-out;
}

.hx-page--connect .hx-smart-country::after {
  animation-duration: 2.8s;
  animation-timing-function: linear;
  will-change: transform;
}

.hx-page--connect .hx-smart-country span {
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hx-page--connect .hx-youtube-clean .play {
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
}

.hx-page--connect .hx-youtube-clean .ad,
.hx-page--connect .hx-youtube-clean .slash,
.hx-page--connect .hx-youtube-clean .shield {
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
}

.hx-page--connect .hx-youtube-clean .play,
.hx-page--connect .hx-youtube-clean .ad,
.hx-page--connect .hx-youtube-clean .slash,
.hx-page--connect .hx-youtube-clean .shield {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--connect .hx-speed-needle,
  .hx-page--connect .hx-smart-country::before,
  .hx-page--connect .hx-smart-country::after,
  .hx-page--connect .hx-smart-country span,
  .hx-page--connect .hx-youtube-clean .play,
  .hx-page--connect .hx-youtube-clean .ad,
  .hx-page--connect .hx-youtube-clean .slash,
  .hx-page--connect .hx-youtube-clean .shield {
    animation: none !important;
    will-change: auto;
  }
}

/* === Smart location status refinement — 20260711-013 === */
.hx-page--connect .hx-status {
  width: min(100%, 390px);
  max-width: 390px;
  height: 40px;
  margin: 0 auto 12px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 50%, rgba(37,255,156,.105), transparent 30%),
    radial-gradient(circle at 88% 50%, rgba(0,229,255,.085), transparent 34%),
    linear-gradient(145deg, rgba(13,27,47,.82), rgba(25,24,53,.76));
  border: 1px solid rgba(154,224,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 14px rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.17),
    0 0 18px rgba(0,229,255,.065);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  contain: paint;
}

.hx-page--connect .hx-status::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  z-index: 3;
  height: 1px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(37,255,156,.85), rgba(0,229,255,.82), rgba(124,92,255,.70));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .72;
  animation: hxStatusProgress 2s linear infinite;
  will-change: transform, opacity;
}

.hx-page--connect .hx-status div {
  padding: 0 16px;
  color: rgba(245,252,255,.94);
  font-size: 12.5px;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -.01em;
  text-shadow: 0 0 11px rgba(255,255,255,.11);
  transform: translate3d(0, 6px, 0);
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hx-page--connect .hx-scanner {
  margin-top: 0;
}

@keyframes statusSwitch {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  4%, 24% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  29%, 100% {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes hxStatusProgress {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  8% {
    opacity: .72;
  }
  88% {
    opacity: .72;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@media (max-width: 430px) {
  .hx-page--connect .hx-status {
    width: min(100%, 344px);
    height: 39px;
    margin-bottom: 11px;
    border-radius: 16px;
  }

  .hx-page--connect .hx-status div {
    padding-inline: 12px;
    font-size: 11.5px;
  }
}

@media (max-width: 360px) {
  .hx-page--connect .hx-status {
    width: min(100%, 306px);
  }

  .hx-page--connect .hx-status div {
    font-size: 10.8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--connect .hx-status::after {
    display: none;
    animation: none;
  }

  .hx-page--connect .hx-status div {
    will-change: auto;
  }
}

/* === Smart location status visual polish — 20260711-014 === */
.hx-page--connect .hx-status {
  width: min(100%, 400px);
  max-width: 400px;
  height: 42px;
  margin-bottom: 13px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 50%, rgba(37,255,156,.13), transparent 30%),
    radial-gradient(circle at 92% 50%, rgba(124,92,255,.105), transparent 34%),
    linear-gradient(145deg, rgba(13,28,48,.88), rgba(26,24,56,.82));
  border-color: rgba(171,229,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 16px rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.16),
    0 0 18px rgba(0,229,255,.055),
    0 0 22px rgba(124,92,255,.035);
}

.hx-page--connect .hx-status::after {
  content: none;
  display: none;
  animation: hxHomeQuickBarExit .52s cubic-bezier(.2, .8, .2, 1) both;
}

.hx-page--connect .hx-status div {
  gap: 9px;
  padding: 0 15px;
  color: rgba(247,252,255,.96);
  font-size: 12.4px;
  font-weight: 830;
  letter-spacing: -.012em;
  transform: translate3d(0, 4px, 0);
  text-shadow: 0 0 10px rgba(255,255,255,.09);
}

.hx-page--connect .hx-status-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(239,255,250,.96);
  font-size: 12px;
  line-height: 1;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(145deg, rgba(37,255,156,.19), rgba(0,229,255,.10));
  border: 1px solid rgba(92,255,185,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 0 12px rgba(37,255,156,.09);
}

.hx-page--connect .hx-status div:nth-child(1) .hx-status-icon {
  color: #39f3ad;
  font-size: 15px;
  text-shadow: 0 0 9px rgba(57,243,173,.64);
}

.hx-page--connect .hx-status div:nth-child(2) .hx-status-icon {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(145deg, rgba(0,229,255,.17), rgba(47,112,255,.13));
  border-color: rgba(82,222,255,.16);
}

.hx-page--connect .hx-status div:nth-child(3) .hx-status-icon {
  color: rgba(235,230,255,.98);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(145deg, rgba(124,92,255,.22), rgba(0,229,255,.09));
  border-color: rgba(158,140,255,.17);
}

.hx-page--connect .hx-status div:nth-child(4) .hx-status-icon {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 38%),
    linear-gradient(145deg, rgba(255,184,0,.22), rgba(255,78,205,.10));
  border-color: rgba(255,205,82,.16);
}

@keyframes statusSwitch {
  0% {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }
  4%, 24% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  29%, 100% {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
}

@media (max-width: 430px) {
  .hx-page--connect .hx-status {
    width: min(100%, 348px);
    height: 41px;
    border-radius: 18px;
  }

  .hx-page--connect .hx-status div {
    gap: 7px;
    padding-inline: 11px;
    font-size: 11.2px;
  }

  .hx-page--connect .hx-status-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 8px;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .hx-page--connect .hx-status {
    width: min(100%, 310px);
  }

  .hx-page--connect .hx-status div {
    gap: 6px;
    padding-inline: 9px;
    font-size: 10.4px;
  }

  .hx-page--connect .hx-status-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
}

/* === Smart location compact layout — 20260711-015 ===
   The redundant route control was removed from the HTML. The remaining
   scanner, flags and summary are resized into one compact visual sequence. */
.hx-page--connect .hx-smart-location-section {
  padding-bottom: 36px;
  box-shadow: inset 0 -1px 0 rgba(190, 238, 255, .075);
}

.hx-page--connect .hx-status {
  width: min(100%, 380px);
  max-width: 380px;
  height: 40px;
  margin-bottom: 11px;
  border-radius: 18px;
}

.hx-page--connect .hx-status-icon {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  border-radius: 8px;
}

.hx-page--connect .hx-scanner {
  width: 158px;
  height: 158px;
  margin: 1px auto 10px;
}

.hx-page--connect .hx-ring:nth-child(2) {
  inset: 16px;
}

.hx-page--connect .hx-ring:nth-child(3) {
  inset: 32px;
}

.hx-page--connect .hx-rocket-orbit span {
  font-size: 24px;
}

.hx-page--connect .hx-core {
  width: 88px;
  height: 88px;
}

.hx-page--connect .hx-core span {
  font-size: 40px;
}

.hx-page--connect .hx-flags {
  margin-top: 4px;
  padding-block: 2px;
}

.hx-page--connect .hx-flags-track {
  gap: 8px;
}

.hx-page--connect .hx-flags-track span {
  min-width: 46px;
  height: 44px;
  padding-inline: 8px;
  border-radius: 14px;
  font-size: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hx-page--connect .hx-bottom {
  margin-top: 15px;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-smart-location-section {
    padding-bottom: 32px;
  }

  .hx-page--connect .hx-status {
    width: min(100%, 336px);
    height: 39px;
    margin-bottom: 10px;
    border-radius: 17px;
  }

  .hx-page--connect .hx-scanner {
    width: 150px;
    height: 150px;
    margin-bottom: 9px;
  }

  .hx-page--connect .hx-ring:nth-child(2) {
    inset: 15px;
  }

  .hx-page--connect .hx-ring:nth-child(3) {
    inset: 30px;
  }

  .hx-page--connect .hx-core {
    width: 84px;
    height: 84px;
  }

  .hx-page--connect .hx-core span {
    font-size: 38px;
  }

  .hx-page--connect .hx-flags-track span {
    min-width: 43px;
    height: 42px;
    padding-inline: 7px;
    border-radius: 13px;
    font-size: 23px;
  }

  .hx-page--connect .hx-bottom {
    margin-top: 10px;
    padding: 7px 11px;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .hx-page--connect .hx-smart-location-section {
    padding-bottom: 28px;
  }

  .hx-page--connect .hx-status {
    width: min(100%, 300px);
  }

  .hx-page--connect .hx-scanner {
    width: 142px;
    height: 142px;
    margin-bottom: 8px;
  }

  .hx-page--connect .hx-ring:nth-child(2) {
    inset: 14px;
  }

  .hx-page--connect .hx-ring:nth-child(3) {
    inset: 28px;
  }

  .hx-page--connect .hx-core {
    width: 80px;
    height: 80px;
  }

  .hx-page--connect .hx-core span {
    font-size: 36px;
  }

  .hx-page--connect .hx-flags-track {
    gap: 7px;
  }

  .hx-page--connect .hx-flags-track span {
    min-width: 41px;
    height: 40px;
    padding-inline: 6px;
    border-radius: 12px;
    font-size: 22px;
  }

  .hx-page--connect .hx-bottom {
    font-size: 10.5px;
  }
}

/* === Smart scanner scale and glow spacing — 20260711-016 === */
.hx-page--connect .hx-status {
  margin-bottom: 18px;
}

.hx-page--connect .hx-scanner {
  width: 178px;
  height: 178px;
  margin: 0 auto 20px;
}

.hx-page--connect .hx-scanner::before {
  inset: 10px;
  background:
    radial-gradient(circle, rgba(0,229,255,.20), transparent 58%),
    radial-gradient(circle at 55% 62%, rgba(255,78,205,.13), transparent 56%);
  box-shadow:
    0 0 24px rgba(0,229,255,.13),
    inset 0 0 28px rgba(255,255,255,.055);
}

.hx-page--connect .hx-ring {
  box-shadow:
    inset 0 0 15px rgba(0,229,255,.085),
    0 0 12px rgba(0,229,255,.075);
}

.hx-page--connect .hx-ring:nth-child(2) {
  inset: 18px;
}

.hx-page--connect .hx-ring:nth-child(3) {
  inset: 36px;
}

.hx-page--connect .hx-rocket-orbit span {
  font-size: 26px;
}

.hx-page--connect .hx-core {
  width: 98px;
  height: 98px;
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.15),
    inset 0 0 34px rgba(0,229,255,.09),
    0 0 25px rgba(0,229,255,.22),
    0 0 34px rgba(124,92,255,.12);
}

.hx-page--connect .hx-core span {
  font-size: 44px;
}

.hx-page--connect .hx-flags {
  margin-top: 0;
}

.hx-page--connect .hx-bottom {
  margin-top: 14px;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-status {
    margin-bottom: 16px;
  }

  .hx-page--connect .hx-scanner {
    width: 166px;
    height: 166px;
    margin-bottom: 18px;
  }

  .hx-page--connect .hx-ring:nth-child(2) {
    inset: 17px;
  }

  .hx-page--connect .hx-ring:nth-child(3) {
    inset: 34px;
  }

  .hx-page--connect .hx-core {
    width: 92px;
    height: 92px;
  }

  .hx-page--connect .hx-core span {
    font-size: 41px;
  }

  .hx-page--connect .hx-bottom {
    margin-top: 12px;
  }
}

@media (max-width: 360px) {
  .hx-page--connect .hx-status {
    margin-bottom: 14px;
  }

  .hx-page--connect .hx-scanner {
    width: 154px;
    height: 154px;
    margin-bottom: 16px;
  }

  .hx-page--connect .hx-ring:nth-child(2) {
    inset: 15px;
  }

  .hx-page--connect .hx-ring:nth-child(3) {
    inset: 30px;
  }

  .hx-page--connect .hx-core {
    width: 86px;
    height: 86px;
  }

  .hx-page--connect .hx-core span {
    font-size: 38px;
  }
}

/* === Contained scanner radar — 20260711-017 === */
.hx-page--connect .hx-ring {
  animation-name: hxScannerRadarContained;
  animation-duration: 2.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.hx-page--connect .hx-scanner::before {
  box-shadow:
    0 0 14px rgba(0,229,255,.11),
    inset 0 0 26px rgba(255,255,255,.05);
}

@keyframes hxScannerRadarContained {
  0% {
    transform: scale(.88);
    opacity: .82;
  }
  100% {
    transform: scale(1.06);
    opacity: 0;
  }
}

/* === Three-message smart status cycle — 20260711-018 === */
.hx-page--connect .hx-status div:nth-child(1) {
  animation: statusSwitchThree 6s cubic-bezier(.4, 0, .2, 1) infinite 0s;
}

.hx-page--connect .hx-status div:nth-child(2) {
  animation: statusSwitchThree 6s cubic-bezier(.4, 0, .2, 1) infinite 2s;
}

.hx-page--connect .hx-status div:nth-child(3) {
  animation: statusSwitchThree 6s cubic-bezier(.4, 0, .2, 1) infinite 4s;
}

.hx-page--connect .hx-status div:nth-child(1) .hx-status-icon {
  color: inherit;
  font-size: 12px;
  text-shadow: none;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(145deg, rgba(0,229,255,.17), rgba(47,112,255,.13));
  border-color: rgba(82,222,255,.16);
}

.hx-page--connect .hx-status div:nth-child(2) .hx-status-icon {
  color: rgba(235,230,255,.98);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(145deg, rgba(124,92,255,.22), rgba(0,229,255,.09));
  border-color: rgba(158,140,255,.17);
}

.hx-page--connect .hx-status div:nth-child(3) .hx-status-icon {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 38%),
    linear-gradient(145deg, rgba(255,184,0,.22), rgba(255,78,205,.10));
  border-color: rgba(255,205,82,.16);
}

@keyframes statusSwitchThree {
  0% {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
  }
  5%, 30% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  36%, 100% {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
}

/* === Premium smart scanner — 20260711-019 === */
.hx-page--connect .hx-scanner {
  isolation: isolate;
}

.hx-page--connect .hx-scanner::before {
  inset: 13px;
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,.11), transparent 28%),
    radial-gradient(circle, rgba(0,229,255,.15), transparent 59%),
    radial-gradient(circle at 58% 68%, rgba(255,78,205,.095), transparent 55%);
  box-shadow:
    inset 0 0 28px rgba(0,229,255,.055),
    inset 0 0 42px rgba(124,92,255,.035);
}

.hx-page--connect .hx-ring {
  border-width: 1px;
  border-color: rgba(70,220,255,.30);
  box-shadow:
    inset 0 0 13px rgba(0,229,255,.055),
    0 0 9px rgba(0,229,255,.055);
}

.hx-page--connect .hx-ring:nth-child(2) {
  border-color: rgba(139,111,255,.30);
}

.hx-page--connect .hx-ring:nth-child(3) {
  border-color: rgba(255,94,205,.23);
}

.hx-page--connect .hx-rocket-orbit {
  animation-duration: 7.2s;
}

.hx-page--connect .hx-rocket-orbit span {
  top: 1px;
  font-size: 24px;
  filter:
    drop-shadow(0 0 7px rgba(0,229,255,.54))
    drop-shadow(0 0 9px rgba(255,184,0,.22));
}

.hx-page--connect .hx-core {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 20%, rgba(255,255,255,.34), transparent 30%),
    radial-gradient(circle at 68% 78%, rgba(255,78,205,.14), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(0,229,255,.18), transparent 62%),
    linear-gradient(145deg, rgba(31,175,208,.36), rgba(104,83,196,.30));
  border: 1px solid rgba(189,241,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -16px 32px rgba(31,20,74,.12),
    inset 0 0 26px rgba(255,255,255,.08),
    0 0 22px rgba(0,229,255,.18),
    0 0 30px rgba(124,92,255,.10);
}

.hx-page--connect .hx-core::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(221,249,255,.12);
  box-shadow: inset 0 0 16px rgba(255,255,255,.045);
}

.hx-page--connect .hx-core::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 10%;
  height: 28%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.20), transparent 72%);
  opacity: .76;
}

.hx-page--connect .hx-core-globe {
  position: relative;
  z-index: 3;
  width: 54px;
  height: 54px;
  overflow: visible;
  fill: none;
  color: rgba(224,252,255,.98);
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,.34))
    drop-shadow(0 0 10px rgba(0,229,255,.32));
}

@keyframes hxScannerRadarContained {
  0% {
    transform: scale(.91);
    opacity: .68;
  }
  66% {
    opacity: .24;
  }
  100% {
    transform: scale(1.045);
    opacity: 0;
  }
}

@media (max-width: 430px) {
  .hx-page--connect .hx-core-globe {
    width: 49px;
    height: 49px;
    stroke-width: 2.5;
  }

  .hx-page--connect .hx-rocket-orbit span {
    font-size: 23px;
  }
}

@media (max-width: 360px) {
  .hx-page--connect .hx-core-globe {
    width: 45px;
    height: 45px;
  }

  .hx-page--connect .hx-rocket-orbit span {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--connect .hx-rocket-orbit,
  .hx-page--connect .hx-ring,
  .hx-page--connect .hx-core {
    animation: none !important;
  }
}

/* === Smart scanner HUD — 20260711-020 === */
.hx-page--connect .hx-status {
  margin-bottom: 18px;
}

.hx-page--connect .hx-scanner {
  width: 184px;
  height: 184px;
  margin: 0 auto 22px;
}

.hx-page--connect .hx-scan-field {
  position: absolute;
  inset: 5px;
  z-index: 0;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,229,255,.07), transparent 57%),
    radial-gradient(circle at 52% 64%, rgba(255,78,205,.055), transparent 60%),
    rgba(7,18,35,.12);
  border: 1px solid rgba(89,222,255,.085);
  box-shadow: inset 0 0 34px rgba(0,229,255,.045);
  contain: paint;
}

.hx-page--connect .hx-scan-field::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0 78%,
    rgba(0,229,255,.025) 82%,
    rgba(0,229,255,.16) 94%,
    rgba(115,241,255,.30) 99%,
    transparent 100%
  );
  animation: hxScanSweep 6.8s linear infinite;
  will-change: transform;
}

.hx-page--connect .hx-scan-field::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(transparent 49.4%, rgba(116,232,255,.16) 49.8% 50.2%, transparent 50.6%),
    linear-gradient(90deg, transparent 49.4%, rgba(116,232,255,.16) 49.8% 50.2%, transparent 50.6%);
}

.hx-page--connect .hx-scanner::before {
  inset: 16px;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.10), transparent 25%),
    radial-gradient(circle, rgba(0,229,255,.11), transparent 58%),
    radial-gradient(circle at 62% 70%, rgba(255,78,205,.075), transparent 55%);
  box-shadow: inset 0 0 30px rgba(0,229,255,.04);
}

.hx-page--connect .hx-ring {
  border-color: rgba(83,225,255,.32);
  box-shadow:
    inset 0 0 11px rgba(0,229,255,.045),
    0 0 6px rgba(0,229,255,.045);
  animation-name: hxScannerHudPulse;
  animation-duration: 3.6s;
  animation-timing-function: ease-in-out;
}

.hx-page--connect .hx-ring:nth-child(2) {
  inset: 20px;
  border-color: rgba(141,116,255,.31);
  animation-delay: .55s;
}

.hx-page--connect .hx-ring:nth-child(3) {
  inset: 40px;
  border-color: rgba(255,99,211,.23);
  animation-delay: 1.1s;
}

.hx-page--connect .hx-scan-node {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  background: #73f4ff;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    0 0 0 4px rgba(0,229,255,.055),
    0 0 10px rgba(0,229,255,.42);
  animation: hxScanNode 2.8s ease-in-out infinite;
}

.hx-page--connect .hx-scan-node.node-a {
  top: 17%;
  left: 22%;
}

.hx-page--connect .hx-scan-node.node-b {
  top: 51%;
  right: 5.5%;
  background: #a998ff;
  box-shadow:
    0 0 0 4px rgba(124,92,255,.055),
    0 0 10px rgba(124,92,255,.42);
  animation-delay: .9s;
}

.hx-page--connect .hx-scan-node.node-c {
  bottom: 11%;
  left: 31%;
  background: #ff82da;
  box-shadow:
    0 0 0 4px rgba(255,78,205,.05),
    0 0 10px rgba(255,78,205,.38);
  animation-delay: 1.8s;
}

.hx-page--connect .hx-rocket-orbit {
  animation-duration: 8s;
}

.hx-page--connect .hx-rocket-orbit span {
  top: 3px;
  font-size: 23px;
  filter:
    drop-shadow(0 0 6px rgba(0,229,255,.46))
    drop-shadow(0 0 8px rgba(255,184,0,.18));
}

.hx-page--connect .hx-core {
  width: 102px;
  height: 102px;
  border-color: rgba(190,242,255,.17);
  background:
    radial-gradient(circle at 32% 18%, rgba(255,255,255,.38), transparent 27%),
    radial-gradient(circle at 70% 80%, rgba(255,78,205,.15), transparent 43%),
    radial-gradient(circle at 50% 48%, rgba(0,229,255,.20), transparent 60%),
    linear-gradient(145deg, rgba(25,184,216,.38), rgba(99,78,197,.33));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -18px 34px rgba(31,20,74,.13),
    inset 0 0 28px rgba(255,255,255,.085),
    0 0 19px rgba(0,229,255,.16),
    0 0 27px rgba(124,92,255,.09);
}

.hx-page--connect .hx-core::before {
  inset: 7px;
  border-color: rgba(221,249,255,.15);
}

.hx-page--connect .hx-core-globe {
  width: 57px;
  height: 57px;
  color: rgba(224,252,255,.98);
  stroke: url(#hxGlobeStroke);
  stroke-width: 2.25;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.32))
    drop-shadow(0 0 9px rgba(0,229,255,.26));
}

@keyframes hxScanSweep {
  to { transform: rotate(360deg); }
}

@keyframes hxScannerHudPulse {
  0%, 100% {
    transform: scale(.965);
    opacity: .35;
  }
  50% {
    transform: scale(1.015);
    opacity: .78;
  }
}

@keyframes hxScanNode {
  0%, 100% {
    transform: scale(.86);
    opacity: .48;
  }
  50% {
    transform: scale(1.08);
    opacity: .96;
  }
}

@media (max-width: 430px) {
  .hx-page--connect .hx-status {
    margin-bottom: 16px;
  }

  .hx-page--connect .hx-scanner {
    width: 168px;
    height: 168px;
    margin-bottom: 19px;
  }

  .hx-page--connect .hx-ring:nth-child(2) {
    inset: 18px;
  }

  .hx-page--connect .hx-ring:nth-child(3) {
    inset: 36px;
  }

  .hx-page--connect .hx-core {
    width: 94px;
    height: 94px;
  }

  .hx-page--connect .hx-core-globe {
    width: 52px;
    height: 52px;
  }

  .hx-page--connect .hx-rocket-orbit span {
    font-size: 22px;
  }
}

@media (max-width: 360px) {
  .hx-page--connect .hx-status {
    margin-bottom: 14px;
  }

  .hx-page--connect .hx-scanner {
    width: 156px;
    height: 156px;
    margin-bottom: 16px;
  }

  .hx-page--connect .hx-ring:nth-child(2) {
    inset: 16px;
  }

  .hx-page--connect .hx-ring:nth-child(3) {
    inset: 32px;
  }

  .hx-page--connect .hx-core {
    width: 88px;
    height: 88px;
  }

  .hx-page--connect .hx-core-globe {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--connect .hx-scan-field::before,
  .hx-page--connect .hx-scan-node,
  .hx-page--connect .hx-rocket-orbit,
  .hx-page--connect .hx-ring {
    animation: none !important;
  }
}

/* === Smart location heading cleanup — 20260711-021 === */
.hx-page--connect .hx-smart-location-section {
  padding-top: 32px;
}

.hx-page--connect .hx-smart-location-section > .hx-title {
  max-width: 500px;
  margin: 0 auto;
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-shadow:
    0 0 14px rgba(0,229,255,.30),
    0 0 26px rgba(124,92,255,.13);
}

.hx-page--connect .hx-smart-location-section > .hx-title span {
  max-width: 460px;
  margin: 9px auto 0;
  font-size: 22px;
  line-height: 1.13;
  letter-spacing: -.012em;
  color: rgba(224,250,255,.94);
}

.hx-page--connect .hx-smart-location-section > .hx-text {
  max-width: 468px;
  margin-top: 17px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.52;
  color: rgba(247,250,255,.90);
}

@media (max-width: 430px) {
  .hx-page--connect .hx-smart-location-section {
    padding-top: 27px;
  }

  .hx-page--connect .hx-smart-location-section > .hx-title {
    font-size: 32px;
  }

  .hx-page--connect .hx-smart-location-section > .hx-title span {
    max-width: 340px;
    margin-top: 7px;
    font-size: 18px;
  }

  .hx-page--connect .hx-smart-location-section > .hx-text {
    max-width: 342px;
    margin-top: 14px;
    margin-bottom: 16px;
    font-size: 13.4px;
    line-height: 1.50;
  }
}

@media (max-width: 360px) {
  .hx-page--connect .hx-smart-location-section {
    padding-top: 21px;
  }

  .hx-page--connect .hx-smart-location-section > .hx-title {
    font-size: 29px;
  }

  .hx-page--connect .hx-smart-location-section > .hx-title span {
    font-size: 16.5px;
  }

  .hx-page--connect .hx-smart-location-section > .hx-text {
    font-size: 12.8px;
    line-height: 1.44;
  }
}

/* === Site-wide mobile final polish — 20260711-022 === */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a,
button {
  touch-action: manipulation;
}

img,
svg {
  max-width: 100%;
}

@media (max-width: 430px) {
  .hx-site {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: calc(max(68px, env(safe-area-inset-bottom)) + 20px);
    padding-left: max(8px, env(safe-area-inset-left));
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .hx-page {
    width: 100%;
    max-width: 100%;
    border-radius: 28px;
  }

  .hx-section {
    padding-right: 14px;
    padding-left: 14px;
  }

  .hx-button,
  .hx-back-link,
  button {
    min-height: 44px;
  }

  .hx-actions,
  .hx-grid,
  .hx-feature-grid {
    max-width: 100%;
  }

  .hx-title,
  .hx-text,
  .hx-card,
  .hx-feature-card {
    min-width: 0;
  }

  .hx-page--home .hx-title {
    font-size: 32px;
  }

  .hx-page--home .hx-title span {
    font-size: 20px;
    line-height: 1.12;
  }

  .hx-page--home .hx-text {
    max-width: 340px;
    font-size: 13.5px;
  }

  .hx-page--appstore .hx-appstore-image-button img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hx-image-lightbox__panel {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
  }
}

@media (max-width: 375px) {
  .hx-site {
    padding-right: max(6px, env(safe-area-inset-right));
    padding-left: max(6px, env(safe-area-inset-left));
  }

  .hx-page {
    border-radius: 25px;
  }

  .hx-section {
    padding-right: 12px;
    padding-left: 12px;
  }

  .hx-page--home .hx-title {
    font-size: 30px;
  }

  .hx-page--home .hx-title span {
    font-size: 18px;
  }
}

@media (max-width: 430px) and (pointer: coarse) {
  .hx-page {
    will-change: auto;
  }

  .hx-orb {
    filter: blur(14px);
  }

  .hx-flags-track span,
  .hx-feature-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .hx-page--connect .hx-scan-node,
  .hx-page--connect .hx-core {
    animation: none;
  }

  .hx-page--connect .hx-ring {
    animation-duration: 4.8s;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hx-site {
    padding-top: max(6px, env(safe-area-inset-top));
  }

  .hx-page--home .hx-section {
    padding-top: 20px;
    padding-bottom: 22px;
  }
}

/* Update Server: six-step photo guide */
.hx-page--update {
  max-width: 1120px;
  overflow: clip;
}

.hx-page--update .hx-update-guide {
  display: grid;
  gap: clamp(18px, 2.8vw, 30px);
  padding: clamp(28px, 4.6vw, 58px);
}

.hx-update-guide-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(9px, 1.5vw, 15px);
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  isolation: isolate;
}

.hx-update-guide-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 24px;
  left: 50%;
  width: min(94vw, 760px);
  height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(62,196,255,.16), rgba(112,79,225,.07) 48%, transparent 72%);
  pointer-events: none;
}

.hx-page--update .hx-update-guide .hx-update-hero-icon {
  width: clamp(72px, 9vw, 96px);
  height: clamp(72px, 9vw, 96px);
  margin: 0;
  border-radius: clamp(23px, 3vw, 30px);
}

.hx-page--update .hx-update-guide .hx-update-hero-icon::before {
  animation: none;
}

.hx-page--update .hx-update-guide .hx-update-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  padding: 9px 15px 9px 12px;
  overflow: hidden;
  color: rgba(225,248,255,.92);
  letter-spacing: .11em;
  background:
    radial-gradient(circle at 20% 0%, rgba(132,231,255,.17), transparent 45%),
    linear-gradient(135deg, rgba(18,117,164,.20), rgba(103,72,184,.14));
  border-color: rgba(119,224,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 7px 20px rgba(0,0,0,.14),
    0 0 18px rgba(43,201,255,.07);
  isolation: isolate;
}

.hx-page--update .hx-update-guide .hx-update-kicker::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120%;
  left: -38%;
  width: 32%;
  height: 340%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(220,250,255,.24), transparent);
  animation: hx-update-kicker-shine 5.2s ease-in-out infinite;
}

.hx-update-kicker-dot {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #68e7ff;
  box-shadow: 0 0 0 4px rgba(69,216,255,.09), 0 0 11px rgba(75,223,255,.62);
  animation: hx-update-kicker-pulse 2.8s ease-in-out infinite;
}

@keyframes hx-update-kicker-shine {
  0%, 64% { left: -38%; opacity: 0; }
  70% { opacity: .82; }
  88%, 100% { left: 112%; opacity: 0; }
}

@keyframes hx-update-kicker-pulse {
  0%, 100% { opacity: .72; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

.hx-page--update .hx-update-guide .hx-title {
  max-width: 720px;
  margin: 0;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -.045em;
  color: rgba(250,253,255,.99);
  text-shadow:
    0 0 18px rgba(184,236,255,.18),
    0 18px 46px rgba(0,0,0,.28);
}

.hx-page--update .hx-update-guide .hx-title span {
  max-width: 620px;
  margin: clamp(11px, 1.8vw, 18px) auto 0;
  color: rgba(210,243,255,.94);
  font-size: clamp(20px, 3.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.hx-page--update .hx-update-guide .hx-text {
  max-width: 680px;
  margin: 0;
  color: rgba(233,243,255,.76);
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.5;
}

.hx-update-progress-panel {
  --hx-update-progress-ratio: .16666;
  position: sticky;
  z-index: 30;
  top: max(10px, env(safe-area-inset-top));
  justify-self: center;
  width: min(100%, 540px);
  margin: -2px auto 0;
  border-radius: 22px;
  overflow: hidden;
  overflow-anchor: none;
  color: rgba(241,251,255,.96);
  background:
    radial-gradient(circle at 8% 0%, rgba(66,218,255,.15), transparent 34%),
    radial-gradient(circle at 94% 100%, rgba(162,91,244,.17), transparent 38%),
    linear-gradient(145deg, #132c43, #211c48 72%);
  border: 1px solid rgba(142,225,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 28px rgba(0,0,0,.24);
}

.hx-update-progress-panel::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 16%;
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100,230,255,.78), rgba(201,145,255,.62), transparent);
  pointer-events: none;
}

.hx-update-home-float {
  position: fixed;
  z-index: 42;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 13px 9px 11px;
  border: 1px solid rgba(174,225,255,.16);
  border-radius: 999px;
  color: rgba(236,248,255,.78);
  background: linear-gradient(145deg, rgba(18,42,63,.94), rgba(35,29,67,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 22px rgba(0,0,0,.24);
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    visibility 0s linear 180ms;
}

.hx-update-home-float.is-visible {
  opacity: .82;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.hx-update-home-float svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hx-update-home-float:hover,
.hx-update-home-float:focus-visible {
  color: rgba(255,255,255,.97);
  border-color: rgba(112,225,255,.38);
  opacity: 1;
}

.hx-update-home-float:focus-visible {
  outline: 2px solid rgba(108,225,255,.76);
  outline-offset: 3px;
}

.hx-update-home-float:active {
  transform: translateY(1px) scale(.98);
}

body.hx-lightbox-open .hx-update-home-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hx-update-progress-summary {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 68px;
  padding: 10px 17px;
  color: inherit;
  text-align: left;
}

.hx-update-progress-label {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  column-gap: 5px;
  white-space: nowrap;
  color: rgba(205,239,252,.75);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hx-update-progress-label > span {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: rgba(130,225,252,.72);
}

.hx-update-progress-label strong {
  color: rgba(249,253,255,.99);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .02em;
}

.hx-update-progress-label small {
  color: rgba(198,221,239,.58);
  padding-bottom: 2px;
  font-size: 8px;
  font-weight: 800;
}

.hx-update-progress-content {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.hx-update-progress-title {
  overflow: hidden;
  color: rgba(235,248,255,.90);
  font-size: clamp(11px, 1.7vw, 13px);
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hx-update-progress-track {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(3,12,29,.62);
  border: 1px solid rgba(151,218,255,.10);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.34);
}

.hx-update-progress-track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(14.285714% - 1px),
    rgba(209,239,255,.22) calc(14.285714% - 1px) 14.285714%
  );
  pointer-events: none;
}

.hx-update-progress-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--hx-update-progress-ratio));
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, #41dff4, #6c9cff 58%, #bd72ed);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}

.hx-update-steps {
  position: relative;
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  width: min(100%, 780px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.hx-update-step {
  position: relative;
  display: grid;
  gap: clamp(12px, 2vw, 17px);
  scroll-margin-top: 18px;
  padding: clamp(16px, 2.7vw, 24px);
  border-radius: clamp(22px, 3vw, 28px);
  text-align: left;
  background:
    radial-gradient(circle at 10% 0%, rgba(52,196,255,.12), transparent 32%),
    radial-gradient(circle at 92% 100%, rgba(219,76,255,.06), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  border: 1px solid rgba(180,226,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 18px 44px rgba(0,0,0,.18),
    0 0 24px rgba(47,190,255,.035);
  overflow: hidden;
}

.hx-update-step::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.055), transparent 26%);
}

.hx-update-step-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.hx-update-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  color: rgba(241,252,255,.98);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .055em;
  background:
    radial-gradient(circle at 34% 20%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(145deg, rgba(27,180,235,.34), rgba(108,74,215,.31));
  border: 1px solid rgba(144,232,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 20px rgba(38,208,255,.10);
}

.hx-update-step-kicker {
  display: block;
  margin-bottom: 4px;
  color: rgba(129,224,255,.76);
  font-size: clamp(9px, 1.2vw, 11px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hx-update-step h2 {
  margin: 0;
  color: rgba(250,252,255,.98);
  font-size: clamp(21px, 3.1vw, 30px);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hx-update-step > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(229,240,255,.80);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: clamp(14px, 1.9vw, 17px);
  font-weight: 560;
  line-height: 1.5;
  letter-spacing: .006em;
  text-wrap: pretty;
}

.hx-update-step-alert {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 12px;
  color: rgba(255,225,167,.88);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: .006em;
  background: rgba(255,185,62,.065);
  border: 1px solid rgba(255,207,111,.13);
}

.hx-update-step-alert b {
  font-weight: 820;
}

.hx-update-step--warning {
  border-color: rgba(255,207,111,.18);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,192,71,.12), transparent 32%),
    linear-gradient(145deg, rgba(255,233,185,.075), rgba(255,255,255,.032));
}

.hx-update-step--warning .hx-update-step-number {
  color: rgba(255,230,176,.98);
  background: linear-gradient(145deg, rgba(255,185,62,.24), rgba(144,82,148,.18));
  border-color: rgba(255,208,112,.20);
}

.hx-update-step--success {
  border-color: rgba(78,236,169,.17);
  background:
    radial-gradient(circle at 10% 0%, rgba(65,235,172,.11), transparent 32%),
    linear-gradient(145deg, rgba(194,255,230,.07), rgba(255,255,255,.032));
}

.hx-update-step--success .hx-update-step-number {
  background: linear-gradient(145deg, rgba(41,214,165,.28), rgba(71,112,203,.25));
  border-color: rgba(90,239,185,.20);
}

.hx-update-step--success .hx-update-step-alert {
  color: rgba(184,255,225,.90);
  background: rgba(47,222,160,.065);
  border-color: rgba(91,237,185,.14);
}

.hx-update-photo-button {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 590px);
  margin: 0 auto;
  padding: clamp(7px, 1.2vw, 11px);
  color: inherit;
  font: inherit;
  border-radius: clamp(19px, 2.5vw, 24px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(70,119,213,.07)),
    rgba(5,11,28,.48);
  border: 1px solid rgba(195,227,255,.15);
  box-shadow: 0 16px 38px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.10);
  cursor: zoom-in;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hx-update-photo-button img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 2vw, 18px);
  background: #080d2d;
}

.hx-update-photo-label {
  position: absolute;
  right: clamp(14px, 2vw, 20px);
  bottom: clamp(14px, 2vw, 20px);
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  color: rgba(246,251,255,.90);
  font-size: 11px;
  font-weight: 850;
  background: rgba(5,10,27,.72);
  border: 1px solid rgba(202,233,255,.18);
  box-shadow: 0 8px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
}

@media (hover: hover) and (pointer: fine) {
  .hx-update-photo-button:hover {
    transform: translateY(-2px);
    border-color: rgba(124,225,255,.32);
    box-shadow: 0 20px 46px rgba(0,0,0,.26), 0 0 26px rgba(47,199,255,.07), inset 0 1px 0 rgba(255,255,255,.12);
  }
}

.hx-update-photo-button:active {
  transform: scale(.995);
}

.hx-update-photo-button:focus-visible {
  outline: 2px solid rgba(132,231,255,.78);
  outline-offset: 4px;
}

.hx-update-complete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: min(100%, 680px);
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: 22px;
  text-align: left;
  color: rgba(240,253,248,.94);
  background:
    radial-gradient(circle at 8% 50%, rgba(64,236,169,.13), transparent 34%),
    linear-gradient(145deg, rgba(86,220,177,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(91,236,183,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 34px rgba(0,0,0,.15);
}

.hx-update-complete > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: rgba(187,255,227,.96);
  font-size: 25px;
  font-weight: 850;
  background: rgba(48,219,157,.10);
  border: 1px solid rgba(91,237,185,.18);
}

.hx-update-complete strong {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(16px, 2.3vw, 21px);
}

.hx-update-complete p {
  margin: 0;
  color: rgba(224,243,237,.80);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: clamp(12px, 1.7vw, 15px);
  font-weight: 560;
  line-height: 1.48;
  letter-spacing: .006em;
  text-wrap: pretty;
}

.hx-page--update .hx-update-guide .hx-update-actions {
  width: min(100%, 430px);
  margin: 0 auto;
}

.hx-page--update .hx-update-guide .hx-update-actions .hx-update-cta {
  box-sizing: border-box;
  height: 58px;
  min-height: 58px;
  padding-block: 0;
  align-items: center;
  justify-content: center;
}

.hx-page--update .hx-update-guide .hx-update-actions .telegram.hx-update-cta {
  gap: 14px;
}

.hx-page--update .hx-update-guide .hx-update-vk {
  gap: 10px;
  color: rgba(248,252,255,.98);
  background:
    radial-gradient(circle at 20% 0%, rgba(139,205,255,.20), transparent 36%),
    radial-gradient(circle at 88% 100%, rgba(137,92,255,.16), transparent 43%),
    linear-gradient(135deg, rgba(35,75,139,.95), rgba(50,55,124,.93) 58%, rgba(53,39,94,.91));
  border-color: rgba(130,181,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -10px 20px rgba(0,0,0,.08),
    0 10px 22px rgba(0,0,0,.15),
    0 0 17px rgba(87,130,255,.08);
}

.hx-update-social-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.hx-update-social-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: rgba(244,249,255,.96);
}

.hx-update-telegram-icon {
  background: linear-gradient(145deg, rgba(82,218,255,.18), rgba(98,122,238,.16));
  border-color: rgba(126,228,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 13px rgba(60,205,255,.08);
}

.hx-page--update .hx-update-guide .hx-inner-home {
  margin-top: 4px;
}

@media (max-width: 600px) {
  .hx-page--update .hx-update-guide {
    gap: 16px;
    padding: 24px 14px calc(28px + env(safe-area-inset-bottom));
  }

  .hx-page--update .hx-update-guide .hx-title {
    font-size: clamp(32px, 10vw, 43px);
  }

  .hx-page--update .hx-update-guide .hx-title span {
    max-width: 340px;
    font-size: clamp(18px, 5.4vw, 23px);
  }

  .hx-page--update .hx-update-guide .hx-text {
    max-width: 360px;
    font-size: 13.5px;
  }

  .hx-update-progress-panel {
    top: max(8px, env(safe-area-inset-top));
    border-radius: 19px;
  }

  .hx-update-progress-summary {
    min-height: 62px;
    gap: 12px;
    padding: 9px 14px;
  }

  .hx-update-progress-label strong {
    font-size: 21px;
  }

  .hx-update-progress-content {
    gap: 7px;
  }

  .hx-update-progress-title {
    font-size: 11px;
  }

  .hx-update-steps {
    gap: 16px;
  }

  .hx-update-step {
    gap: 11px;
    padding: 14px;
    border-radius: 21px;
  }

  .hx-update-step-heading {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
  }

  .hx-update-step-number {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 12px;
  }

  .hx-update-step h2 {
    font-size: clamp(19px, 6.1vw, 24px);
  }

  #update-step-3 h2 {
    font-size: clamp(18px, 4.65vw, 21.5px);
    letter-spacing: -.045em;
  }

  .hx-update-step > p {
    font-size: 13px;
  }

  .hx-update-photo-button {
    padding: 6px;
    border-radius: 18px;
  }

  .hx-update-photo-button img {
    border-radius: 13px;
  }

  .hx-update-photo-label {
    right: 12px;
    bottom: 12px;
    min-height: 30px;
    padding: 6px 9px;
    font-size: 10px;
  }

  .hx-update-complete {
    gap: 11px;
    padding: 15px;
    border-radius: 19px;
  }

  .hx-update-complete > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 22px;
  }
}

@media (min-width: 400px) and (max-width: 600px) {
  #update-step-3 h2 {
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .hx-page--update .hx-update-guide {
    padding-right: 10px;
    padding-left: 10px;
  }

  .hx-update-step {
    padding: 12px;
  }

  .hx-update-home-float {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    padding-right: 11px;
    padding-left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--update .hx-update-guide .hx-update-kicker::before,
  .hx-update-kicker-dot,
  .hx-update-photo-button {
    animation: none;
    transition: none;
  }

  .hx-update-progress-fill {
    animation: none;
    transition: none;
  }

  .hx-update-home-float,
  .hx-update-home-float.is-visible,
  .hx-update-home-float:active {
    transform: none;
    transition: none;
  }

  .hx-update-photo-button:hover,
  .hx-update-photo-button:active {
    transform: none;
  }
}
  .hx-page--update .hx-update-guide .hx-update-actions .hx-update-cta {
    height: 54px;
    min-height: 54px;
  }

/* === Connect page section transition — 20260721-029 === */
.hx-page--connect .hx-smart-location-section {
  padding-bottom: 28px;
  box-shadow: none;
}

.hx-page--connect .hx-divider--connect-flow {
  width: min(86%, 420px);
  margin: 0 auto;
  opacity: .48;
}

.hx-page--connect .hx-connect-hero.hx-connect-compact {
  padding-top: 32px;
  background: transparent;
  border-top: 0;
}

@media (max-width: 430px) {
  .hx-page--connect .hx-smart-location-section {
    padding-bottom: 24px;
  }

  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding-top: 30px;
  }
}

@media (max-width: 340px) {
  .hx-page--connect .hx-smart-location-section {
    padding-bottom: 20px;
  }

  .hx-page--connect .hx-connect-hero.hx-connect-compact {
    padding-top: 26px;
  }
}

/* === App Store step-by-step guide — 20260723-034 === */
.hx-page--appstore {
  max-width: 1120px;
  overflow: clip;
}

.hx-page--appstore .hx-appstore-manual {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  padding: clamp(28px, 5vw, 56px) clamp(12px, 3vw, 30px) clamp(28px, 5vw, 52px);
}

.hx-page--appstore .hx-appstore-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.8vw, 16px);
  padding: 0;
  text-align: center;
}

.hx-page--appstore .hx-appstore-hero::before {
  top: 18%;
  width: min(96%, 720px);
  height: 82%;
  opacity: .72;
}

.hx-page--appstore .hx-appstore-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 15px 9px 12px;
  color: rgba(225,248,255,.92);
  font-size: clamp(11px, 1.6vw, 14px);
  font-weight: 880;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 20% 0%, rgba(132,231,255,.16), transparent 46%),
    linear-gradient(135deg, rgba(18,117,164,.19), rgba(103,72,184,.14));
  border: 1px solid rgba(119,224,255,.23);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 7px 20px rgba(0,0,0,.13);
}

.hx-page--appstore .hx-appstore-kicker > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #68e7ff;
  box-shadow: 0 0 0 4px rgba(69,216,255,.08), 0 0 10px rgba(75,223,255,.48);
}

.hx-page--appstore .hx-appstore-hero .hx-title {
  max-width: 780px;
  margin: 0;
  color: rgba(250,253,255,.99);
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1;
  letter-spacing: -.048em;
  text-shadow: 0 0 18px rgba(184,236,255,.17), 0 18px 46px rgba(0,0,0,.27);
}

.hx-page--appstore .hx-appstore-hero .hx-title span {
  display: block;
  max-width: 620px;
  margin: clamp(12px, 1.8vw, 18px) auto 0;
  color: rgba(210,243,255,.94);
  font-size: clamp(20px, 3.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.hx-page--appstore .hx-appstore-hero .hx-text {
  max-width: 650px;
  margin: 0;
  color: rgba(233,243,255,.76);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 540;
  line-height: 1.48;
  text-wrap: pretty;
}

.hx-page--appstore .hx-appstore-progress-panel {
  width: min(100%, 620px);
}

.hx-page--appstore .hx-appstore-progress-panel .hx-update-progress-track::after {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(11.111111% - 1px),
    rgba(209,239,255,.18) calc(11.111111% - 1px) 11.111111%
  );
}

.hx-page--appstore .hx-appstore-steps {
  width: min(100%, 800px);
}

.hx-page--appstore .hx-appstore-step {
  scroll-margin-top: 96px;
}

.hx-page--appstore .hx-appstore-step > p,
.hx-page--appstore .hx-appstore-step-alert,
.hx-page--appstore .hx-appstore-complete p {
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
}

.hx-page--appstore .hx-appstore-photo-button {
  width: min(100%, 600px);
}

.hx-page--appstore .hx-appstore-photo-button img {
  aspect-ratio: 941 / 1672;
  object-fit: cover;
  background: #020d21;
}

.hx-page--appstore .hx-appstore-reference-card {
  width: min(100%, 800px);
  margin: 0 auto;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,190,91,.13), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(83,183,255,.08), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  border-color: rgba(255,206,128,.18);
}

.hx-page--appstore .hx-appstore-reference-card .hx-update-step-number {
  color: rgba(255,235,197,.98);
  background:
    radial-gradient(circle at 34% 20%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, rgba(216,145,42,.34), rgba(102,75,191,.28));
  border-color: rgba(255,211,138,.22);
}

.hx-page--appstore .hx-appstore-reference-card .hx-update-step-kicker {
  color: rgba(255,213,144,.86);
}

.hx-page--appstore .hx-appstore-reference-photo {
  width: min(100%, 600px);
}

.hx-page--appstore .hx-appstore-reference-photo img {
  background: #f5f5f7;
}

.hx-page--appstore .hx-appstore-copy-card {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 600px);
  margin: 0 auto;
  gap: 10px;
  padding: clamp(13px, 2.4vw, 18px);
  background:
    radial-gradient(circle at 100% 0%, rgba(104,115,255,.14), transparent 38%),
    linear-gradient(145deg, rgba(6,24,49,.88), rgba(13,21,54,.82));
  border: 1px solid rgba(159,199,255,.16);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px rgba(0,0,0,.16);
}

.hx-page--appstore .hx-appstore-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hx-page--appstore .hx-appstore-copy-head h3 {
  margin: 3px 0 0;
  color: rgba(248,252,255,.98);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: clamp(18px, 2.7vw, 23px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.hx-page--appstore .hx-appstore-copy-all,
.hx-page--appstore .hx-appstore-copy-list button {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 16px;
  color: rgba(246,251,255,.96);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(42,141,224,.54), rgba(91,73,203,.58));
  border: 1px solid rgba(141,204,255,.26);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.14);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.hx-page--appstore .hx-appstore-copy-all.is-copied,
.hx-page--appstore .hx-appstore-copy-list button.is-copied {
  color: rgba(239,255,249,.98);
  background: linear-gradient(135deg, rgba(27,145,112,.74), rgba(38,116,139,.72));
  border-color: rgba(123,244,204,.42);
}

.hx-page--appstore .hx-appstore-copy-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hx-page--appstore .hx-appstore-copy-list li {
  display: grid;
  grid-template-columns: minmax(62px, .58fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 7px 6px 11px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(187,219,255,.10);
  border-radius: 13px;
}

.hx-page--appstore .hx-appstore-copy-list li > span {
  color: rgba(201,220,242,.64);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .02em;
}

.hx-page--appstore .hx-appstore-copy-list code {
  min-width: 0;
  color: rgba(248,252,255,.96);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
  user-select: text;
}

.hx-page--appstore .hx-appstore-copy-list button {
  min-width: 100px;
  padding-inline: 12px;
  background: rgba(86,119,193,.22);
  border-color: rgba(150,197,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.hx-page--appstore .hx-appstore-copy-all:focus-visible,
.hx-page--appstore .hx-appstore-copy-list button:focus-visible {
  outline: 2px solid rgba(130,220,255,.94);
  outline-offset: 3px;
}

.hx-page--appstore .hx-appstore-copy-all:active,
.hx-page--appstore .hx-appstore-copy-list button:active {
  transform: scale(.98);
}

.hx-page--appstore .hx-appstore-copy-note,
.hx-page--appstore .hx-appstore-copy-status {
  margin: 0;
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
}

.hx-page--appstore .hx-appstore-copy-note {
  color: rgba(207,222,242,.68);
  font-size: 12px;
  line-height: 1.45;
}

.hx-page--appstore .hx-appstore-copy-status {
  min-height: 0;
  color: rgba(129,238,217,.92);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.45;
}

.hx-page--appstore .hx-appstore-copy-status:empty {
  display: none;
}

.hx-page--appstore .hx-appstore-copy-status.is-error {
  color: rgba(255,183,169,.94);
}

@media (hover: hover) {
  .hx-page--appstore .hx-appstore-copy-all:hover,
  .hx-page--appstore .hx-appstore-copy-list button:hover {
    border-color: rgba(160,215,255,.38);
    transform: translateY(-1px);
  }
}

.hx-page--appstore .hx-appstore-complete {
  width: min(100%, 700px);
}

.hx-page--appstore .hx-appstore-actions {
  width: min(100%, 430px);
  margin: 0 auto;
}

.hx-page--appstore .hx-appstore-actions .hx-update-cta {
  box-sizing: border-box;
  height: 58px;
  min-height: 58px;
  padding-block: 0;
  align-items: center;
  justify-content: center;
}

.hx-page--appstore .hx-appstore-actions .telegram.hx-update-cta {
  gap: 14px;
}

.hx-page--appstore .hx-appstore-actions .hx-update-vk {
  gap: 10px;
  color: rgba(248,252,255,.98);
  background:
    radial-gradient(circle at 20% 0%, rgba(139,205,255,.20), transparent 36%),
    radial-gradient(circle at 88% 100%, rgba(137,92,255,.16), transparent 43%),
    linear-gradient(135deg, rgba(35,75,139,.95), rgba(50,55,124,.93) 58%, rgba(53,39,94,.91));
  border-color: rgba(130,181,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), inset 0 -10px 20px rgba(0,0,0,.08), 0 10px 22px rgba(0,0,0,.15);
}

@media (max-width: 600px) {
  .hx-page--appstore .hx-appstore-manual {
    gap: 18px;
    padding: 24px 10px 28px;
  }

  .hx-page--appstore .hx-appstore-hero {
    gap: 10px;
  }

  .hx-page--appstore .hx-appstore-hero .hx-title {
    font-size: clamp(33px, 10vw, 48px);
  }

  .hx-page--appstore .hx-appstore-hero .hx-title span {
    font-size: clamp(19px, 5.8vw, 27px);
  }

  .hx-page--appstore .hx-appstore-hero .hx-text {
    max-width: 36em;
    font-size: 14px;
  }

  .hx-page--appstore .hx-appstore-progress-panel {
    top: max(8px, env(safe-area-inset-top));
  }

  .hx-page--appstore .hx-appstore-step {
    scroll-margin-top: 86px;
  }

  .hx-page--appstore .hx-appstore-copy-head {
    align-items: flex-end;
  }

  .hx-page--appstore .hx-appstore-copy-all {
    flex: 0 0 auto;
    padding-inline: 13px;
  }

  .hx-page--appstore .hx-appstore-copy-list li {
    grid-template-columns: minmax(52px, .55fr) minmax(0, 1.3fr) auto;
    gap: 7px;
  }

  .hx-page--appstore .hx-appstore-copy-list button {
    min-width: 96px;
    padding-inline: 10px;
  }

  .hx-page--appstore .hx-appstore-actions .hx-update-cta {
    height: 54px;
    min-height: 54px;
  }
}

@media (max-width: 360px) {
  .hx-page--appstore .hx-appstore-manual {
    padding-inline: 8px;
  }

  .hx-page--appstore .hx-appstore-kicker {
    padding: 8px 11px 8px 10px;
    font-size: 10px;
  }

  .hx-page--appstore .hx-appstore-hero .hx-title {
    font-size: 31px;
  }

  .hx-page--appstore .hx-appstore-hero .hx-title span {
    font-size: 18px;
  }

  .hx-page--appstore .hx-appstore-copy-head {
    align-items: stretch;
    flex-direction: column;
  }

  .hx-page--appstore .hx-appstore-copy-all {
    width: 100%;
  }

  .hx-page--appstore .hx-appstore-copy-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 7px;
  }

  .hx-page--appstore .hx-appstore-copy-list li > span {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--appstore .hx-update-progress-fill,
  .hx-page--appstore .hx-appstore-photo-button,
  .hx-page--appstore .hx-appstore-copy-all,
  .hx-page--appstore .hx-appstore-copy-list button {
    transition: none;
  }
}

/* === Home App Store region CTA — 20260723-052 === */
.hx-page--home .hx-button.region {
  isolation: isolate;
  justify-content: flex-start;
  padding: 10px 11px;
  border-color: rgba(111,228,255,.24);
  background:
    radial-gradient(circle at 50% 3%, rgba(83,223,255,.17), transparent 42%),
    radial-gradient(circle at 91% 100%, rgba(158,80,255,.09), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 0 14px rgba(255,255,255,.055),
    0 8px 18px rgba(0,0,0,.16),
    0 0 14px rgba(38,210,255,.08);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  backdrop-filter: blur(10px) saturate(112%);
  touch-action: manipulation;
}

.hx-page--home .hx-button.region::before {
  opacity: .52;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 48%),
    radial-gradient(ellipse at 50% 0%, rgba(149,244,255,.11), transparent 55%);
}

.hx-page--home .hx-button.region::after {
  left: 12px;
  right: 12px;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(70,237,255,.44), rgba(162,145,255,.34), rgba(219,99,255,.25), transparent);
  box-shadow: 0 0 8px rgba(62,226,255,.12);
}

.hx-page--home .hx-button.region .hx-region-layout {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 0 13px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
}

.hx-page--home .hx-button.region .hx-region-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  overflow: hidden;
  border: 1px solid rgba(193,244,255,.34);
  border-radius: 15px;
  opacity: 1;
  transform: none;
  background:
    radial-gradient(circle at 27% 18%, rgba(255,255,255,.42), transparent 27%),
    radial-gradient(circle at 76% 82%, rgba(255,91,211,.18), transparent 42%),
    linear-gradient(145deg, rgba(34,145,218,.76), rgba(61,69,159,.76) 58%, rgba(117,49,137,.70));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -9px 16px rgba(18,26,75,.20),
    0 7px 16px rgba(0,0,0,.20),
    0 0 17px rgba(45,218,255,.23);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hx-page--home .hx-button.region .hx-region-icon > span {
  z-index: 3;
  display: block;
  min-width: 0;
  padding: 0;
  font-size: 27px;
  line-height: 1;
  background: none;
  border: 0;
  border-radius: 0;
  filter: drop-shadow(0 3px 5px rgba(7,13,44,.36));
}

.hx-page--home .hx-button.region .hx-region-text {
  width: auto;
  max-width: none;
  flex: 1 1 auto;
  align-items: flex-start;
  text-align: left;
}

.hx-page--home .hx-button.region .hx-region-text b {
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.hx-page--home .hx-button.region .hx-region-primary {
  font-size: clamp(14px, 3.2vw, 16px);
  line-height: 1;
  text-shadow: 0 0 14px rgba(113,227,255,.25);
}

.hx-page--home .hx-button.region .hx-region-store {
  display: block;
  min-height: 0;
  padding: 0;
  color: rgba(220,239,251,.88);
  font-size: 12.5px;
  font-weight: 860;
  line-height: 1;
  letter-spacing: .012em;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: 0 0 9px rgba(97,219,255,.15);
}

.hx-page--home .hx-button.region .hx-region-text small {
  margin-top: 4px;
  min-height: 18px;
  padding: 3px 8px;
  color: rgba(232,250,255,.94);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .035em;
  background: linear-gradient(90deg, rgba(38,192,228,.18), rgba(119,77,211,.19));
  border: 1px solid rgba(143,234,255,.21);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 9px rgba(37,207,255,.07);
}

@media (hover: hover) and (pointer: fine) {
  .hx-page--home .hx-button.region:hover .hx-region-icon {
    transform: translateY(-1px) rotate(-3deg);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.58),
      inset 0 -9px 16px rgba(18,26,75,.18),
      0 9px 18px rgba(0,0,0,.20),
      0 0 21px rgba(45,218,255,.32);
  }
}

@media (max-width: 390px) and (min-width: 361px) {
  .hx-page--home .hx-button.region {
    padding-inline: 9px;
  }

  .hx-page--home .hx-button.region .hx-region-layout {
    padding-right: 0;
    padding-left: 8px;
    gap: 8px;
  }

  .hx-page--home .hx-button.region .hx-region-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 14px;
  }

  .hx-page--home .hx-button.region .hx-region-primary {
    font-size: 13.5px;
  }

  .hx-page--home .hx-button.region .hx-region-store {
    font-size: 11.4px;
  }

  .hx-page--home .hx-button.region .hx-region-text small {
    padding-inline: 7px;
    font-size: 7.7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--home .hx-button.region .hx-region-icon {
    transition: none;
  }
}

/* === Home update CTA — 20260723-048 === */
.hx-page--home .hx-button.update-server {
  isolation: isolate;
  padding: 6px 7px;
  color: rgba(248,252,255,.97);
  border-color: rgba(111,228,255,.24);
  background:
    radial-gradient(circle at 50% 3%, rgba(83,223,255,.17), transparent 42%),
    radial-gradient(circle at 91% 100%, rgba(158,80,255,.09), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 0 14px rgba(255,255,255,.055),
    0 8px 18px rgba(0,0,0,.16),
    0 0 14px rgba(38,210,255,.08);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  backdrop-filter: blur(10px) saturate(112%);
  touch-action: manipulation;
}

.hx-page--home .hx-button.update-server::before {
  opacity: .52;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 48%),
    radial-gradient(ellipse at 50% 0%, rgba(149,244,255,.11), transparent 55%);
}

.hx-page--home .hx-button.update-server::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  z-index: 1;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(70,237,255,.44), rgba(162,145,255,.34), rgba(219,99,255,.25), transparent);
  box-shadow: 0 0 8px rgba(62,226,255,.12);
}

.hx-page--home .hx-button.update-server .hx-update-left {
  position: relative;
  z-index: 2;
  gap: 5px;
}

.hx-page--home .hx-button.update-server .hx-update-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(194,247,255,.30);
  border-radius: 14px;
  opacity: 1;
  transform: none;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.72), transparent 27%),
    radial-gradient(circle at 75% 82%, rgba(255,86,210,.31), transparent 40%),
    linear-gradient(145deg, rgba(38,218,255,.82), rgba(86,89,226,.76) 58%, rgba(170,71,205,.70));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -8px 15px rgba(14,27,75,.20),
    0 7px 16px rgba(0,0,0,.19),
    0 0 18px rgba(42,218,255,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hx-page--home .hx-button.update-server .hx-update-glyph {
  width: 27px;
  height: 27px;
}

.hx-page--home .hx-button.update-server .hx-update-text b {
  color: rgba(249,253,255,.98);
  font-size: 13.4px;
  line-height: 1.08;
  text-shadow: 0 0 13px rgba(112,227,255,.20);
}

@media (hover: hover) and (pointer: fine) {
  .hx-page--home .hx-button.update-server:hover .hx-update-icon {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.60),
      inset 0 -8px 15px rgba(14,27,75,.18),
      0 9px 18px rgba(0,0,0,.19),
      0 0 22px rgba(42,218,255,.33);
  }
}

@media (max-width: 390px) and (min-width: 361px) {
  .hx-page--home .hx-button.update-server .hx-update-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 13px;
  }

  .hx-page--home .hx-button.update-server .hx-update-glyph {
    width: 25px;
    height: 25px;
  }

  .hx-page--home .hx-button.update-server .hx-update-text b {
    font-size: 12.4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--home .hx-button.update-server .hx-update-icon {
    transition: none;
  }
}

/* === Connection guide entry — 20260723-051 === */
.hx-page--home .hx-button.connect-guide {
  grid-column: 1 / -1;
  min-height: 52px;
  padding: 7px 14px;
  justify-content: center;
  gap: 10px;
  border-color: rgba(129,231,255,.22);
  border-radius: 17px;
  color: rgba(242,251,255,.96);
  background:
    radial-gradient(circle at 18% 0%, rgba(59,217,255,.15), transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(151,91,255,.10), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.032));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 13px rgba(255,255,255,.035),
    0 7px 16px rgba(0,0,0,.14),
    0 0 12px rgba(54,213,255,.065);
}

.hx-page--home .hx-button.connect-guide::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(83,230,255,.36), rgba(167,139,255,.26), transparent);
}

.hx-connect-guide-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(174,241,255,.22);
  border-radius: 11px;
  font-size: 18px;
  line-height: 1;
  background: linear-gradient(145deg, rgba(41,178,222,.28), rgba(100,77,185,.24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 12px rgba(55,215,255,.10);
}

.hx-connect-guide-text {
  font-size: 14px;
  font-weight: 920;
  letter-spacing: -.01em;
}

.hx-page--instruction {
  max-width: 720px;
}

.hx-instruction-shell {
  padding: clamp(34px, 7vw, 64px) clamp(18px, 5vw, 42px) clamp(30px, 6vw, 52px);
}

.hx-instruction-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(166,239,255,.24);
  border-radius: 25px;
  font-size: 40px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(145deg, rgba(28,165,216,.45), rgba(93,71,180,.38));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 12px 24px rgba(0,0,0,.20),
    0 0 24px rgba(58,215,255,.14);
}

.hx-page--instruction .hx-title {
  max-width: 560px;
  margin: 0 auto;
  font-size: clamp(34px, 7vw, 48px);
  letter-spacing: -.035em;
}

.hx-page--instruction .hx-text {
  max-width: 510px;
  margin-top: 15px;
  color: rgba(225,238,251,.82);
}

.hx-instruction-placeholder {
  width: min(100%, 510px);
  margin: 24px auto 0;
  padding: 22px 18px;
  border: 1px solid rgba(142,229,255,.15);
  border-radius: 21px;
  background:
    radial-gradient(circle at 50% 0%, rgba(52,210,255,.10), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 12px 24px rgba(0,0,0,.14);
}

.hx-instruction-placeholder strong {
  display: block;
  color: rgba(246,252,255,.96);
  font-size: 17px;
}

.hx-instruction-placeholder p {
  margin: 8px 0 0;
  color: rgba(215,231,247,.72);
  font-size: 13px;
  line-height: 1.45;
}

.hx-instruction-actions {
  margin-top: 24px;
}

.hx-page--instruction .hx-instruction-reveal {
  opacity: 0;
  transform:
    translate3d(0, var(--hx-instruction-reveal-y, 10px), 0)
    scale(var(--hx-instruction-reveal-scale, .99));
  transition:
    opacity .74s cubic-bezier(.2, .75, .25, 1),
    transform .88s cubic-bezier(.16, 1.06, .3, 1);
  transition-delay: var(--hx-instruction-reveal-delay, 0ms);
}

.hx-page--instruction .hx-instruction-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 430px) {
  .hx-page--home .hx-button.connect-guide {
    min-height: 50px;
  }

  .hx-connect-guide-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 10px;
    font-size: 17px;
  }

  .hx-connect-guide-text {
    font-size: 13.2px;
  }

  .hx-instruction-shell {
    padding: 30px 15px 28px;
  }

  .hx-instruction-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    font-size: 35px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--instruction .hx-instruction-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Home footer feature chips — 20260723-053 === */
.hx-page--home .hx-home-features-note {
  width: 100%;
  max-width: 100%;
  margin: 22px auto 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(227,240,252,.82);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: .01em;
}

.hx-page--home .hx-home-features-note span {
  min-height: 28px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(132,226,255,.13);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(72,213,255,.10), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 12px rgba(0,0,0,.10);
  white-space: nowrap;
}

.hx-page--home .hx-home-features-note span:last-child {
  border-color: rgba(175,143,255,.14);
  background:
    radial-gradient(circle at 50% 0%, rgba(155,105,255,.10), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
}

@media (max-width: 430px) {
  .hx-page--home .hx-home-features-note {
    margin-top: 20px;
    gap: 7px;
    font-size: 10px;
  }

  .hx-page--home .hx-home-features-note span {
    min-height: 27px;
    padding: 7px 10px;
  }
}

/* === Connect staged reveal — 20260723-078 === */
.hx-page--connect .hx-connect-reveal {
  opacity: 0;
  transform:
    translate3d(
      var(--hx-connect-reveal-x, 0),
      var(--hx-connect-reveal-y, 16px),
      0
    )
    scale(var(--hx-connect-reveal-scale, .985));
  transition:
    opacity .72s cubic-bezier(.2, .75, .25, 1),
    transform .84s cubic-bezier(.16, 1.06, .3, 1);
  transition-delay: var(--hx-connect-reveal-delay, 0ms);
}

.hx-page--connect .hx-connect-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hx-page--connect .hx-feature-grid.hx-connect-reveal .hx-feature-card {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.97);
  transition:
    opacity .62s ease,
    transform .76s cubic-bezier(.16, 1.06, .3, 1);
}

.hx-page--connect .hx-feature-grid.hx-connect-reveal.is-visible .hx-feature-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hx-page--connect .hx-feature-grid.is-visible .hx-feature-card:nth-child(1) { transition-delay: .14s; }
.hx-page--connect .hx-feature-grid.is-visible .hx-feature-card:nth-child(2) { transition-delay: .28s; }
.hx-page--connect .hx-feature-grid.is-visible .hx-feature-card:nth-child(3) { transition-delay: .42s; }

.hx-page--connect .hx-smart-location-section > .hx-title.hx-connect-reveal > span {
  opacity: 0;
  transform: translate3d(10px, 7px, 0);
  transition:
    opacity .70s ease,
    transform .82s cubic-bezier(.16, 1.06, .3, 1);
}

.hx-page--connect .hx-smart-location-section > .hx-title.hx-connect-reveal.is-visible > span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .30s;
}

.hx-page--connect .hx-connect-cta.hx-connect-reveal > p,
.hx-page--connect .hx-connect-cta.hx-connect-reveal > .hx-contact-actions {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity .64s ease,
    transform .74s cubic-bezier(.2, .72, .25, 1);
}

.hx-page--connect .hx-connect-cta.hx-connect-reveal.is-visible > p,
.hx-page--connect .hx-connect-cta.hx-connect-reveal.is-visible > .hx-contact-actions {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hx-page--connect .hx-connect-cta.is-visible > p { transition-delay: .22s; }
.hx-page--connect .hx-connect-cta.is-visible > .hx-contact-actions { transition-delay: .40s; }

.hx-page--connect .hx-connect-cta.hx-connect-reveal .hx-contact-button {
  opacity: 0;
  transition:
    opacity .60s ease,
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.hx-page--connect .hx-connect-cta.hx-connect-reveal.is-visible .hx-contact-button {
  opacity: 1;
}

.hx-page--connect .hx-connect-cta.is-visible .hx-contact-button:nth-child(1) { transition-delay: .52s, 0s, 0s, 0s; }
.hx-page--connect .hx-connect-cta.is-visible .hx-contact-button:nth-child(2) { transition-delay: .72s, 0s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
  .hx-page--connect .hx-connect-reveal,
  .hx-page--connect .hx-feature-grid.hx-connect-reveal .hx-feature-card,
  .hx-page--connect .hx-smart-location-section > .hx-title.hx-connect-reveal > span,
  .hx-page--connect .hx-connect-cta.hx-connect-reveal > p,
  .hx-page--connect .hx-connect-cta.hx-connect-reveal > .hx-contact-actions,
  .hx-page--connect .hx-connect-cta.hx-connect-reveal .hx-contact-button {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Instruction guides staged reveal — 20260723-079 === */
.hx-page--update .hx-guide-reveal,
.hx-page--appstore .hx-guide-reveal {
  opacity: 0;
  transform:
    translate3d(
      var(--hx-guide-reveal-x, 0),
      var(--hx-guide-reveal-y, 16px),
      0
    )
    scale(var(--hx-guide-reveal-scale, .99));
  transition:
    opacity .76s cubic-bezier(.2, .75, .25, 1),
    transform .90s cubic-bezier(.16, 1.06, .3, 1);
  transition-delay: var(--hx-guide-reveal-delay, 0ms);
}

.hx-page--update .hx-guide-reveal.is-visible,
.hx-page--appstore .hx-guide-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.hx-page--update .hx-update-guide-hero.hx-guide-reveal > *,
.hx-page--appstore .hx-appstore-hero.hx-guide-reveal > * {
  opacity: 0;
  transform: translate3d(0, 9px, 0);
  transition:
    opacity .72s ease,
    transform .82s cubic-bezier(.16, 1.06, .3, 1);
}

.hx-page--update .hx-update-guide-hero.hx-guide-reveal.is-visible > *,
.hx-page--appstore .hx-appstore-hero.hx-guide-reveal.is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hx-page--update .hx-update-guide-hero.is-visible > :nth-child(1),
.hx-page--appstore .hx-appstore-hero.is-visible > :nth-child(1) { transition-delay: .16s; }
.hx-page--update .hx-update-guide-hero.is-visible > :nth-child(2),
.hx-page--appstore .hx-appstore-hero.is-visible > :nth-child(2) { transition-delay: .32s; }
.hx-page--appstore .hx-appstore-hero.is-visible > :nth-child(3) { transition-delay: .48s; }

.hx-page--update .hx-update-step.hx-guide-reveal .hx-update-step-heading,
.hx-page--appstore .hx-update-step.hx-guide-reveal .hx-update-step-heading,
.hx-page--update .hx-update-step.hx-guide-reveal > p,
.hx-page--appstore .hx-update-step.hx-guide-reveal > p,
.hx-page--update .hx-update-step.hx-guide-reveal > .hx-update-step-alert,
.hx-page--appstore .hx-update-step.hx-guide-reveal > .hx-update-step-alert {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity .68s ease,
    transform .76s cubic-bezier(.16, 1.06, .3, 1);
}

.hx-page--appstore .hx-update-step.hx-guide-reveal > .hx-appstore-copy-card {
  opacity: 0;
  transition-delay: 0s;
}

.hx-page--update .hx-update-step.hx-guide-reveal.is-visible .hx-update-step-heading,
.hx-page--appstore .hx-update-step.hx-guide-reveal.is-visible .hx-update-step-heading,
.hx-page--update .hx-update-step.hx-guide-reveal.is-visible > p,
.hx-page--appstore .hx-update-step.hx-guide-reveal.is-visible > p,
.hx-page--update .hx-update-step.hx-guide-reveal.is-visible > .hx-update-step-alert,
.hx-page--appstore .hx-update-step.hx-guide-reveal.is-visible > .hx-update-step-alert {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hx-page--appstore .hx-update-step.hx-guide-reveal.is-visible > .hx-appstore-copy-card {
  opacity: 1;
}

.hx-page--update .hx-update-step.is-visible .hx-update-step-heading,
.hx-page--appstore .hx-update-step.is-visible .hx-update-step-heading { transition-delay: .14s; }
.hx-page--update .hx-update-step.is-visible > p,
.hx-page--appstore .hx-update-step.is-visible > p { transition-delay: .28s; }
.hx-page--update .hx-update-step.is-visible > .hx-update-step-alert,
.hx-page--appstore .hx-update-step.is-visible > .hx-update-step-alert { transition-delay: .42s; }
.hx-page--appstore .hx-update-step.is-visible > .hx-appstore-copy-card { transition-delay: .56s; }

.hx-page--update .hx-update-complete.hx-guide-reveal > *,
.hx-page--appstore .hx-update-complete.hx-guide-reveal > * {
  opacity: 0;
  transition: opacity .68s ease;
}

.hx-page--update .hx-update-complete.hx-guide-reveal.is-visible > *,
.hx-page--appstore .hx-update-complete.hx-guide-reveal.is-visible > * {
  opacity: 1;
}

.hx-page--update .hx-update-complete.is-visible > :nth-child(1),
.hx-page--appstore .hx-update-complete.is-visible > :nth-child(1) { transition-delay: .22s; }
.hx-page--update .hx-update-complete.is-visible > :nth-child(2),
.hx-page--appstore .hx-update-complete.is-visible > :nth-child(2) { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  .hx-page--update .hx-guide-reveal,
  .hx-page--appstore .hx-guide-reveal,
  .hx-page--update .hx-update-guide-hero.hx-guide-reveal > *,
  .hx-page--appstore .hx-appstore-hero.hx-guide-reveal > *,
  .hx-page--update .hx-update-step.hx-guide-reveal .hx-update-step-heading,
  .hx-page--appstore .hx-update-step.hx-guide-reveal .hx-update-step-heading,
  .hx-page--update .hx-update-step.hx-guide-reveal > p,
  .hx-page--appstore .hx-update-step.hx-guide-reveal > p,
  .hx-page--update .hx-update-step.hx-guide-reveal > .hx-update-step-alert,
  .hx-page--appstore .hx-update-step.hx-guide-reveal > .hx-update-step-alert,
  .hx-page--appstore .hx-update-step.hx-guide-reveal > .hx-appstore-copy-card,
  .hx-page--update .hx-update-complete.hx-guide-reveal > *,
  .hx-page--appstore .hx-update-complete.hx-guide-reveal > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === Home staged reveal — 20260723-080 === */
.hx-page--home .hx-home-reveal {
  opacity: 0;
}

.hx-page--home .hx-home-reveal.is-visible {
  opacity: 1;
  animation: hx-home-reveal-in .92s cubic-bezier(.16, 1.06, .3, 1) backwards;
  animation-delay: var(--hx-home-reveal-delay, 0ms);
}

@keyframes hx-home-reveal-in {
  from {
    opacity: 0;
    transform:
      translate3d(
        var(--hx-home-reveal-x, 0),
        var(--hx-home-reveal-y, 14px),
        0
      )
      scale(var(--hx-home-reveal-scale, .99));
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.hx-page--home .hx-icon.hx-home-reveal.is-visible {
  animation:
    iconFloat 4.2s ease-in-out infinite,
    hx-home-icon-reveal-in .90s ease backwards;
  animation-delay: 0s, var(--hx-home-reveal-delay, 0ms);
}

@keyframes hx-home-icon-reveal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hx-page--home .hx-actions.hx-home-reveal:not(.is-visible) > .hx-button {
  opacity: 0;
}

.hx-page--home .hx-actions.hx-home-reveal.is-visible > .hx-button {
  opacity: 1;
  animation: hx-home-card-reveal-in .78s cubic-bezier(.16, 1.06, .3, 1) backwards;
}

.hx-page--home .hx-actions.hx-home-reveal.is-visible > .hx-button:nth-child(1) { animation-delay: .28s; }
.hx-page--home .hx-actions.hx-home-reveal.is-visible > .hx-button:nth-child(2) { animation-delay: .42s; }
.hx-page--home .hx-actions.hx-home-reveal.is-visible > .hx-button:nth-child(3) { animation-delay: .56s; }
.hx-page--home .hx-actions.hx-home-reveal.is-visible > .hx-button:nth-child(4) { animation-delay: .70s; }
.hx-page--home .hx-actions.hx-home-reveal.is-visible > .hx-button:nth-child(5) { animation-delay: .84s; }

@keyframes hx-home-card-reveal-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.97);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.hx-page--home .hx-home-features-note.hx-home-reveal:not(.is-visible) > span {
  opacity: 0;
}

.hx-page--home .hx-home-features-note.hx-home-reveal.is-visible > span {
  opacity: 1;
  animation: hx-home-note-reveal-in .62s ease backwards;
}

.hx-page--home .hx-home-features-note.hx-home-reveal.is-visible > span:first-child { animation-delay: .42s; }
.hx-page--home .hx-home-features-note.hx-home-reveal.is-visible > span:last-child { animation-delay: .56s; }

@keyframes hx-home-note-reveal-in {
  from {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--home .hx-home-reveal,
  .hx-page--home .hx-home-reveal.is-visible,
  .hx-page--home .hx-actions.hx-home-reveal > .hx-button,
  .hx-page--home .hx-home-features-note.hx-home-reveal > span {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* === Home description typography — 20260723-084 === */
.hx-page--home .hx-text {
  width: 100%;
  max-width: 620px;
  margin: 18px auto 16px;
  color: rgba(229, 239, 255, .84);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Segoe UI", sans-serif;
  font-size: clamp(14px, 2.2vw, 17px);
  font-weight: 570;
  line-height: 1.55;
  letter-spacing: .006em;
  text-wrap: pretty;
  text-shadow:
    0 0 18px rgba(128, 222, 255, .10),
    0 8px 24px rgba(0, 0, 0, .24);
}

@media (max-width: 430px) {
  .hx-page--home .hx-text {
    max-width: 100%;
    margin-top: 17px;
    font-size: 13.5px;
    line-height: 1.52;
  }
}

/* === Home command deck restored — 20260723-089 === */
.hx-page--home .hx-actions {
  position: relative;
  isolation: isolate;
  width: min(100%, 456px);
  margin-top: 18px;
  padding: 0;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, .92fr);
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.hx-page--home .hx-actions::before {
  content: none;
}

.hx-page--home .hx-actions::after {
  content: none;
}

.hx-page--home .hx-actions > .hx-button {
  z-index: 1;
  min-width: 0;
}

.hx-page--home .hx-actions .hx-button.connect-server {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 66px;
  border-radius: 19px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -14px 26px rgba(124, 92, 255, .15),
    inset 0 0 18px rgba(255, 255, 255, .10),
    0 9px 20px rgba(0, 0, 0, .20),
    0 0 22px rgba(0, 229, 255, .20),
    0 0 30px rgba(255, 78, 205, .12);
}

.hx-page--home .hx-actions .hx-button.connect-server span {
  font-size: clamp(16px, 4.2vw, 18px);
  letter-spacing: -.02em;
}

.hx-page--home .hx-actions .hx-button.connect-guide {
  grid-column: 1 / -1;
  min-height: 56px;
  padding: 8px 12px;
  justify-content: center;
  gap: 11px;
  border-color: rgba(135, 231, 255, .18);
  border-radius: 17px;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 255, .13), transparent 40%),
    radial-gradient(circle at 86% 100%, rgba(151, 91, 255, .09), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 14px rgba(255, 255, 255, .035),
    0 6px 14px rgba(0, 0, 0, .14);
}

.hx-page--home .hx-actions .hx-button.connect-guide .hx-connect-guide-icon {
  position: relative;
  left: auto;
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 12px;
  font-size: 18px;
}

.hx-page--home .hx-actions .hx-button.connect-guide .hx-connect-guide-text {
  font-size: clamp(13px, 3.3vw, 14.5px);
  line-height: 1.1;
  text-align: center;
}

.hx-page--home .hx-actions .hx-button.region,
.hx-page--home .hx-actions .hx-button.update-server {
  width: 100%;
  height: 91px;
  min-height: 91px;
  max-height: 91px;
  padding: 9px 8px;
  border-radius: 17px;
}

.hx-page--home .hx-actions .hx-button.region {
  border-color: rgba(101, 224, 255, .20);
  background:
    radial-gradient(circle at 18% 0%, rgba(44, 212, 255, .18), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(88, 110, 255, .10), transparent 42%),
    linear-gradient(145deg, rgba(27, 88, 142, .28), rgba(255, 255, 255, .035));
}

.hx-page--home .hx-actions .hx-button.update-server {
  border-color: rgba(178, 142, 255, .20);
  background:
    radial-gradient(circle at 82% 0%, rgba(158, 104, 255, .19), transparent 42%),
    radial-gradient(circle at 12% 100%, rgba(41, 203, 255, .10), transparent 42%),
    linear-gradient(145deg, rgba(67, 49, 128, .25), rgba(255, 255, 255, .035));
}

.hx-page--home .hx-actions .hx-button.region .hx-region-layout,
.hx-page--home .hx-actions .hx-button.update-server .hx-update-left {
  width: 100%;
  padding: 0;
}

.hx-page--home .hx-actions .hx-button.region .hx-region-layout {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  text-align: left;
}

.hx-page--home .hx-actions .hx-button.update-server .hx-update-left {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.hx-page--home .hx-actions .hx-button.region .hx-region-icon {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-radius: 14px;
}

.hx-page--home .hx-actions .hx-button.update-server .hx-update-icon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 13px;
}

.hx-page--home .hx-actions .hx-button.region .hx-region-icon > span {
  font-size: 26px;
}

.hx-page--home .hx-actions .hx-button.region .hx-region-text,
.hx-page--home .hx-actions .hx-button.region .hx-region-text b {
  width: 100%;
  max-width: none;
  align-items: flex-start;
  text-align: left;
}

.hx-page--home .hx-actions .hx-button.region .hx-region-primary {
  font-size: clamp(13.6px, 3.3vw, 14.8px);
}

.hx-page--home .hx-actions .hx-button.region .hx-region-store {
  font-size: clamp(11px, 2.8vw, 12px);
}

.hx-page--home .hx-actions .hx-button.region .hx-region-text small {
  min-height: 16px;
  margin-top: 3px;
  padding: 3px 7px;
  font-size: 7.4px;
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service {
  grid-column: 1 / -1;
  height: auto;
  min-height: 74px;
  max-height: none;
  padding: 9px 14px;
  justify-content: center;
  border-color: rgba(103, 226, 255, .28);
  background:
    radial-gradient(circle at 12% 50%, rgba(48, 215, 255, .20), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(138, 106, 255, .18), transparent 40%),
    linear-gradient(135deg, rgba(28, 85, 137, .38), rgba(65, 48, 118, .30));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 22px rgba(91, 199, 255, .055),
    0 10px 26px rgba(4, 17, 47, .22);
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-layout {
  width: 100%;
  max-width: none;
  padding-inline: clamp(2px, 2vw, 10px);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  justify-content: stretch;
  gap: clamp(8px, 2.5vw, 14px);
  text-align: center;
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-layout::after {
  content: none;
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-text {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 2.5vw, 16px);
  text-align: center;
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-text b {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .3em;
  white-space: nowrap;
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-primary {
  text-align: center;
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-store {
  text-align: center;
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-text small {
  min-height: 22px;
  margin-top: 0;
  padding: 5px 9px;
  align-self: center;
  justify-self: end;
  border-color: rgba(133, 231, 255, .32);
  background:
    linear-gradient(135deg, rgba(47, 191, 236, .18), rgba(135, 90, 255, .20));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 4px 12px rgba(38, 135, 255, .12);
  font-size: clamp(8px, 2vw, 9px);
  line-height: 1;
  white-space: nowrap;
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 7px 18px rgba(46, 153, 255, .22);
}

@media (max-width: 360px) {
  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service {
    min-height: 76px;
  }

  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-text {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-text small {
    justify-self: center;
  }
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-primary {
  font-size: clamp(14px, 3.5vw, 16px);
}

.hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-store {
  color: rgba(195, 232, 255, .90);
  font-size: clamp(11.5px, 2.9vw, 13px);
  font-weight: 800;
}

.hx-page--home .hx-actions .hx-button.update-server .hx-update-glyph {
  width: 29px;
  height: 29px;
}

.hx-page--home .hx-actions .hx-button.update-server .hx-update-text b {
  font-size: clamp(11.8px, 2.9vw, 13px);
  line-height: 1.08;
  text-align: center;
}

.hx-page--home .hx-actions .hx-button.bonus-link {
  grid-column: 1 / -1;
  width: min(78%, 390px);
  min-height: 66px;
  margin-top: 2px;
  padding: 22px 12px 6px;
  justify-self: center;
  justify-content: center;
  gap: 0;
  border-color: rgba(255, 211, 119, .15);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 194, 67, .14), transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(255, 78, 205, .08), transparent 42%),
    linear-gradient(145deg, rgba(91, 66, 37, .22), rgba(255, 255, 255, .03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 0 15px rgba(255, 220, 142, .025),
    0 7px 16px rgba(0, 0, 0, .14);
}

.hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-badge {
  position: absolute;
  top: 7px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 3px 11px;
  transform: translateX(-50%);
  font-size: 7.7px;
  line-height: 1;
}

.hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-main {
  width: min(100%, 250px);
  min-width: 0;
  flex: 0 1 250px;
  align-items: center;
  gap: 3px;
}

.hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-titleline {
  justify-content: center;
  text-align: center;
}

.hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-titleline::before,
.hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-titleline::after {
  display: block;
}

.hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-titleline strong {
  font-size: clamp(13.5px, 3.4vw, 15px);
}

.hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-main > small {
  font-size: clamp(8.2px, 2.1vw, 9px);
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .hx-page--home .hx-actions .hx-button:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 430px) {
  .hx-page--home .hx-actions {
    width: 100%;
  }

  .hx-page--home .hx-actions .hx-button.connect-server {
    min-height: 62px;
  }

  .hx-page--home .hx-actions .hx-button.region,
  .hx-page--home .hx-actions .hx-button.update-server {
    height: 87px;
    min-height: 87px;
    max-height: 87px;
  }
}

@media (max-width: 340px) {
  .hx-page--home .hx-actions {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, .96fr);
    gap: 7px;
  }

  .hx-page--home .hx-actions .hx-button.bonus-link {
    width: 88%;
    min-height: 63px;
    padding: 20px 8px 6px;
  }

  .hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-badge {
    max-width: calc(100% - 20px);
  }

  .hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-main {
    align-items: center;
  }

  .hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-titleline {
    justify-content: center;
    text-align: center;
  }

  .hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-main > small {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--home .hx-actions .hx-button {
    transition: none;
  }
}

/* === Connect content moved to the home page — 20260726-092 === */
.hx-page--home .hx-home-connect {
  position: relative;
  z-index: 3;
  scroll-margin-top: max(18px, env(safe-area-inset-top));
}

.hx-page--home .hx-home-connect > .hx-divider:first-child {
  width: min(86%, 420px);
  margin: 0 auto;
  opacity: .56;
}

.hx-page--home .hx-home-connect .hx-section {
  padding-bottom: 32px;
}

.hx-page--home .hx-home-connect .hx-connect-benefits {
  padding-top: clamp(28px, 4vw, 36px);
  padding-bottom: clamp(20px, 3vw, 28px);
}

.hx-page--home .hx-home-connect .hx-contact-actions {
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
}

.hx-page--home .hx-home-connect .hx-connect-hero.hx-connect-compact {
  padding-bottom: clamp(24px, 4vw, 34px);
}

.hx-page--home > .hx-section:first-of-type {
  padding-bottom: clamp(12px, 2vw, 18px);
}

.hx-page--home > .hx-section:first-of-type .hx-text {
  margin-bottom: 0;
}

.hx-page--home .hx-home-connect .hx-connect-benefits {
  padding-top: clamp(16px, 3vw, 22px);
  padding-bottom: clamp(12px, 2vw, 18px);
}

.hx-page--home .hx-home-connect .hx-connect-benefits .hx-feature-grid {
  margin-bottom: 8px;
}

.hx-page--home .hx-home-connect .hx-smart-location-section {
  padding-top: clamp(20px, 3vw, 26px);
}

/* === Home connection-to-links rhythm — 20260726-102 === */
.hx-page--home .hx-home-connect .hx-connect-hero.hx-connect-compact {
  padding-bottom: clamp(8px, 1.5vw, 12px);
}

.hx-page--home .hx-home-links {
  padding-top: clamp(10px, 2vw, 14px);
}

@media (max-width: 340px) {
  .hx-page--home .hx-home-connect .hx-contact-actions {
    grid-template-columns: 1fr;
  }
}

/* === Mobile quick actions bar — 20260726-105 === */
.hx-home-bottom-nav {
  display: none;
}

@media (max-width: 560px) {
  .hx-page--home #home,
  .hx-page--home #connect,
  .hx-page--home #services {
    scroll-margin-top: max(16px, env(safe-area-inset-top));
    scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .hx-home-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: max(9px, env(safe-area-inset-bottom));
    z-index: 50;
    width: min(calc(100% - 20px), 430px);
    min-height: 66px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    transform: translateX(-50%);
    animation: hxHomeQuickBarEnter .72s cubic-bezier(.16, 1, .3, 1) .18s both;
    border: 1px solid rgba(174, 214, 255, .24);
    border-radius: 22px;
    background:
      radial-gradient(circle at 20% 0%, rgba(67, 211, 255, .15), transparent 46%),
      radial-gradient(circle at 82% 100%, rgba(181, 99, 255, .14), transparent 48%),
      rgba(9, 16, 38, .88);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      0 14px 36px rgba(0, 0, 0, .36);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
  }

  .hx-home-bottom-nav__item {
    min-width: 0;
    min-height: 52px;
    padding: 7px clamp(4px, 2vw, 10px);
    border: 1px solid transparent;
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.5vw, 7px);
    color: #f4fbff;
    font-size: clamp(11px, 3.2vw, 16px);
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    border-color: rgba(103, 229, 255, .20);
    background:
      linear-gradient(145deg, rgba(43, 197, 255, .20), rgba(132, 104, 255, .20));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .11),
      0 6px 18px rgba(29, 124, 255, .14);
    transition:
      color .22s ease,
      background-color .22s ease,
      border-color .22s ease,
      transform .18s ease;
  }

  .hx-home-bottom-nav__icon {
    width: clamp(26px, 7vw, 30px);
    min-width: clamp(26px, 7vw, 30px);
    height: clamp(26px, 7vw, 30px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #82efff;
    font-size: clamp(20px, 5vw, 23px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 0 14px rgba(68, 224, 255, .58);
  }

  .hx-home-bottom-nav__item--region {
    border-color: rgba(204, 170, 255, .20);
    background:
      linear-gradient(145deg, rgba(70, 168, 255, .18), rgba(164, 88, 255, .22));
  }

  .hx-home-bottom-nav__label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1;
  }

  .hx-home-bottom-nav__label small {
    color: rgba(218, 235, 255, .72);
    font-size: clamp(8px, 2.25vw, 10px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: .01em;
  }

  .hx-home-bottom-nav__item--guide {
    display: flex;
    gap: clamp(6px, 1.7vw, 8px);
  }

  .hx-home-bottom-nav__item--guide::after {
    content: none;
  }

  .hx-home-bottom-nav__item--guide > .hx-home-bottom-nav__icon,
  .hx-home-bottom-nav__item--guide > .hx-home-bottom-nav__label {
    transform: translateX(-8px);
  }

  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label {
    align-items: center;
    gap: 3px;
    line-height: 1.05;
    text-align: center;
  }

  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label > span {
    font-size: clamp(11.5px, 3vw, 14px);
    line-height: 1.05;
  }

  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label small {
    color: rgba(225, 240, 255, .78);
    font-size: clamp(9.5px, 2.55vw, 11px);
    line-height: 1.05;
    letter-spacing: .015em;
  }

  .hx-home-bottom-nav__item:active {
    transform: scale(.96);
  }

  .hx-home-bottom-nav__item:focus-visible {
    outline: 2px solid rgba(126, 236, 255, .95);
    outline-offset: 1px;
  }
}

@keyframes hxHomeQuickBarEnter {
  from {
    opacity: 0;
    transform: translate3d(-50%, 18px, 0) scale(.98);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-home-bottom-nav {
    animation: none;
  }

  .hx-home-bottom-nav__item {
    transition: none;
  }
}

/* === Home animations run only while visible — 20260726-099 === */
.hx-page--home [data-hx-viewport-animations]:not(.is-hx-animation-active),
.hx-page--home [data-hx-viewport-animations]:not(.is-hx-animation-active) *,
.hx-page--home [data-hx-viewport-animations]:not(.is-hx-animation-active)::before,
.hx-page--home [data-hx-viewport-animations]:not(.is-hx-animation-active)::after,
.hx-page--home [data-hx-viewport-animations]:not(.is-hx-animation-active) *::before,
.hx-page--home [data-hx-viewport-animations]:not(.is-hx-animation-active) *::after {
  animation-play-state: paused !important;
}
/* === Entry motion disabled — 20260726-entry-motion-off-118 === */
html.hx-entry-motion-off .hx-home-bottom-nav {
  animation: none !important;
}

/* === Home region CTA responsive copy — 20260726-home-region-responsive-119 === */
@media (max-width: 520px) {
  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service {
    min-height: 80px;
    padding: 10px 12px;
  }

  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-layout {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: clamp(8px, 2.5vw, 12px);
    padding-inline: 2px;
  }

  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-text {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 5px;
  }

  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-text b {
    min-width: 0;
    justify-content: center;
    gap: .28em;
    white-space: nowrap;
  }

  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-primary {
    font-size: clamp(13px, 3.6vw, 15.5px);
  }

  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-store {
    font-size: clamp(10.5px, 2.9vw, 12.5px);
  }

  .hx-page--home .hx-actions .hx-button.region.hx-home-region-service .hx-region-text small {
    min-height: 20px;
    padding: 4px 9px;
    justify-self: center;
    font-size: clamp(8px, 2.2vw, 9px);
  }
}

/* === Home unified purchase panel — 20260727-129 === */
.hx-page--home .hx-home-connect .hx-purchase-section {
  width: 100%;
  padding: clamp(18px, 3vw, 26px) clamp(14px, 3vw, 24px) clamp(8px, 1.5vw, 12px);
  gap: clamp(12px, 2vw, 18px);
  border-top: 0;
  background: transparent;
}

.hx-page--home .hx-home-connect .hx-purchase-card {
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: clamp(18px, 3.5vw, 26px);
  overflow: hidden;
  border: 1px solid rgba(164, 210, 255, .25);
  border-radius: clamp(26px, 4vw, 32px);
  background:
    radial-gradient(circle at 12% 0%, rgba(57, 213, 255, .16), transparent 43%),
    radial-gradient(circle at 92% 100%, rgba(180, 93, 255, .17), transparent 48%),
    linear-gradient(145deg, rgba(42, 107, 175, .27), rgba(59, 46, 126, .31));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(105, 79, 184, .13),
    0 20px 44px rgba(3, 9, 31, .26);
}

.hx-page--home .hx-home-connect .hx-purchase-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(121, 232, 255, .86), rgba(204, 153, 255, .72), transparent);
  box-shadow: 0 0 16px rgba(97, 219, 255, .42);
  pointer-events: none;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-section {
  padding: 0;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-card {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-card::before {
  content: none;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-service {
  display: block;
  margin-top: 6px;
  color: #f5fbff;
  font-size: clamp(20px, 4.5vw, 27px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.035em;
  text-shadow: 0 4px 18px rgba(113, 205, 255, .22);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value strong {
  font-size: clamp(40px, 7.5vw, 54px);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value span {
  font-size: clamp(22px, 4vw, 28px);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-top {
  margin: clamp(18px, 3vw, 24px) 0 0;
  padding: 0;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-title {
  font-size: clamp(34px, 7vw, 48px);
  line-height: .96;
  letter-spacing: -.055em;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-title::before {
  width: min(80%, 360px);
  height: 64px;
  opacity: .48;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-cta {
  width: 100%;
  max-width: none;
  margin-top: 11px;
  gap: 12px;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-cta p {
  font-size: clamp(10px, 2.4vw, 12px);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-actions {
  width: 100%;
  margin: 0;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button {
  min-height: 58px;
}

.hx-page--home .hx-home-connect .hx-purchase-bonus {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

.hx-page--home .hx-home-connect .hx-purchase-bonus .bonus-link {
  grid-column: auto;
  margin-top: 0;
}

@media (max-width: 430px) {
  .hx-page--home .hx-home-connect .hx-purchase-section {
    padding-inline: 12px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card {
    padding: 17px 14px 16px;
    border-radius: 24px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value strong {
    font-size: clamp(36px, 10.5vw, 44px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value span {
    font-size: clamp(19px, 5.6vw, 23px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-top {
    margin-top: 16px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-title {
    font-size: clamp(31px, 9.5vw, 37px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button {
    min-height: 56px;
  }
}

/* === Home monthly price label — 20260727-130 === */
.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 4px;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value small {
  grid-column: 1 / -1;
  justify-self: end;
  color: rgba(209, 235, 255, .76);
  font-size: clamp(10px, 2.1vw, 12px);
  line-height: 1;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* === Home price value — 20260728-156 === */
.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description {
  width: 100%;
  margin: clamp(14px, 2.5vw, 18px) 0 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(126, 221, 255, .23);
  border-radius: 18px;
  color: rgba(225, 239, 255, .82);
  text-align: left;
  background:
    radial-gradient(circle at 8% 20%, rgba(61, 224, 192, .11), transparent 34%),
    linear-gradient(135deg, rgba(16, 47, 88, .42), rgba(38, 34, 89, .32));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 8px 22px rgba(5, 13, 39, .12);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103, 229, 223, .25);
  border-radius: 12px;
  color: #95f1df;
  font-size: 17px;
  line-height: 1;
  background: linear-gradient(145deg, rgba(62, 219, 196, .18), rgba(73, 131, 225, .1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 0 18px rgba(65, 215, 196, .12);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy strong {
  color: #f2f8ff;
  font-size: clamp(12.5px, 2.8vw, 14px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .01em;
  text-wrap: balance;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy > span {
  color: rgba(218, 231, 251, .78);
  font-size: clamp(10.5px, 2.35vw, 12.5px);
  line-height: 1.4;
  font-weight: 700;
  text-wrap: pretty;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy b {
  color: #a9f2ff;
  font-weight: 900;
}

@media (max-width: 360px) {
  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description {
    padding: 12px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
  }
}

/* === Home downloads action — 20260728-171 === */
.hx-page--home .hx-home-connect .hx-downloads-cta {
  position: relative;
  width: 100%;
  min-height: 58px;
  margin-top: clamp(10px, 2vw, 14px);
  padding: 9px 48px 9px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(126, 221, 255, .22);
  border-radius: 18px;
  color: #f4f9ff;
  text-decoration: none;
  background:
    radial-gradient(circle at 10% 30%, rgba(64, 225, 213, .13), transparent 34%),
    linear-gradient(135deg, rgba(20, 60, 103, .46), rgba(45, 36, 99, .38));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 8px 20px rgba(4, 12, 37, .12);
  transition:
    transform .22s ease,
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

.hx-page--home .hx-home-connect .hx-downloads-cta__icon {
  position: absolute;
  left: 12px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(108, 226, 241, .3);
  border-radius: 12px;
  color: #aaf6f2;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
  background: linear-gradient(145deg, rgba(52, 211, 218, .2), rgba(82, 119, 224, .13));
}

.hx-page--home .hx-home-connect .hx-downloads-cta__copy {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.hx-page--home .hx-home-connect .hx-downloads-cta__copy strong {
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1.15;
  font-weight: 900;
}

.hx-page--home .hx-home-connect .hx-downloads-cta__copy small {
  color: rgba(199, 223, 247, .72);
  font-size: clamp(9px, 2.1vw, 10.5px);
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: .035em;
}

.hx-page--home .hx-home-connect .hx-downloads-cta__arrow {
  position: absolute;
  right: 16px;
  color: rgba(190, 226, 255, .72);
  font-size: 26px;
  line-height: 1;
  transition: transform .22s ease;
}

.hx-page--home .hx-home-connect .hx-downloads-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(127, 232, 255, .4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 10px 24px rgba(5, 15, 43, .18);
}

.hx-page--home .hx-home-connect .hx-downloads-cta:hover .hx-downloads-cta__arrow {
  transform: translateX(2px);
}

.hx-page--home .hx-home-connect .hx-downloads-cta:active {
  transform: scale(.985);
}

.hx-page--home .hx-home-connect .hx-downloads-cta:focus-visible {
  outline: 3px solid rgba(103, 225, 255, .8);
  outline-offset: 3px;
}

@media (max-width: 360px) {
  .hx-page--home .hx-home-connect .hx-downloads-cta {
    min-height: 54px;
    padding-left: 50px;
    padding-right: 40px;
  }

  .hx-page--home .hx-home-connect .hx-downloads-cta__icon {
    left: 10px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 20px;
  }

  .hx-page--home .hx-home-connect .hx-downloads-cta__arrow {
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--home .hx-home-connect .hx-downloads-cta,
  .hx-page--home .hx-home-connect .hx-downloads-cta__arrow {
    transition: none;
  }
}

/* === Instruction region action — 20260727-136 === */
.hx-page--instruction .hx-instruction-region-actions {
  width: min(100%, 510px);
  margin: 18px auto 0;
}

.hx-page--instruction .hx-instruction-region-link {
  width: 100%;
  min-height: 94px;
  padding: 14px 18px;
  border-color: rgba(107, 224, 255, .28);
  border-radius: 23px;
  background:
    radial-gradient(circle at 12% 20%, rgba(52, 210, 255, .22), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(181, 87, 255, .20), transparent 38%),
    linear-gradient(135deg, rgba(39, 101, 170, .42), rgba(68, 47, 135, .34)),
    rgba(255, 255, 255, .05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 18px rgba(255, 255, 255, .06),
    0 12px 28px rgba(2, 10, 31, .20),
    0 0 22px rgba(39, 202, 255, .10);
}

.hx-page--instruction .hx-instruction-region-link .hx-region-layout {
  width: min(100%, 390px);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 14px;
}

.hx-page--instruction .hx-instruction-region-link .hx-region-icon {
  grid-column: 1;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(132, 229, 255, .34);
  border-radius: 18px;
  font-size: 29px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .45), transparent 32%),
    linear-gradient(145deg, rgba(25, 154, 218, .44), rgba(112, 66, 192, .48));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 8px 18px rgba(3, 12, 34, .20),
    0 0 18px rgba(39, 207, 255, .16);
}

.hx-page--instruction .hx-instruction-region-link .hx-region-text {
  grid-column: 2;
  min-width: 0;
  align-items: center;
  text-align: center;
}

.hx-page--instruction .hx-instruction-region-link .hx-region-text b {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .28em;
  color: #f5fbff;
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 1.15;
  white-space: normal;
}

.hx-page--instruction .hx-instruction-region-link .hx-region-text small {
  margin-top: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(127, 222, 255, .22);
  border-radius: 999px;
  color: rgba(224, 239, 255, .88);
  font-size: clamp(9px, 2.4vw, 10.5px);
  line-height: 1;
  letter-spacing: .04em;
  background: rgba(44, 111, 176, .18);
}

@media (hover: hover) and (pointer: fine) {
  .hx-page--instruction .hx-instruction-region-link:hover {
    border-color: rgba(118, 229, 255, .42);
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .26),
      inset 0 0 18px rgba(255, 255, 255, .08),
      0 15px 30px rgba(2, 10, 31, .24),
      0 0 26px rgba(39, 202, 255, .15);
  }
}

@media (max-width: 430px) {
  .hx-page--instruction .hx-instruction-region-link {
    min-height: 88px;
    padding: 12px 13px;
  }

  .hx-page--instruction .hx-instruction-region-link .hx-region-layout {
    width: 100%;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 10px;
  }

  .hx-page--instruction .hx-instruction-region-link .hx-region-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 26px;
  }
}

@media (max-width: 340px) {
  .hx-page--instruction .hx-instruction-region-link .hx-region-layout {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 7px;
  }

  .hx-page--instruction .hx-instruction-region-link .hx-region-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .hx-page--instruction .hx-instruction-region-link .hx-region-text b {
    font-size: 15px;
  }
}

/* === Home mobile content scale — 20260727-141 ===
   Bring the supporting copy and Smart Location HUD into the same visual scale
   as the surrounding headings without changing the established composition. */
@media (max-width: 560px) {
  .hx-page--home > .hx-section:first-of-type .hx-text {
    max-width: min(100%, 410px);
    font-size: clamp(14.5px, 3.65vw, 16px);
    line-height: 1.58;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-text {
    max-width: min(100%, 378px);
    margin-top: 16px;
    margin-bottom: 18px;
    font-size: clamp(14px, 3.55vw, 15.5px);
    line-height: 1.56;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-status {
    width: min(100%, 366px);
    max-width: 366px;
    height: 44px;
    margin-bottom: 18px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-status div {
    padding-inline: 14px;
    gap: 8px;
    font-size: clamp(12.5px, 3.05vw, 13.5px);
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section .hx-status-icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner {
    width: clamp(176px, 45vw, 194px);
    height: clamp(176px, 45vw, 194px);
    margin-bottom: 21px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-ring:nth-child(2) {
    inset: 20px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-ring:nth-child(3) {
    inset: 40px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-core {
    width: clamp(98px, 25vw, 108px);
    height: clamp(98px, 25vw, 108px);
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-core-globe {
    width: clamp(54px, 14vw, 60px);
    height: clamp(54px, 14vw, 60px);
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-rocket-orbit span {
    font-size: clamp(23px, 6vw, 26px);
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-flags .hx-flags-track {
    gap: 9px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-flags .hx-flags-track span {
    min-width: 47px;
    height: 46px;
    padding-inline: 8px;
    border-radius: 14px;
    font-size: 25px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-bottom {
    margin-top: 13px;
    padding: 8px 13px;
    font-size: clamp(11.5px, 2.9vw, 12.5px);
    line-height: 1.25;
  }
}

@media (max-width: 360px) {
  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-status {
    width: min(100%, 320px);
    height: 42px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-status div {
    padding-inline: 10px;
    gap: 6px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner {
    width: 176px;
    height: 176px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-ring:nth-child(2) {
    inset: 18px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-ring:nth-child(3) {
    inset: 36px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-core {
    width: 98px;
    height: 98px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner .hx-core-globe {
    width: 54px;
    height: 54px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-flags .hx-flags-track span {
    min-width: 44px;
    height: 43px;
    padding-inline: 7px;
    border-radius: 13px;
    font-size: 23px;
  }
}

/* === Cross-page mobile readability — 20260728-144 ===
   Preserve the established composition while making secondary copy, progress
   metadata and navigation easier to read and tap on 320–430px screens. */
@media (max-width: 430px) {
  .hx-page--inner .hx-back-link {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 12.5px;
    line-height: 1.15;
  }

  .hx-page--home .hx-home-status {
    font-size: 10.5px;
  }

  .hx-page--home .hx-feature-main small {
    font-size: 10px;
  }

  .hx-page--home .hx-feature-label {
    font-size: clamp(11px, 3.25vw, 12px);
    line-height: 1.2;
  }

  .hx-page--home .hx-feature-pill {
    min-height: 28px;
    padding: 5px 7px;
    font-size: clamp(9.5px, 2.8vw, 10.5px);
    line-height: 1.15;
  }

  .hx-page--home .hx-speed-max,
  .hx-page--home .hx-feature-card.youtube .ad {
    font-size: 9px;
  }

  .hx-home-bottom-nav .hx-home-bottom-nav__item {
    font-size: clamp(12px, 3.55vw, 15px);
  }

  .hx-home-bottom-nav .hx-home-bottom-nav__label {
    font-size: clamp(12px, 3.55vw, 15px);
    line-height: 1.08;
  }

  .hx-home-bottom-nav .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label > span {
    font-size: clamp(12px, 3.55vw, 15px);
  }

  .hx-home-bottom-nav .hx-home-bottom-nav__label small {
    font-size: clamp(9.5px, 2.8vw, 10.5px);
  }

  .hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-badge {
    font-size: 9px;
  }

  .hx-page--home .hx-actions .hx-button.bonus-link .hx-bonus-main > small {
    font-size: clamp(9.5px, 2.65vw, 10.5px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-kicker {
    font-size: 10.5px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value small {
    font-size: 10.5px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy strong {
    font-size: clamp(12.5px, 3.5vw, 14px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy > span {
    font-size: clamp(11.5px, 3.2vw, 12.5px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-cta p {
    font-size: 11.5px;
  }

  .hx-page--update .hx-page-kicker,
  .hx-page--appstore .hx-page-kicker {
    font-size: 10.5px;
  }

  .hx-update-progress-label {
    font-size: 10px;
  }

  .hx-update-progress-label small {
    font-size: 9.5px;
  }

  .hx-update-progress-title {
    font-size: 12px;
  }

  .hx-update-step-kicker {
    font-size: 10.5px;
  }

  .hx-update-photo-label {
    min-height: 32px;
    font-size: 11px;
  }

  .hx-page--instruction .hx-instruction-region-link .hx-region-text small {
    min-height: 22px;
    padding: 5px 10px;
    font-size: 10.5px;
  }

  .hx-page--bonus .hx-bonus-badge-main {
    font-size: 10px;
  }

  .hx-page--bonus .hx-bonus-lead-detail {
    font-size: clamp(11.5px, 3.35vw, 12.5px);
  }

  .hx-page--bonus .hx-bonus-reward-content span {
    font-size: 9px;
  }

  .hx-page--bonus .hx-bonus-reward-content small {
    font-size: 10px;
  }

  .hx-page--bonus .hx-bonus-route-head span {
    font-size: 8.5px;
  }

  .hx-page--bonus .hx-bonus-step span {
    font-size: 10.5px;
  }

  .hx-page--bonus .hx-bonus-note {
    font-size: 10.5px;
  }

  .hx-page--bonus .hx-bonus-share-copy small {
    font-size: 10px;
  }
}

@media (max-width: 340px) {
  .hx-home-bottom-nav {
    width: calc(100% - 12px);
  }

  .hx-home-bottom-nav .hx-home-bottom-nav__item {
    padding-inline: 4px;
  }

  .hx-page--bonus .hx-bonus-title {
    font-size: 28px;
  }
}

/* === Home smart-route status — 20260728-151 === */
@media (max-width: 560px) {
  .hx-page--home .hx-home-connect .hx-smart-location-section {
    padding-bottom: 0;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-bottom {
    margin-top: 26px;
  }
}

.hx-page--home .hx-home-connect .hx-route-summary {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 28px), 360px);
  min-height: 50px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border-radius: 18px;
  color: rgba(241, 251, 255, .98);
  background:
    radial-gradient(circle at 8% 50%, rgba(71, 231, 210, .12), transparent 34%),
    linear-gradient(110deg, rgba(7, 27, 40, .88), rgba(19, 24, 54, .86));
  border: 1px solid rgba(116, 225, 218, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 12px 28px rgba(1, 7, 22, .28);
}

.hx-page--home .hx-home-connect .hx-route-summary::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: inherit;
  background: linear-gradient(180deg, #78f5df, #55b9ff);
  box-shadow: 0 0 14px rgba(105, 237, 222, .38);
}

.hx-page--home .hx-home-connect .hx-route-summary__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 18px;
  line-height: 1;
  color: #9ffff1;
  background: linear-gradient(145deg, rgba(38, 204, 177, .20), rgba(48, 117, 157, .15));
  border: 1px solid rgba(105, 241, 222, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.hx-page--home .hx-home-connect .hx-route-summary__icon svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.hx-page--home .hx-home-connect .hx-route-summary__orbit,
.hx-page--home .hx-home-connect .hx-route-summary__axis {
  fill: none;
  stroke: rgba(167, 255, 243, .86);
  stroke-width: 1.5;
}

.hx-page--home .hx-home-connect .hx-route-summary__orbit {
  opacity: .66;
}

.hx-page--home .hx-home-connect .hx-route-summary__axis {
  stroke-linecap: round;
  opacity: .48;
}

.hx-page--home .hx-home-connect .hx-route-summary__point {
  fill: #b8fff3;
  filter: drop-shadow(0 0 3px rgba(123, 248, 231, .65));
}

.hx-page--home .hx-home-connect .hx-route-summary__satellite {
  fill: #6eeeff;
  stroke: rgba(232, 255, 255, .85);
  stroke-width: 1;
}

.hx-page--home .hx-home-connect .hx-route-summary__text {
  min-width: 0;
  font-size: 12.4px;
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
  letter-spacing: .01em;
}

.hx-page--home .hx-home-connect .hx-route-summary__mode {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #bdfcff;
  background: rgba(79, 208, 190, .09);
  border: 1px solid rgba(119, 232, 214, .19);
}

@media (max-width: 360px) {
  .hx-page--home .hx-home-connect .hx-route-summary {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
  }

  .hx-page--home .hx-home-connect .hx-route-summary__icon {
    width: 32px;
    height: 32px;
  }

  .hx-page--home .hx-home-connect .hx-route-summary__mode {
    display: none;
  }
}

/* === Home Smart Location copy panel — 20260728-153 === */
.hx-page--home .hx-home-connect .hx-smart-location-section > .hx-text {
  position: relative;
  width: min(100%, 394px);
  max-width: 394px;
  margin-inline: auto;
  padding: 16px 18px 16px 23px;
  overflow: hidden;
  border-radius: 18px;
  text-align: left;
  color: rgba(225, 233, 248, .91);
  background:
    radial-gradient(circle at 100% 0%, rgba(120, 104, 255, .11), transparent 42%),
    linear-gradient(120deg, rgba(13, 31, 52, .52), rgba(27, 25, 59, .40));
  border: 1px solid rgba(156, 211, 245, .13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 12px 30px rgba(2, 8, 25, .14);
}

.hx-page--home .hx-home-connect .hx-smart-location-section > .hx-text::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #62efff, #8d83ff 58%, #e77acb);
  box-shadow: 0 0 14px rgba(98, 239, 255, .28);
}

@media (max-width: 560px) {
  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-text {
    width: min(calc(100% - 18px), 394px);
    padding: 15px 17px 15px 21px;
    font-size: clamp(13.5px, 3.45vw, 15px);
    line-height: 1.58;
  }
}

/* === Home premium purchase panel — 20260728-161 === */
.hx-page--home .hx-home-connect .hx-purchase-section {
  padding-top: clamp(20px, 3vw, 28px);
}

.hx-page--home .hx-home-connect .hx-purchase-card {
  isolation: isolate;
  padding: clamp(20px, 3.4vw, 25px);
  border-color: rgba(157, 217, 255, .22);
  background:
    radial-gradient(circle at 4% 0%, rgba(53, 211, 255, .13), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(169, 86, 255, .14), transparent 42%),
    linear-gradient(145deg, rgba(17, 45, 76, .90), rgba(31, 27, 68, .92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(122, 98, 204, .12),
    0 22px 52px rgba(2, 8, 27, .30),
    0 0 32px rgba(73, 184, 255, .055);
}

.hx-page--home .hx-home-connect .hx-purchase-card::before {
  left: 12%;
  width: 76%;
  height: 2px;
  opacity: .78;
  background: linear-gradient(90deg, transparent, #67e8ff 32%, #d9c8ff 68%, transparent);
  box-shadow: 0 0 18px rgba(103, 232, 255, .35);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-card {
  align-items: center;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-kicker {
  color: rgba(170, 222, 250, .76);
  letter-spacing: .18em;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-service {
  margin-top: 7px;
  font-size: clamp(22px, 4.5vw, 28px);
  color: #f7fbff;
  text-shadow: 0 6px 20px rgba(105, 203, 255, .20);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value {
  column-gap: 5px;
  row-gap: 5px;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value strong {
  color: #fff;
  font-size: clamp(44px, 7.7vw, 56px);
  letter-spacing: -.055em;
  text-shadow: 0 8px 26px rgba(119, 199, 255, .22);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value span {
  color: #8deeff;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value small {
  color: rgba(210, 234, 255, .72);
  letter-spacing: .15em;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description {
  position: relative;
  margin-top: clamp(14px, 2.5vw, 17px);
  padding: 13px 14px 13px 16px;
  gap: 12px;
  border: 0;
  border-radius: 4px 16px 16px 4px;
  background:
    linear-gradient(90deg, rgba(51, 203, 216, .11), rgba(90, 101, 202, .08) 62%, rgba(153, 90, 220, .055));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 8px 24px rgba(5, 12, 36, .10);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #68f0eb, #8da8ff 60%, #c58cff);
  box-shadow: 0 0 12px rgba(104, 240, 235, .28);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__icon {
  border-color: rgba(112, 231, 221, .22);
  color: #a3fff1;
  background: linear-gradient(145deg, rgba(54, 208, 190, .16), rgba(76, 125, 213, .11));
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy {
  gap: 4px;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy strong {
  color: #f7fbff;
  font-size: clamp(13px, 2.8vw, 14.5px);
  letter-spacing: 0;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description__copy > span {
  color: rgba(220, 233, 251, .76);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-top {
  margin-top: clamp(14px, 2.5vw, 18px);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-title {
  font-size: clamp(32px, 6.4vw, 43px);
  line-height: 1;
  letter-spacing: -.045em;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-title::before {
  width: min(72%, 300px);
  height: 54px;
  opacity: .34;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-cta {
  margin-top: 9px;
  gap: 11px;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-cta p {
  color: rgba(200, 231, 250, .77);
  letter-spacing: .24em;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-actions {
  grid-template-columns: 1.08fr .92fr;
  gap: 12px;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button {
  min-height: 60px;
  border-radius: 19px;
  font-size: clamp(17px, 3.7vw, 20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 10px 24px rgba(3, 9, 31, .18);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button.telegram {
  border-color: rgba(90, 222, 255, .38);
  background:
    radial-gradient(circle at 16% 0%, rgba(111, 235, 255, .24), transparent 42%),
    linear-gradient(135deg, rgba(31, 117, 181, .58), rgba(32, 50, 111, .50));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 12px 28px rgba(37, 178, 246, .13);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button.vk {
  border-color: rgba(145, 126, 245, .27);
  background:
    radial-gradient(circle at 18% 0%, rgba(146, 169, 255, .18), transparent 44%),
    linear-gradient(135deg, rgba(69, 82, 157, .43), rgba(87, 54, 139, .38));
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.hx-page--home .hx-home-connect .hx-purchase-card > .hx-purchase-bonus {
  width: 100%;
  margin: 14px 0 0;
}

.hx-page--home .hx-home-connect .hx-purchase-bonus .bonus-link {
  width: 100%;
  min-height: 64px;
  border-color: rgba(239, 202, 128, .18);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 203, 104, .12), transparent 46%),
    linear-gradient(145deg, rgba(98, 71, 55, .24), rgba(90, 49, 99, .18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 9px 22px rgba(20, 9, 22, .14);
}

@media (max-width: 430px) {
  .hx-page--home .hx-home-connect .hx-purchase-card {
    padding: 18px 14px 16px;
    border-radius: 25px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-value strong {
    font-size: clamp(38px, 10.8vw, 46px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-description {
    padding: 12px 12px 12px 14px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-title {
    font-size: clamp(30px, 8.8vw, 36px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-actions {
    grid-template-columns: 1.05fr .95fr;
    gap: 9px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button {
    min-height: 56px;
    border-radius: 17px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-icon {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 350px) {
  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-card {
    gap: 10px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-price-service {
    font-size: 20px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button {
    gap: 8px;
    padding-inline: 10px;
    font-size: 16px;
  }
}

/* === Home premium quick dock — 20260728-162 === */
@media (max-width: 560px) {
  .hx-home-bottom-nav {
    isolation: isolate;
    width: min(calc(100% - 22px), 424px);
    min-height: 70px;
    padding: 5px;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(170, 215, 255, .16);
    border-radius: 24px;
    background:
      radial-gradient(circle at 14% -24%, rgba(66, 213, 255, .13), transparent 45%),
      radial-gradient(circle at 94% 130%, rgba(166, 104, 255, .12), transparent 48%),
      linear-gradient(180deg, rgba(14, 27, 52, .94), rgba(8, 15, 35, .94));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 14px 34px rgba(2, 7, 23, .32),
      0 0 0 1px rgba(70, 179, 244, .035);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
  }

  .hx-home-bottom-nav::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 14%;
    width: 72%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(115, 228, 255, .62), rgba(202, 174, 255, .44), transparent);
    box-shadow: 0 0 12px rgba(93, 217, 255, .18);
    pointer-events: none;
  }

  .hx-home-bottom-nav__item {
    position: relative;
    min-height: 58px;
    padding: 7px clamp(8px, 2.8vw, 13px);
    gap: clamp(8px, 2.4vw, 11px);
    border: 0;
    border-radius: 19px;
    color: rgba(244, 250, 255, .94);
    font-size: clamp(13px, 3.65vw, 16px);
    background: transparent;
    box-shadow: none;
    text-shadow: 0 1px 12px rgba(174, 221, 255, .12);
    transition:
      color .22s ease,
      background .22s ease,
      transform .18s cubic-bezier(.2, .8, .2, 1);
  }

  .hx-home-bottom-nav__item--guide {
    gap: clamp(8px, 2.4vw, 11px);
    background: linear-gradient(135deg, rgba(25, 129, 181, .18), rgba(43, 69, 129, .08));
  }

  .hx-home-bottom-nav__item--update {
    background: linear-gradient(135deg, rgba(57, 90, 166, .08), rgba(111, 61, 167, .17));
  }

  .hx-home-bottom-nav__item + .hx-home-bottom-nav__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    width: 1px;
    height: 64%;
    background: linear-gradient(180deg, transparent, rgba(185, 215, 255, .20), transparent);
    pointer-events: none;
  }

  .hx-home-bottom-nav__icon {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border: 1px solid rgba(116, 226, 255, .19);
    border-radius: 13px;
    color: #8feeff;
    font-size: 21px;
    background:
      radial-gradient(circle at 28% 18%, rgba(138, 235, 255, .22), transparent 45%),
      linear-gradient(145deg, rgba(48, 154, 206, .20), rgba(79, 82, 164, .18));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .11),
      0 6px 16px rgba(19, 127, 190, .10);
    text-shadow: 0 0 12px rgba(86, 224, 255, .38);
  }

  .hx-home-bottom-nav__item--update .hx-home-bottom-nav__icon {
    border-color: rgba(117, 231, 240, .21);
    background:
      radial-gradient(circle at 26% 18%, rgba(113, 243, 245, .20), transparent 46%),
      linear-gradient(145deg, rgba(32, 166, 188, .18), rgba(89, 72, 177, .19));
  }

  .hx-home-bottom-nav__label,
  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label {
    align-items: flex-start;
    gap: 3px;
    text-align: left;
  }

  .hx-home-bottom-nav__item--guide > .hx-home-bottom-nav__icon,
  .hx-home-bottom-nav__item--guide > .hx-home-bottom-nav__label {
    transform: none;
  }

  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label > span {
    font-size: clamp(12.5px, 3.55vw, 15px);
    line-height: 1.05;
  }

  .hx-home-bottom-nav__label small,
  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label small {
    color: rgba(194, 220, 244, .66);
    font-size: clamp(9.5px, 2.75vw, 11px);
  }

  .hx-home-bottom-nav__item:active {
    transform: translateY(1px) scale(.985);
    background-color: rgba(117, 173, 232, .10);
  }

  .hx-home-bottom-nav__item:focus-visible {
    outline: 2px solid rgba(132, 235, 255, .90);
    outline-offset: -2px;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 560px) {
  .hx-home-bottom-nav__item:hover {
    color: #fff;
    background-color: rgba(102, 161, 224, .10);
  }
}

@media (max-width: 350px) {
  .hx-home-bottom-nav {
    width: calc(100% - 14px);
    padding: 4px;
  }

  .hx-home-bottom-nav__item {
    padding-inline: 7px;
    gap: 7px;
  }

  .hx-home-bottom-nav__icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 19px;
  }
}

/* === Downloads page — 20260728-174 === */
.hx-page--downloads {
  max-width: 800px;
}

.hx-page--downloads .hx-downloads-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: min(780px, calc(100dvh - 24px));
  padding: clamp(38px, 8vw, 70px) clamp(18px, 6vw, 56px) clamp(28px, 6vw, 50px);
  isolation: isolate;
}

.hx-downloads-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 6%;
  left: 50%;
  width: min(520px, 92%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(74, 214, 255, .16) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(148, 111, 255, .16), transparent 64%);
  background-size: 28px 28px, auto;
  mask-image: radial-gradient(circle, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 70%);
  pointer-events: none;
}

.hx-downloads-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin-bottom: clamp(24px, 5vw, 38px);
  padding: 9px 16px;
  border: 1px solid rgba(111, 221, 255, .22);
  border-radius: 999px;
  color: rgba(225, 246, 255, .9);
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(19, 116, 148, .26), rgba(74, 51, 129, .24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.hx-downloads-badge > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #55e8ff;
  box-shadow: 0 0 16px rgba(85, 232, 255, .8);
}

.hx-downloads-icon {
  position: relative;
  width: clamp(116px, 24vw, 156px);
  height: clamp(96px, 20vw, 132px);
  margin-bottom: clamp(22px, 4vw, 30px);
  filter: drop-shadow(0 22px 32px rgba(4, 18, 44, .36));
}

.hx-downloads-icon__app {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(82px, 17vw, 108px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(169, 229, 255, .32);
  border-radius: clamp(23px, 5vw, 32px);
  background:
    radial-gradient(circle at 28% 18%, rgba(194, 247, 255, .24), transparent 48%),
    linear-gradient(145deg, rgba(27, 106, 153, .78), rgba(84, 55, 146, .78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 14px 30px rgba(2, 12, 34, .28);
}

.hx-downloads-icon__app img {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.hx-downloads-icon__app--throne {
  left: 0;
  z-index: 1;
  transform: translateY(-50%) rotate(-7deg);
}

.hx-downloads-icon__app--happ {
  right: 0;
  z-index: 2;
  transform: translateY(-50%) rotate(7deg);
}

.hx-downloads-icon__app--happ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hx-downloads-icon__arrow {
  position: absolute;
  z-index: 3;
  right: -6px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(133, 234, 255, .5);
  border-radius: 13px;
  color: #eaffff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(145deg, #198dc0, #6752ce);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 8px 22px rgba(18, 86, 166, .36);
}

.hx-page--downloads .hx-title {
  margin: 0;
  font-size: clamp(38px, 8vw, 64px);
  line-height: .98;
  letter-spacing: -.045em;
}

.hx-page--downloads > .hx-downloads-shell > .hx-text {
  max-width: 590px;
  margin: clamp(16px, 3vw, 24px) auto clamp(28px, 6vw, 48px);
  color: rgba(220, 232, 248, .78);
  font-size: clamp(16px, 2.8vw, 20px);
  line-height: 1.55;
  font-weight: 650;
}

.hx-downloads-apps {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 650px;
}

.hx-download-card {
  --download-accent: 87, 224, 255;
  --download-accent-strong: 27, 162, 210;
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  grid-template-areas:
    "icon content"
    "actions actions";
  align-items: center;
  gap: 18px;
  padding: clamp(17px, 4vw, 22px);
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(var(--download-accent), .34);
  border-radius: clamp(22px, 5vw, 28px);
  background:
    radial-gradient(circle at 5% 0%, rgba(var(--download-accent), .18), transparent 42%),
    linear-gradient(145deg, rgba(27, 65, 113, .76), rgba(52, 38, 103, .68));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 18px 42px rgba(2, 12, 32, .25);
}

.hx-download-card--throne {
  --download-accent: 128, 255, 95;
  --download-accent-strong: 23, 190, 103;
  border-color: rgba(var(--download-accent), .58);
  background:
    linear-gradient(rgba(var(--download-accent), .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--download-accent), .045) 1px, transparent 1px),
    radial-gradient(circle at 8% 0%, rgba(var(--download-accent), .22), transparent 43%),
    linear-gradient(145deg, rgba(8, 32, 38, .94), rgba(28, 28, 72, .88));
  background-size:
    22px 22px,
    22px 22px,
    auto,
    auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 38px rgba(var(--download-accent), .035),
    0 18px 42px rgba(2, 12, 32, .3),
    0 0 24px rgba(var(--download-accent), .08);
}

.hx-download-card--throne::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 10px;
  border-radius: calc(clamp(22px, 5vw, 28px) - 10px);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--download-accent)), transparent) top left / 38px 2px no-repeat,
    linear-gradient(180deg, rgb(var(--download-accent)), transparent) top left / 2px 38px no-repeat,
    linear-gradient(270deg, rgb(var(--download-accent)), transparent) bottom right / 38px 2px no-repeat,
    linear-gradient(0deg, rgb(var(--download-accent)), transparent) bottom right / 2px 38px no-repeat;
  opacity: .78;
  filter: drop-shadow(0 0 6px rgba(var(--download-accent), .45));
}

.hx-download-card--throne .hx-download-card__icon {
  border-color: rgba(var(--download-accent), .64);
  border-radius: 18px;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, .22), transparent 46%),
    linear-gradient(145deg, rgba(38, 113, 70, .88), rgba(35, 35, 105, .84));
  clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 0 20px rgba(var(--download-accent), .08),
    0 12px 28px rgba(5, 24, 59, .32),
    0 0 24px rgba(var(--download-accent), .2);
}

.hx-download-card--throne .hx-download-card__platform {
  text-shadow: 0 0 12px rgba(var(--download-accent), .5);
}

.hx-download-card--throne .hx-download-card__content h2 {
  text-shadow: 0 0 20px rgba(var(--download-accent), .14);
}

.hx-download-card--throne .hx-download-card__button {
  border-color: rgba(var(--download-accent), .55);
  background:
    linear-gradient(90deg, rgba(var(--download-accent-strong), .68), rgba(42, 55, 126, .72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 24px rgba(var(--download-accent), .055),
    0 0 18px rgba(var(--download-accent), .08);
}

.hx-download-card--throne .hx-download-card__button:hover {
  border-color: rgba(var(--download-accent), .82);
  background:
    linear-gradient(90deg, rgba(var(--download-accent-strong), .82), rgba(52, 66, 151, .78));
}

.hx-download-card--happ {
  --download-accent: 103, 190, 255;
  --download-accent-strong: 48, 137, 216;
}

.hx-download-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(120deg, transparent 25%, rgba(var(--download-accent), .07) 50%, transparent 75%);
}

.hx-download-card__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: 1px solid rgba(var(--download-accent), .38);
  border-radius: 21px;
  background:
    radial-gradient(circle at 28% 15%, rgba(255, 255, 255, .2), transparent 50%),
    linear-gradient(145deg, rgba(var(--download-accent-strong), .46), rgba(75, 62, 157, .52));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 12px 28px rgba(5, 24, 59, .28),
    0 0 25px rgba(var(--download-accent), .1);
}

.hx-download-card__icon img {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.hx-download-card--happ .hx-download-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hx-download-card__content {
  grid-area: content;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hx-download-card__platform {
  display: block;
  margin-bottom: 5px;
  color: rgba(var(--download-accent), .98);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hx-download-card__content h2 {
  margin: 0;
  color: #f8fcff;
  font-size: clamp(24px, 4.5vw, 30px);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.hx-download-card__content p {
  margin: 7px 0 0;
  color: rgba(214, 230, 248, .72);
  font-size: clamp(13px, 2.4vw, 15px);
  line-height: 1.4;
  font-weight: 700;
}

.hx-download-card__content .hx-download-card__purpose {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: rgba(var(--download-accent), .94);
  font-size: clamp(11px, 2vw, 13px);
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: .01em;
}

.hx-download-card__purpose::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--download-accent));
  box-shadow: 0 0 12px rgba(var(--download-accent), .58);
}

.hx-download-card__actions {
  grid-area: actions;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.hx-download-platform-picker {
  grid-area: actions;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
}

.hx-download-platform-picker > .hx-download-card__actions {
  grid-area: auto;
  width: 100%;
}

.hx-download-platform-picker > legend,
.hx-download-platform-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hx-download-platform-picker__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(var(--download-accent), .2);
  border-radius: 15px;
  background: rgba(6, 21, 51, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.hx-download-platform-picker__tabs label {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 7px 5px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: rgba(205, 224, 244, .7);
  font-size: clamp(11px, 2.7vw, 13px);
  line-height: 1;
  font-weight: 850;
  cursor: pointer;
  user-select: none;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.hx-download-platform-picker__tabs label:hover {
  color: #f7fdff;
  background: rgba(var(--download-accent), .08);
}

.hx-download-platform-picker__input--windows:checked
  ~ .hx-download-platform-picker__tabs label[for="happ-platform-windows"],
.hx-download-platform-picker__input--android:checked
  ~ .hx-download-platform-picker__tabs label[for="happ-platform-android"],
.hx-download-platform-picker__input--iphone:checked
  ~ .hx-download-platform-picker__tabs label[for="happ-platform-iphone"] {
  color: #f8fdff;
  border-color: rgba(var(--download-accent), .34);
  background:
    linear-gradient(145deg, rgba(var(--download-accent-strong), .48), rgba(89, 69, 177, .42));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 5px 14px rgba(4, 14, 39, .18);
}

.hx-download-platform-picker__input--windows:focus-visible
  ~ .hx-download-platform-picker__tabs label[for="happ-platform-windows"],
.hx-download-platform-picker__input--android:focus-visible
  ~ .hx-download-platform-picker__tabs label[for="happ-platform-android"],
.hx-download-platform-picker__input--iphone:focus-visible
  ~ .hx-download-platform-picker__tabs label[for="happ-platform-iphone"] {
  outline: 3px solid rgba(102, 229, 255, .72);
  outline-offset: 2px;
}

.hx-download-platform-picker .hx-download-card__button {
  display: none;
}

.hx-download-platform-picker__input--windows:checked
  ~ .hx-download-card__actions .hx-download-card__button--windows,
.hx-download-platform-picker__input--android:checked
  ~ .hx-download-card__actions .hx-download-card__button--android,
.hx-download-platform-picker__input--iphone:checked
  ~ .hx-download-card__actions .hx-download-card__button--iphone {
  display: grid;
}

.hx-download-card__button {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  min-height: 52px;
  padding: 10px 14px;
  text-decoration: none;
  border: 1px solid rgba(var(--download-accent), .36);
  border-radius: 16px;
  color: #f7fdff;
  background:
    linear-gradient(135deg, rgba(var(--download-accent-strong), .55), rgba(86, 66, 179, .58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.hx-download-card__button > span {
  color: rgba(var(--download-accent), 1);
  font-size: 25px;
  line-height: 1;
}

.hx-download-card__button strong {
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
}

.hx-download-card__button small {
  color: rgba(215, 235, 250, .72);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
}

.hx-download-card__button:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--download-accent), .65);
  background: linear-gradient(135deg, rgba(var(--download-accent-strong), .68), rgba(102, 77, 203, .68));
}

.hx-download-card__button:active {
  transform: translateY(0);
}

.hx-download-card__button:focus-visible {
  outline: 3px solid rgba(102, 229, 255, .72);
  outline-offset: 3px;
}

.hx-downloads-empty {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 24px);
  width: 100%;
  max-width: 620px;
  padding: clamp(20px, 4vw, 30px);
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(159, 215, 255, .2);
  border-radius: clamp(24px, 5vw, 34px);
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 219, 255, .15), transparent 45%),
    linear-gradient(145deg, rgba(44, 81, 133, .46), rgba(57, 43, 111, .43));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 18px 45px rgba(2, 12, 32, .28);
}

.hx-downloads-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(126, 229, 255, .08) 50%, transparent 80%);
}

.hx-downloads-folder {
  position: relative;
  width: clamp(64px, 13vw, 82px);
  height: clamp(58px, 12vw, 74px);
  border: 1px solid rgba(121, 231, 255, .32);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(38, 162, 198, .37), rgba(85, 68, 162, .42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.hx-downloads-folder::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 15px;
  width: 26px;
  height: 7px;
  border-radius: 5px 5px 2px 2px;
  background: rgba(184, 242, 255, .9);
}

.hx-downloads-folder::after {
  content: "";
  position: absolute;
  inset: 22px 13px 13px;
  border: 2px solid rgba(210, 249, 255, .88);
  border-radius: 5px 10px 10px 10px;
}

.hx-downloads-empty-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hx-downloads-empty-copy strong {
  display: block;
  margin-bottom: 7px;
  color: #f6fbff;
  font-size: clamp(19px, 3.6vw, 26px);
  line-height: 1.15;
}

.hx-downloads-empty-copy p {
  margin: 0;
  color: rgba(212, 228, 246, .74);
  font-size: clamp(14px, 2.5vw, 17px);
  line-height: 1.48;
  font-weight: 650;
}

.hx-downloads-note {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin-top: clamp(20px, 4vw, 30px);
  padding: 17px 4px 0;
  color: rgba(201, 226, 244, .76);
  text-align: left;
}

.hx-downloads-note::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(90, 218, 241, .30) 24%,
      rgba(151, 119, 244, .26) 76%,
      transparent
    );
}

.hx-downloads-note > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(83, 231, 204, .34);
  border-radius: 50%;
  color: #91fae5;
  font-size: 15px;
  font-weight: 900;
  background: rgba(32, 167, 151, .13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 18px rgba(56, 218, 197, .08);
}

.hx-downloads-note p {
  margin: 0;
  font-size: clamp(12.5px, 2.3vw, 14px);
  line-height: 1.48;
  font-weight: 700;
}

.hx-downloads-note__primary,
.hx-downloads-note__secondary {
  display: inline;
}

.hx-downloads-note__primary {
  color: #edf8ff;
  font-weight: 800;
}

.hx-downloads-note__secondary {
  color: rgba(190, 213, 237, .68);
  font-weight: 700;
}

.hx-page--downloads .hx-back-link {
  margin-top: clamp(26px, 5vw, 38px);
}

/* === Downloads staged reveal — 20260728-177 === */
.hx-page--downloads .hx-downloads-reveal {
  opacity: 0;
  transform:
    translate3d(
      var(--hx-downloads-reveal-x, 0),
      var(--hx-downloads-reveal-y, 12px),
      0
    )
    scale(var(--hx-downloads-reveal-scale, .99));
  transition:
    opacity .76s cubic-bezier(.2, .75, .25, 1),
    transform .90s cubic-bezier(.16, 1.06, .3, 1);
  transition-delay: var(--hx-downloads-reveal-delay, 0ms);
}

.hx-page--downloads .hx-downloads-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 430px) {
  .hx-page--downloads .hx-downloads-shell {
    min-height: calc(100dvh - 24px);
    padding-inline: 18px;
  }

  .hx-downloads-empty {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .hx-downloads-note {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 2px 0;
  }

  .hx-downloads-note > span {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}

@media (min-width: 560px) {
  .hx-download-card {
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-areas:
      "icon content"
      "actions actions";
  }

  .hx-download-card__icon {
    width: 74px;
    height: 74px;
  }

  .hx-download-card__button {
    grid-template-columns: 25px 1fr;
    min-height: 58px;
    padding-inline: 12px;
  }

  .hx-download-card__button small {
    grid-column: 2;
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--downloads .hx-downloads-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hx-page--downloads *,
  .hx-page--downloads *::before,
  .hx-page--downloads *::after {
    scroll-behavior: auto;
  }
}

/* === Downloads desktop layout — 20260728-182 === */
@media (min-width: 900px) {
  .hx-page--downloads {
    max-width: 1240px;
  }

  .hx-page--downloads .hx-downloads-shell {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    grid-template-areas:
      "badge badge"
      "icon title"
      "icon text"
      "apps apps"
      "note note"
      "back back";
    align-items: center;
    column-gap: clamp(30px, 4vw, 54px);
    row-gap: 0;
    min-height: auto;
    padding: clamp(48px, 5vw, 72px);
    text-align: left;
  }

  .hx-page--downloads .hx-downloads-badge {
    grid-area: badge;
    justify-self: center;
    margin: 0 0 38px;
  }

  .hx-page--downloads .hx-downloads-icon {
    grid-area: icon;
    justify-self: end;
    width: 170px;
    height: 142px;
    margin: 0;
  }

  .hx-page--downloads .hx-title {
    grid-area: title;
    align-self: end;
    max-width: none;
    margin: 0;
    font-size: clamp(50px, 5.2vw, 72px);
    line-height: .96;
  }

  .hx-page--downloads > .hx-downloads-shell > .hx-text {
    grid-area: text;
    align-self: start;
    max-width: 680px;
    margin: 16px 0 0;
    font-size: clamp(17px, 1.65vw, 20px);
    text-align: left;
  }

  .hx-page--downloads .hx-downloads-apps {
    grid-area: apps;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(18px, 2.4vw, 28px);
    max-width: none;
    margin-top: clamp(42px, 5vw, 60px);
  }

  .hx-page--downloads .hx-download-card {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "icon content"
      "actions actions";
    align-content: stretch;
    gap: 20px;
    min-width: 0;
    padding: clamp(22px, 2.6vw, 28px);
  }

  .hx-page--downloads .hx-download-card__icon {
    width: 84px;
    height: 84px;
  }

  .hx-page--downloads .hx-download-card__button {
    grid-template-columns: 26px 1fr auto;
    min-height: 60px;
    padding-inline: 16px;
  }

  .hx-page--downloads .hx-download-card__button small {
    grid-column: auto;
    margin-top: 0;
  }

  .hx-page--downloads .hx-downloads-note {
    grid-area: note;
    justify-self: center;
    max-width: 760px;
    margin-top: 28px;
  }

  .hx-page--downloads .hx-back-link {
    grid-area: back;
    justify-self: center;
    margin: 30px 0 0;
  }
}

@media (min-width: 900px) and (max-height: 760px) {
  .hx-page--downloads .hx-downloads-shell {
    padding-block: 42px;
  }

  .hx-page--downloads .hx-download-card {
    padding-block: 22px;
  }
}

/* === Home premium quick dock — refined 20260728-163 === */
@media (max-width: 560px) {
  .hx-home-bottom-nav {
    width: min(calc(100% - 20px), 428px);
    min-height: 76px;
    padding: 6px;
    gap: 6px;
    overflow: hidden;
    border: 1px solid rgba(132, 210, 255, .24);
    border-radius: 25px;
    background:
      radial-gradient(circle at 18% -30%, rgba(51, 211, 255, .20), transparent 47%),
      radial-gradient(circle at 86% 135%, rgba(176, 98, 255, .17), transparent 50%),
      linear-gradient(180deg, rgba(12, 30, 57, .96), rgba(8, 17, 39, .96));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      inset 0 -1px 0 rgba(116, 87, 196, .10),
      0 14px 36px rgba(2, 8, 25, .38),
      0 0 0 1px rgba(50, 182, 241, .04);
  }

  .hx-home-bottom-nav::before {
    left: 10%;
    width: 80%;
    background: linear-gradient(90deg, transparent, rgba(96, 230, 255, .78), rgba(197, 149, 255, .58), transparent);
  }

  .hx-home-bottom-nav__item {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 0;
    min-height: 62px;
    padding: 8px 12px 8px 50px;
    border: 1px solid rgba(150, 211, 255, .16);
    border-radius: 19px;
    color: #f5f9ff;
    font-size: clamp(13px, 3.65vw, 16px);
    text-align: center;
    background:
      radial-gradient(circle at 12% 0%, rgba(114, 231, 255, .15), transparent 48%),
      linear-gradient(145deg, rgba(39, 119, 174, .29), rgba(54, 67, 137, .22));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      inset 0 -1px 0 rgba(34, 116, 178, .12),
      0 7px 18px rgba(3, 17, 41, .16);
  }

  .hx-home-bottom-nav__item--guide {
    gap: 0;
    background:
      radial-gradient(circle at 8% -8%, rgba(85, 226, 255, .23), transparent 52%),
      linear-gradient(145deg, rgba(25, 132, 184, .34), rgba(42, 74, 146, .26));
  }

  .hx-home-bottom-nav__item--update {
    background:
      radial-gradient(circle at 92% -10%, rgba(186, 128, 255, .20), transparent 50%),
      linear-gradient(145deg, rgba(35, 102, 164, .27), rgba(88, 60, 159, .31));
  }

  .hx-home-bottom-nav__item + .hx-home-bottom-nav__item::before {
    content: none;
  }

  .hx-home-bottom-nav__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 38px;
    min-width: 38px;
    height: 38px;
    transform: translateY(-50%);
    border-color: rgba(113, 228, 255, .28);
    background:
      radial-gradient(circle at 30% 20%, rgba(151, 241, 255, .28), transparent 46%),
      linear-gradient(145deg, rgba(32, 155, 205, .30), rgba(79, 81, 172, .25));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .16),
      0 7px 18px rgba(14, 128, 194, .16);
  }

  .hx-home-bottom-nav__item--guide > .hx-home-bottom-nav__icon {
    transform: translateY(-50%);
  }

  .hx-home-bottom-nav__item--update .hx-home-bottom-nav__icon {
    transform: translateY(-50%);
  }

  .hx-home-bottom-nav__label,
  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .hx-home-bottom-nav__item--guide > .hx-home-bottom-nav__label {
    transform: none;
  }

  .hx-home-bottom-nav__item:active {
    transform: translateY(1px) scale(.98);
    filter: brightness(1.08);
  }
}

/* === Home premium quick dock — compact 20260728-164 === */
@media (max-width: 560px) {
  .hx-home-bottom-nav {
    width: min(calc(100% - 22px), 424px);
    min-height: 68px;
    padding: 5px;
    gap: 5px;
    border-radius: 22px;
  }

  .hx-home-bottom-nav__item {
    min-height: 56px;
    padding: 7px 10px 7px 45px;
    border-radius: 17px;
    font-size: clamp(12.5px, 3.45vw, 15px);
  }

  .hx-home-bottom-nav__icon {
    left: 8px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: 19px;
  }

  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label > span {
    font-size: clamp(12px, 3.35vw, 14px);
  }

  .hx-home-bottom-nav__label small,
  .hx-home-bottom-nav__item--guide .hx-home-bottom-nav__label small {
    font-size: clamp(9px, 2.55vw, 10.5px);
  }
}

/* === Home quick dock guide alignment — 20260728-165 === */
@media (max-width: 560px) {
  .hx-home-bottom-nav__item--guide > .hx-home-bottom-nav__label {
    transform: translateX(-4px);
  }
}

@media (max-width: 350px) {
  .hx-home-bottom-nav__item--guide > .hx-home-bottom-nav__label {
    transform: translateX(-2px);
  }
}

@media (max-width: 350px) {
  .hx-home-bottom-nav {
    min-height: 66px;
  }

  .hx-home-bottom-nav__item {
    min-height: 54px;
    padding-inline: 40px 6px;
  }

  .hx-home-bottom-nav__icon {
    left: 6px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

@media (max-width: 350px) {
  .hx-home-bottom-nav {
    width: calc(100% - 14px);
    min-height: 72px;
    gap: 4px;
    padding: 5px;
  }

  .hx-home-bottom-nav__item {
    min-height: 60px;
    padding-inline: 43px 7px;
  }

  .hx-home-bottom-nav__icon {
    left: 7px;
    width: 34px;
    min-width: 34px;
    height: 34px;
  }
}

/* === Cross-platform responsive layout — 20260730-208 === */
/*
  The existing 390–560 px composition is the iPhone reference.
  These rules only address narrower Android screens, tablets and desktop Windows.
*/
@media (min-width: 361px) and (max-width: 389px) {
  .hx-page--home .hx-home-connect .hx-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .hx-page--home .hx-feature-card {
    height: auto;
    min-height: 164px;
  }

  .hx-page--home .hx-feature-card.youtube {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 142px;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .hx-site {
    padding: 22px 22px 52px;
  }

  .hx-page:not(.hx-page--downloads) {
    max-width: 760px;
  }

  .hx-page--home > .hx-section,
  .hx-page--home .hx-home-connect > .hx-section {
    padding-inline: clamp(32px, 6vw, 48px);
  }

  .hx-page--home .hx-home-connect .hx-feature-grid {
    max-width: 650px;
    margin-inline: auto;
    gap: 12px;
  }

  .hx-page--home .hx-feature-card {
    height: 158px;
    min-height: 158px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-text,
  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-status,
  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-bottom {
    max-width: 620px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card {
    max-width: 660px;
    margin-inline: auto;
  }

  .hx-page--inner:not(.hx-page--downloads) {
    max-width: 780px;
  }

  .hx-page--inner:not(.hx-page--downloads) > .hx-section {
    padding-inline: clamp(34px, 6vw, 52px);
  }

  .hx-page--update .hx-update-guide > *,
  .hx-page--appstore .hx-appstore-guide > *,
  .hx-page--instruction .hx-instruction-shell > *,
  .hx-page--bonus .hx-bonus-hub > * {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .hx-site {
    padding: 28px 28px 58px;
  }

  .hx-page:not(.hx-page--downloads) {
    max-width: 1180px;
  }

  .hx-page--home > .hx-section {
    padding: 54px clamp(52px, 6vw, 78px) 48px;
  }

  .hx-page--home > .hx-section .hx-icon {
    width: 156px;
    height: 156px;
  }

  .hx-page--home > .hx-section .hx-icon span {
    font-size: 88px;
  }

  .hx-page--home > .hx-section .hx-title {
    font-size: clamp(48px, 5vw, 66px);
  }

  .hx-page--home > .hx-section .hx-title > span {
    font-size: clamp(24px, 2.5vw, 34px);
  }

  .hx-page--home > .hx-section > .hx-text {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.62;
  }

  .hx-page--home .hx-home-connect > .hx-section {
    padding-inline: clamp(52px, 6vw, 78px);
  }

  .hx-page--home .hx-home-connect .hx-feature-grid {
    max-width: 840px;
    margin-inline: auto;
    gap: 16px;
  }

  .hx-page--home .hx-feature-card {
    height: 190px;
    min-height: 190px;
    padding: 17px 12px 14px;
  }

  .hx-page--home .hx-feature-visual {
    min-height: 56px;
  }

  .hx-page--home .hx-feature-label {
    font-size: 13.5px;
    line-height: 1.12;
  }

  .hx-page--home .hx-feature-pill {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(410px, 1.08fr);
    grid-template-areas:
      "title scanner"
      "copy scanner"
      "status scanner"
      "summary flags";
    align-items: center;
    column-gap: clamp(36px, 5vw, 70px);
    row-gap: 20px;
    padding-block: 64px 58px;
    text-align: left;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > * {
    min-width: 0;
  }

  .hx-page--home .hx-icon span,
  .hx-page--home .hx-smart-country span,
  .hx-page--home .hx-status-icon,
  .hx-page--home .hx-rocket-orbit span,
  .hx-page--home .hx-flags-track span,
  .hx-page--instruction .hx-instruction-icon,
  .hx-page--instruction .hx-region-icon,
  .hx-page--bonus .hx-bonus-reward-icon {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-style: normal;
    line-height: 1;
    text-rendering: auto;
  }

  .hx-page--home .hx-icon span {
    display: flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
  }

  html.hx-platform-windows {
    --font: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    --hx-font-display: "Segoe UI Variable Display", "Segoe UI Black", "Segoe UI", Tahoma, Arial, sans-serif;
  }

  html.hx-platform-windows body {
    font-family: var(--font);
    font-feature-settings: "kern" 1, "liga" 1;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  html.hx-platform-windows .hx-page,
  html.hx-platform-windows .hx-page p,
  html.hx-platform-windows .hx-page li,
  html.hx-platform-windows .hx-page small,
  html.hx-platform-windows .hx-page a,
  html.hx-platform-windows .hx-page button,
  html.hx-platform-windows .hx-page input,
  html.hx-platform-windows .hx-page label {
    font-family: var(--font);
  }

  html.hx-platform-windows .hx-page h1,
  html.hx-platform-windows .hx-page h2,
  html.hx-platform-windows .hx-page h3,
  html.hx-platform-windows .hx-feature-main,
  html.hx-platform-windows .hx-price-value strong {
    font-family: var(--hx-font-display);
    font-weight: 800;
  }

  html.hx-platform-windows .hx-page strong,
  html.hx-platform-windows .hx-page b,
  html.hx-platform-windows .hx-connect-benefits-title,
  html.hx-platform-windows .hx-feature-label,
  html.hx-platform-windows .hx-feature-pill,
  html.hx-platform-windows .hx-button,
  html.hx-platform-windows .hx-back-link,
  html.hx-platform-windows .hx-status div,
  html.hx-platform-windows .hx-route-summary {
    font-weight: 700;
  }

  html.hx-platform-windows .hx-page--home > .hx-section .hx-title,
  html.hx-platform-windows .hx-smart-location-section > .hx-title,
  html.hx-platform-windows .hx-purchase-section .hx-connect-title {
    letter-spacing: -.028em;
  }

  html.hx-platform-windows .hx-page--home > .hx-section .hx-title > span,
  html.hx-platform-windows .hx-smart-location-section > .hx-title > span {
    letter-spacing: -.018em;
  }

  html.hx-platform-windows .hx-page--home > .hx-section > .hx-text,
  html.hx-platform-windows .hx-smart-location-section > .hx-text,
  html.hx-platform-windows .hx-price-description,
  html.hx-platform-windows .hx-page--inner .hx-text,
  html.hx-platform-windows .hx-update-step p,
  html.hx-platform-windows .hx-appstore-steps p,
  html.hx-platform-windows .hx-download-card p,
  html.hx-platform-windows .hx-bonus-hub p,
  html.hx-platform-windows .hx-instruction-shell p {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0;
  }

  html.hx-platform-windows .hx-page-kicker,
  html.hx-platform-windows .hx-update-step-kicker,
  html.hx-platform-windows .hx-download-card__platform,
  html.hx-platform-windows .hx-update-progress-label,
  html.hx-platform-windows .hx-bonus-route-head span,
  html.hx-platform-windows .hx-badge {
    font-weight: 700;
  }

  html.hx-platform-windows .hx-download-card__button,
  html.hx-platform-windows .hx-update-photo-button,
  html.hx-platform-windows .hx-appstore-image-button,
  html.hx-platform-windows .hx-update-cta,
  html.hx-platform-windows .hx-downloads-cta {
    font-family: var(--font);
    font-weight: 700;
  }

  html.hx-platform-windows .hx-icon span,
  html.hx-platform-windows .hx-smart-country span,
  html.hx-platform-windows .hx-status-icon,
  html.hx-platform-windows .hx-rocket-orbit span,
  html.hx-platform-windows .hx-flags-track span,
  html.hx-platform-windows .hx-home-bottom-nav__icon,
  html.hx-platform-windows .hx-instruction-icon,
  html.hx-platform-windows .hx-region-icon,
  html.hx-platform-windows .hx-bonus-reward-icon {
    font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-weight: 400;
    line-height: 1;
  }

  html.hx-platform-windows .hx-contact-icon svg,
  html.hx-platform-windows .hx-route-summary__icon svg,
  html.hx-platform-windows .hx-core-globe,
  html.hx-platform-windows .hx-update-glyph {
    display: block;
  }

  .hx-home-bottom-nav {
    position: absolute;
    top: 50px;
    right: max(48px, calc((100% - 1240px) / 2 + 36px));
    left: auto;
    bottom: auto;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 244px;
    min-height: 0;
    padding: 6px;
    gap: 6px;
    transform: none;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(150, 215, 255, .22);
    border-radius: 24px;
    background:
      radial-gradient(circle at 12% -30%, rgba(65, 220, 255, .18), transparent 48%),
      radial-gradient(circle at 90% 140%, rgba(174, 104, 255, .18), transparent 52%),
      rgba(10, 21, 44, .94);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .13),
      0 18px 42px rgba(2, 8, 26, .40),
      0 0 28px rgba(61, 181, 255, .07);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    animation: hxDesktopQuickDockEnter .64s cubic-bezier(.16, 1, .3, 1) .18s both;
  }

  .hx-home-bottom-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    z-index: 2;
    width: 76%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(105, 233, 255, .78), rgba(198, 151, 255, .58), transparent);
    box-shadow: 0 0 14px rgba(85, 216, 255, .24);
  }

  .hx-home-bottom-nav__item {
    position: relative;
    min-width: 0;
    min-height: 54px;
    padding: 8px 12px 8px 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5faff;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.08;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(136, 211, 255, .18);
    border-radius: 18px;
    background:
      radial-gradient(circle at 10% 0%, rgba(111, 231, 255, .16), transparent 48%),
      linear-gradient(145deg, rgba(36, 131, 185, .27), rgba(62, 70, 145, .23));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      0 8px 20px rgba(3, 18, 44, .18);
    transition:
      transform .2s ease,
      border-color .2s ease,
      background-color .2s ease,
      box-shadow .2s ease;
  }

  .hx-home-bottom-nav__item--update {
    background:
      radial-gradient(circle at 90% -8%, rgba(190, 132, 255, .18), transparent 48%),
      linear-gradient(145deg, rgba(35, 111, 176, .25), rgba(94, 61, 164, .29));
  }

  .hx-home-bottom-nav__icon {
    position: absolute;
    left: 9px;
    top: 50%;
    width: 36px;
    min-width: 36px;
    height: 36px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9af1ff;
    font-size: 20px;
    border: 1px solid rgba(120, 230, 255, .25);
    border-radius: 13px;
    background:
      radial-gradient(circle at 28% 18%, rgba(151, 241, 255, .26), transparent 45%),
      linear-gradient(145deg, rgba(38, 157, 205, .28), rgba(82, 80, 173, .24));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      0 7px 18px rgba(14, 128, 194, .14);
  }

  .hx-home-bottom-nav__item--update .hx-home-bottom-nav__icon {
    font-family: "Segoe UI Symbol", "Apple Symbols", "Segoe UI", sans-serif;
    font-weight: 700;
  }

  .hx-home-bottom-nav__label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
  }

  .hx-home-bottom-nav__label small {
    color: rgba(201, 222, 244, .72);
    font-size: 10.5px;
    line-height: 1;
    font-weight: 600;
  }

  .hx-home-bottom-nav__item:focus-visible {
    outline: 2px solid rgba(132, 235, 255, .94);
    outline-offset: 2px;
  }

  .hx-page--home .hx-smart-location-section > .hx-title {
    grid-area: title;
    align-self: end;
    margin: 0;
    font-size: clamp(44px, 4vw, 60px);
    text-align: left;
  }

  .hx-page--home .hx-smart-location-section > .hx-title span {
    max-width: 540px;
    margin: 12px 0 0;
    font-size: clamp(22px, 2vw, 30px);
    text-align: left;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-text {
    grid-area: copy;
    max-width: 540px;
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    text-align: left;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-status {
    grid-area: status;
    width: 100%;
    max-width: 540px;
    margin: 0;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner {
    grid-area: scanner;
    width: min(100%, 390px);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-flags {
    grid-area: flags;
    width: 100%;
    margin: 0;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-bottom {
    grid-area: summary;
    width: 100%;
    max-width: 540px;
    margin: 0;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section {
    padding-block: 64px 66px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-areas:
      "price connect-title"
      "price connect-actions"
      "bonus downloads";
    align-items: center;
    gap: 20px 30px;
    max-width: 1040px;
    margin-inline: auto;
    padding: 34px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card > * {
    min-width: 0;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card > .hx-price-section {
    grid-area: price;
    align-self: stretch;
    margin: 0;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card > .hx-connect-top {
    grid-area: connect-title;
    margin: 0;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card > .hx-connect-cta {
    grid-area: connect-actions;
    margin: 0;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card > .hx-purchase-bonus {
    grid-area: bonus;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card > .hx-downloads-cta {
    grid-area: downloads;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-connect-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(42px, 4vw, 56px);
  }

  .hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-actions,
  .hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button {
    min-width: 0;
  }

  .hx-page--inner:not(.hx-page--downloads) {
    max-width: 940px;
  }

  .hx-page--inner:not(.hx-page--downloads) > .hx-section {
    padding: 56px clamp(56px, 6vw, 76px) 62px;
  }

  .hx-page--update .hx-update-guide > *,
  .hx-page--appstore .hx-appstore-guide > *,
  .hx-page--instruction .hx-instruction-shell > *,
  .hx-page--bonus .hx-bonus-hub > * {
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
  }

  .hx-page--update .hx-update-guide-hero .hx-title,
  .hx-page--appstore .hx-appstore-hero .hx-title,
  .hx-page--instruction .hx-instruction-shell > .hx-title,
  .hx-page--bonus .hx-bonus-title {
    font-size: clamp(48px, 5vw, 66px);
  }

  .hx-page--instruction .hx-instruction-placeholder {
    min-height: 210px;
    padding: 36px;
  }
}

@keyframes hxDesktopQuickDockEnter {
  from {
    opacity: 0;
    transform: translate3d(12px, 0, 0) scale(.98);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (min-width: 900px) and (max-width: 1023px) {
  .hx-page--home .hx-home-connect .hx-smart-location-section {
    grid-template-columns: minmax(330px, 1fr) minmax(300px, .9fr);
    column-gap: 24px;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-scanner {
    width: min(100%, 320px);
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-status div {
    animation: none !important;
    opacity: 0;
    transform: none;
  }

  .hx-page--home .hx-home-connect .hx-smart-location-section > .hx-status div:first-child {
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .hx-page:not(.hx-page--downloads) {
    max-width: 1240px;
  }

  .hx-page--home .hx-home-connect .hx-feature-grid {
    max-width: 840px;
  }

  .hx-page--home .hx-home-connect .hx-purchase-card {
    max-width: 1100px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .hx-feature-card,
  .hx-contact-button,
  .hx-download-card__button,
  .hx-button,
  .hx-home-bottom-nav__item {
    transition:
      transform .24s ease,
      border-color .24s ease,
      box-shadow .24s ease,
      filter .24s ease;
  }

  .hx-feature-card:hover,
  .hx-download-card__button:hover,
  .hx-button:hover {
    transform: translateY(-3px);
  }

  .hx-home-bottom-nav__item:hover {
    transform: translateY(-2px);
    border-color: rgba(143, 230, 255, .34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .16),
      0 11px 24px rgba(4, 25, 58, .24),
      0 0 18px rgba(83, 205, 255, .08);
  }
}

/* === Benefits content separation — 20260730-196 === */
.hx-page--home .hx-home-connect .hx-feature-card {
  height: auto;
  min-height: 184px;
  grid-template-rows:
    42px
    30px
    minmax(34px, auto)
    minmax(30px, auto);
  row-gap: 6px;
}

@media (min-width: 900px) {
  .hx-page--home .hx-home-connect .hx-feature-card {
    min-height: 204px;
    grid-template-rows:
      56px
      30px
      minmax(34px, auto)
      32px;
  }
}

/* === Custom contact artwork — 20260730-208 === */
.hx-contact-actions .hx-contact-button.telegram .hx-contact-icon--telegram,
.hx-contact-actions .hx-contact-button.vk .hx-contact-icon--vk {
  width: clamp(34px, 9vw, 38px);
  height: clamp(34px, 9vw, 38px);
  flex: 0 0 clamp(34px, 9vw, 38px);
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.hx-contact-icon--telegram img,
.hx-contact-icon--vk img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  filter: drop-shadow(0 5px 10px rgba(15, 108, 234, .28));
}

.hx-contact-icon--vk img {
  filter: drop-shadow(0 3px 6px rgba(59, 72, 222, .18));
}

.hx-update-social-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: visible;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.hx-update-social-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  filter: drop-shadow(0 4px 8px rgba(15, 108, 234, .22));
}

.hx-update-vk-icon img {
  filter: drop-shadow(0 3px 6px rgba(59, 72, 222, .16));
}

/* === Custom download artwork — 20260730-208 === */
.hx-page--home .hx-home-connect .hx-downloads-cta__icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(87, 218, 255, .22));
}

.hx-page--downloads .hx-downloads-icon__arrow img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(87, 218, 255, .2));
}

.hx-page--downloads .hx-download-card__button-icon--download {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.hx-page--downloads .hx-download-card__button-icon--download img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(87, 218, 255, .2));
}

.hx-page--downloads .hx-download-card__button-icon--download + strong {
  margin-left: 8px;
}

.hx-page--downloads .hx-download-card--throne .hx-download-card__button-icon--download img {
  filter: hue-rotate(55deg) drop-shadow(0 2px 4px rgba(96, 255, 116, .18));
}

/* === Home branded contact buttons — 20260801-209 === */
.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button {
  isolation: isolate;
  color: #fff;
  border-width: 1px;
  text-shadow: 0 1px 2px rgba(0, 28, 65, .24);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button.telegram {
  border-color: rgba(126, 224, 255, .78);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 54%, #1687bd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(1, 91, 137, .32),
    0 12px 26px rgba(34, 158, 217, .26);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button.vk {
  border-color: rgba(118, 188, 255, .76);
  background: linear-gradient(135deg, #2688eb 0%, #0077ff 54%, #005fd1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(0, 62, 153, .34),
    0 12px 26px rgba(0, 119, 255, .25);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button::before {
  inset: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), transparent 58%);
  opacity: .72;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button::after {
  background: linear-gradient(110deg, transparent 16%, rgba(255, 255, 255, .20), transparent 60%);
  opacity: .26;
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button:hover {
  filter: brightness(1.06) saturate(1.04);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button:active {
  filter: brightness(.98);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .94);
  outline-offset: 3px;
}

/* === Home quick navigation artwork — 20260801-214 === */
.hx-home-bottom-nav__item--guide .hx-home-bottom-nav__icon,
.hx-home-bottom-nav__item--update .hx-home-bottom-nav__icon {
  overflow: visible;
  padding: 0;
  border: 1px solid rgba(108, 226, 241, .3);
  background: linear-gradient(145deg, rgba(52, 211, 218, .2), rgba(82, 119, 224, .13));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 7px 18px rgba(14, 128, 194, .14);
  text-shadow: none;
}

.hx-home-bottom-nav__item--guide .hx-home-bottom-nav__icon img,
.hx-home-bottom-nav__item--update .hx-home-bottom-nav__icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(87, 218, 255, .22));
}

/* === Home contact marks — 20260801-216 === */
.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-actions .hx-contact-button.telegram .hx-contact-icon--telegram,
.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-actions .hx-contact-button.vk .hx-contact-icon--vk {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 5px 12px rgba(0, 42, 92, .18);
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-icon--telegram img {
  width: 24px;
  height: 24px;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 57, 94, .2));
}

.hx-page--home .hx-home-connect .hx-purchase-section .hx-contact-icon--vk img {
  width: 26px;
  height: 22px;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 42, 110, .2));
}

/* === Shared social contact marks — 20260801-217 === */
.hx-update-social-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 5px 12px rgba(0, 42, 92, .16);
}

.hx-update-social-icon img {
  display: block;
  border-radius: 0;
  object-fit: contain;
}

.hx-update-telegram-icon img {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 57, 94, .2));
}

.hx-update-vk-icon img {
  width: 24px;
  height: 20px;
  filter: drop-shadow(0 2px 3px rgba(0, 42, 110, .2));
}

/* === Instruction server modes — 20260802-218 === */
.hx-page--instruction .hx-instruction-mode-card {
  width: min(100%, 620px);
  min-height: 0;
  padding: 6px;
  border-color: rgba(137, 220, 255, .2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(57, 213, 255, .12), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(167, 105, 255, .12), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
}

.hx-instruction-mode-picker {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hx-instruction-mode-picker > legend,
.hx-instruction-mode-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hx-instruction-mode-picker__tabs {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(138, 213, 255, .16);
  border-radius: 18px;
  background: rgba(4, 16, 39, .44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 8px 20px rgba(2, 10, 31, .14);
}

.hx-instruction-mode-picker__tabs::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  z-index: 0;
  width: calc((100% - 16px) / 2);
  border: 1px solid rgba(101, 225, 255, .42);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 0%, rgba(122, 238, 255, .2), transparent 44%),
    linear-gradient(145deg, rgba(29, 155, 211, .52), rgba(47, 91, 175, .42));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 8px 20px rgba(5, 77, 132, .2);
  transition:
    transform .44s cubic-bezier(.2, .82, .22, 1),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.hx-instruction-mode-picker__input--premium:checked
  ~ .hx-instruction-mode-picker__tabs::before {
  transform: translate3d(calc(100% + 6px), 0, 0);
  border-color: rgba(200, 154, 255, .46);
  background:
    radial-gradient(circle at 90% 0%, rgba(232, 191, 255, .2), transparent 44%),
    linear-gradient(145deg, rgba(108, 74, 197, .58), rgba(67, 85, 181, .48));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 8px 20px rgba(61, 36, 135, .22);
}

.hx-instruction-mode-picker__tabs label {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgba(207, 226, 246, .7);
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
  z-index: 1;
}

.hx-instruction-mode-picker__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(147, 220, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.hx-instruction-mode-picker__icon svg {
  display: block;
  width: 23px;
  height: 23px;
  overflow: visible;
}

.hx-instruction-mode-picker__tabs label:first-child svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hx-instruction-mode-picker__tabs label:last-child svg {
  fill: currentColor;
}

.hx-instruction-mode-picker__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.hx-instruction-mode-picker__copy strong {
  margin: 0;
  color: inherit;
  font-size: clamp(13px, 3.5vw, 16px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.015em;
}

.hx-instruction-mode-picker__copy small {
  color: rgba(196, 217, 239, .62);
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hx-instruction-mode-picker__input--standard:checked
  ~ .hx-instruction-mode-picker__tabs label[for="instruction-mode-standard"] {
  color: #f7fdff;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.hx-instruction-mode-picker__input--premium:checked
  ~ .hx-instruction-mode-picker__tabs label[for="instruction-mode-premium"] {
  color: #fffaff;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.hx-instruction-mode-picker__input--standard:checked
  ~ .hx-instruction-mode-picker__tabs label[for="instruction-mode-standard"] .hx-instruction-mode-picker__icon {
  color: #92f4ff;
  border-color: rgba(144, 239, 255, .36);
  background: rgba(25, 120, 177, .3);
}

.hx-instruction-mode-picker__input--premium:checked
  ~ .hx-instruction-mode-picker__tabs label[for="instruction-mode-premium"] .hx-instruction-mode-picker__icon {
  color: #f1d8ff;
  border-color: rgba(223, 188, 255, .38);
  background: rgba(92, 55, 170, .32);
}

.hx-instruction-mode-picker__input--standard:focus-visible
  ~ .hx-instruction-mode-picker__tabs label[for="instruction-mode-standard"],
.hx-instruction-mode-picker__input--premium:focus-visible
  ~ .hx-instruction-mode-picker__tabs label[for="instruction-mode-premium"] {
  outline: 3px solid rgba(113, 231, 255, .82);
  outline-offset: 2px;
}

.hx-instruction-mode-picker__panels {
  display: grid;
  min-width: 0;
}

.hx-instruction-mode-panel {
  position: relative;
  grid-area: 1 / 1;
  display: block;
  min-height: 132px;
  padding: 20px 18px;
  overflow: hidden;
  border: 1px solid rgba(135, 218, 255, .16);
  border-radius: 18px;
  text-align: left;
  background:
    radial-gradient(circle at 0% 0%, rgba(54, 210, 255, .11), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .026));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-8px, 0, 0);
  transition:
    opacity .28s ease,
    transform .38s cubic-bezier(.2, .82, .22, 1),
    visibility 0s linear .38s;
}

.hx-instruction-mode-panel--premium {
  border-color: rgba(196, 151, 255, .2);
  background:
    radial-gradient(circle at 100% 0%, rgba(195, 130, 255, .13), transparent 48%),
    linear-gradient(145deg, rgba(87, 64, 151, .15), rgba(255, 255, 255, .026));
  transform: translate3d(8px, 0, 0);
}

.hx-instruction-mode-picker__input--standard:checked
  ~ .hx-instruction-mode-picker__panels .hx-instruction-mode-panel--standard,
.hx-instruction-mode-picker__input--premium:checked
  ~ .hx-instruction-mode-picker__panels .hx-instruction-mode-panel--premium {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: .08s, .04s, 0s;
}

.hx-instruction-mode-panel__badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  margin-bottom: 12px;
  padding: 5px 10px;
  border: 1px solid rgba(113, 226, 255, .22);
  border-radius: 999px;
  color: rgba(151, 239, 255, .94);
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(37, 145, 190, .13);
}

.hx-instruction-mode-panel--premium .hx-instruction-mode-panel__badge {
  color: rgba(231, 202, 255, .96);
  border-color: rgba(214, 177, 255, .24);
  background: rgba(117, 72, 184, .16);
}

.hx-instruction-mode-panel > strong {
  display: block;
  color: rgba(246, 252, 255, .96);
  font-size: 18px;
  line-height: 1.2;
}

.hx-instruction-mode-panel > p {
  margin: 8px 0 0;
  color: rgba(215, 231, 247, .72);
  font-size: 13px;
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .hx-instruction-mode-picker__tabs label:hover {
    color: #f7fdff;
    border-color: rgba(132, 223, 255, .2);
    background-color: rgba(92, 169, 221, .08);
    transform: translateY(-1px);
  }
}

@media (max-width: 430px) {
  .hx-page--instruction .hx-instruction-mode-card {
    padding: 5px;
    border-radius: 21px;
  }

  .hx-instruction-mode-picker__tabs {
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
  }

  .hx-instruction-mode-picker__tabs label {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    min-height: 58px;
    padding: 8px 7px;
    border-radius: 12px;
  }

  .hx-instruction-mode-picker__icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .hx-instruction-mode-picker__icon svg {
    width: 21px;
    height: 21px;
  }

  .hx-instruction-mode-picker__copy strong {
    font-size: clamp(12px, 3.5vw, 14px);
  }

  .hx-instruction-mode-picker__copy small {
    font-size: 8.5px;
  }

  .hx-instruction-mode-panel {
    min-height: 126px;
    padding: 18px 15px;
    border-radius: 16px;
  }
}

@media (max-width: 350px) {
  .hx-instruction-mode-picker__tabs label {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 82px;
    text-align: center;
  }

  .hx-instruction-mode-picker__copy {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-instruction-mode-picker__tabs label,
  .hx-instruction-mode-picker__tabs::before,
  .hx-instruction-mode-panel {
    transition: none;
    animation: none;
  }
}

/* === Bonus mobile readability — 20260806-221 === */
@media (max-width: 700px) {
  .hx-page--bonus .hx-bonus-route {
    padding: 16px;
  }

  .hx-page--bonus .hx-bonus-route-head {
    padding: 2px 2px 12px;
  }

  .hx-page--bonus .hx-bonus-route-head strong {
    font-size: 18px;
  }

  .hx-page--bonus .hx-bonus-route-head span {
    padding: 6px 10px;
    font-size: 10px;
  }

  .hx-page--bonus .hx-bonus-step {
    padding: 13px 14px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .hx-page--bonus .hx-bonus-step-num {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    font-size: 14px;
  }

  .hx-page--bonus .hx-bonus-step b {
    font-size: 15px;
    line-height: 1.2;
  }

  .hx-page--bonus .hx-bonus-step span {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
  }

  .hx-page--bonus .hx-bonus-note {
    margin-top: 12px;
    padding: 11px 13px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
  }

  .hx-page--bonus .hx-bonus-note > span:first-child {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .hx-page--bonus .hx-bonus-route {
    padding: 13px;
  }

  .hx-page--bonus .hx-bonus-route-head strong {
    font-size: 16px;
  }

  .hx-page--bonus .hx-bonus-route-head span {
    font-size: 9px;
  }

  .hx-page--bonus .hx-bonus-step {
    padding-inline: 11px;
  }

  .hx-page--bonus .hx-bonus-step b {
    font-size: 14px;
  }

  .hx-page--bonus .hx-bonus-step span {
    font-size: 11.5px;
  }

  .hx-page--bonus .hx-bonus-note {
    font-size: 11.5px;
  }
}

/* === Bonus intro after reward removal — 20260806-222 === */
@media (min-width: 1100px) {
  .hx-page--bonus .hx-bonus-intro {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .hx-page--bonus .hx-bonus-intro-copy {
    width: min(100%, 900px);
    align-items: center;
    text-align: center;
  }

  .hx-page--bonus .hx-bonus-title {
    max-width: 900px;
    text-align: center;
  }

  .hx-page--bonus .hx-bonus-lead {
    max-width: 780px;
    margin-inline: auto;
    text-align: left;
  }
}

/* === Bonus badge scale across breakpoints — 20260806-224 === */
.hx-page--bonus .hx-bonus-badge-main {
  min-height: 42px;
  padding: 10px 18px;
  gap: 9px;
  font-size: clamp(13px, 1.25vw, 16px);
  letter-spacing: .035em;
}

.hx-page--bonus .hx-bonus-badge-main .hx-dot {
  width: 11px;
  height: 11px;
}

/* === Hide quick dock over purchase panel — 20260806-226 === */
.hx-site--home .hx-home-bottom-nav {
  transition:
    opacity .28s ease,
    transform .34s cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear 0s;
}

.hx-site--home .hx-home-bottom-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, calc(100% + 24px), 0);
  transition:
    opacity .24s ease,
    transform .30s cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear .30s;
}

@media (prefers-reduced-motion: reduce) {
  .hx-site--home .hx-home-bottom-nav,
  .hx-site--home .hx-home-bottom-nav.is-hidden {
    transition: none;
  }
}

/* === Bonus desktop composition — 20260806-220 === */
@media (min-width: 1100px) {
  .hx-page--bonus .hx-bonus-hub {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(320px, .82fr);
    grid-template-areas:
      "intro intro"
      "route actions";
    align-items: stretch;
    gap: 24px;
    padding: clamp(48px, 5vw, 72px);
  }

  .hx-page--bonus .hx-bonus-hub > * {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .hx-page--bonus .hx-bonus-intro {
    grid-area: intro;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .65fr);
    gap: clamp(28px, 4vw, 52px);
  }

  .hx-page--bonus .hx-bonus-intro-copy {
    padding: 4px 0;
  }

  .hx-page--bonus .hx-bonus-badge-main {
    padding: 9px 15px;
    font-size: 11.5px;
    letter-spacing: .055em;
  }

  .hx-page--bonus .hx-bonus-title {
    width: 100%;
    max-width: 720px;
    margin-top: 20px;
    font-size: clamp(44px, 3.6vw, 50px);
    line-height: 1;
    letter-spacing: -.035em;
  }

  .hx-page--bonus .hx-bonus-title > span {
    margin-top: 0;
    font-size: inherit;
    line-height: 1.06;
  }

  .hx-page--bonus .hx-bonus-title > span + span {
    margin-top: 6px;
  }

  .hx-page--bonus .hx-bonus-lead {
    width: 100%;
    max-width: 670px;
    margin-top: 22px;
    padding: 18px 20px;
    gap: 9px;
    border-radius: 22px;
  }

  .hx-page--bonus .hx-bonus-lead-question {
    font-size: 18px;
  }

  .hx-page--bonus .hx-bonus-lead-detail {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .hx-page--bonus .hx-bonus-reward {
    min-height: 100%;
    padding: 28px 24px;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 20px;
    border-radius: 30px;
  }

  .hx-page--bonus .hx-bonus-reward-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    font-size: 31px;
  }

  .hx-page--bonus .hx-bonus-reward-content span {
    margin-bottom: 10px;
    padding: 6px 10px;
    font-size: 10px;
  }

  .hx-page--bonus .hx-bonus-reward-content strong {
    font-size: clamp(38px, 3.2vw, 42px);
  }

  .hx-page--bonus .hx-bonus-reward-content small {
    max-width: 260px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  .hx-page--bonus .hx-bonus-route {
    grid-area: route;
    margin: 0;
    padding: 24px;
    border-radius: 30px;
  }

  .hx-page--bonus .hx-bonus-route-head {
    padding: 2px 2px 18px;
  }

  .hx-page--bonus .hx-bonus-route-head strong {
    font-size: 22px;
  }

  .hx-page--bonus .hx-bonus-route-head span {
    padding: 7px 12px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  .hx-page--bonus .hx-bonus-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .hx-page--bonus .hx-bonus-step {
    min-height: 108px;
    padding: 16px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 14px;
    text-align: left;
    border: 1px solid rgba(191, 220, 255, .09);
    border-radius: 19px;
    background:
      radial-gradient(circle at 0 0, rgba(var(--hx-bonus-step-accent), .08), transparent 48%),
      linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  }

  .hx-page--bonus .hx-bonus-step:last-child {
    border: 1px solid rgba(191, 220, 255, .09);
  }

  .hx-page--bonus .hx-bonus-step-num {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 15px;
  }

  .hx-page--bonus .hx-bonus-step b {
    font-size: 15px;
    line-height: 1.2;
  }

  .hx-page--bonus .hx-bonus-step span {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.35;
  }

  .hx-page--bonus .hx-bonus-note {
    margin-top: 14px;
    padding: 12px 14px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    border-radius: 17px;
    font-size: 11.5px;
    line-height: 1.4;
  }

  .hx-page--bonus .hx-bonus-note > span:first-child {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 15px;
  }

  .hx-page--bonus .hx-bonus-actions {
    grid-area: actions;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 14px;
    border: 1px solid rgba(196, 225, 255, .1);
    border-radius: 30px;
    background:
      radial-gradient(circle at 100% 0, rgba(93, 202, 255, .1), transparent 44%),
      linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 26px rgba(0, 0, 0, .12);
  }

  .hx-page--bonus .hx-bonus-share-cta,
  .hx-page--bonus .hx-bonus-cta {
    width: 100%;
    max-width: none;
  }

  .hx-page--bonus .hx-bonus-share-cta {
    min-height: 88px;
    padding: 14px 68px;
    border-radius: 22px;
  }

  .hx-page--bonus .hx-bonus-share-icon {
    left: 18px;
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }

  .hx-page--bonus .hx-bonus-copy-burst {
    left: 44px;
  }

  .hx-page--bonus .hx-bonus-share-copy strong {
    font-size: 18px;
  }

  .hx-page--bonus .hx-bonus-share-copy small {
    margin-top: 2px;
    font-size: 11px;
  }

  .hx-page--bonus .hx-bonus-cta {
    min-height: 66px;
    border-radius: 22px;
    font-size: 17px;
  }

  .hx-page--bonus .hx-bonus-home {
    min-height: 42px;
    margin-top: 4px;
    padding: 10px 16px;
    font-size: 12px;
  }
}

/* Keep the larger badge scale after all desktop overrides. */
.hx-page--bonus .hx-bonus-badge-main {
  min-height: 42px;
  padding: 10px 18px;
  gap: 9px;
  font-size: clamp(13px, 1.25vw, 16px);
  letter-spacing: .035em;
}

.hx-page--bonus .hx-bonus-badge-main .hx-dot {
  width: 11px;
  height: 11px;
}

/* Keep the reward-free intro override after the desktop composition rules. */
@media (min-width: 1100px) {
  .hx-page--bonus .hx-bonus-intro {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .hx-page--bonus .hx-bonus-intro-copy {
    width: min(100%, 900px);
    align-items: center;
    text-align: center;
  }

  .hx-page--bonus .hx-bonus-title {
    max-width: 900px;
    text-align: center;
  }

  .hx-page--bonus .hx-bonus-lead {
    max-width: 780px;
    margin-inline: auto;
    text-align: left;
  }
}

/* Keep the quick-dock visibility rule after all home navigation overrides. */
.hx-site--home .hx-home-bottom-nav {
  transition:
    opacity .28s ease,
    transform .34s cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear 0s;
}

.hx-site--home .hx-home-bottom-nav.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(100% + 24px));
  animation: hxHomeQuickBarExit .52s cubic-bezier(.2, .8, .2, 1) both;
  transition:
    opacity .24s ease,
    transform .30s cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear .52s;
}

@keyframes hxHomeQuickBarExit {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 24px));
  }
}

@media (min-width: 900px) {
  .hx-site--home .hx-home-bottom-nav.is-hidden {
    transform: translateY(calc(100% + 24px));
    animation: none;
  }
}

@keyframes hxDesktopQuickBarExit {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(calc(100% + 24px));
  }
}

/* Static hero artwork: the replacement image should not float. */
.hx-page--home .hx-icon,
.hx-page--home .hx-icon.hx-home-reveal.is-visible {
  animation: none;
}

.hx-page--home .hx-icon:hover,
.hx-page--home .hx-icon:active {
  transform: none;
}

/* === Bonus referral refresh — 20260806-248 === */
.hx-page--bonus .hx-bonus-hub {
  display: block;
  width: min(100%, 1240px);
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) clamp(32px, 5vw, 56px);
}

.hx-page--bonus .hx-bonus-intro {
  display: block;
  margin: 0 auto clamp(24px, 4vw, 38px);
  text-align: center;
}

.hx-page--bonus .hx-bonus-intro-copy {
  align-items: center;
  gap: 18px;
}

.hx-page--bonus .hx-bonus-badge-main {
  min-height: 40px;
  padding: 9px 17px;
  border-radius: 999px;
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: .06em;
  background: linear-gradient(135deg, rgba(255,184,0,.16), rgba(255,255,255,.05));
  box-shadow: 0 0 24px rgba(255,184,0,.16), inset 0 1px 0 rgba(255,255,255,.13);
}

.hx-page--bonus .hx-bonus-title {
  max-width: 1080px;
  margin: 0 auto;
  font-size: clamp(32px, 5.4vw, 64px);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hx-page--bonus .hx-bonus-title span + span {
  display: block;
  margin-top: 8px;
  color: rgba(255,248,216,.92);
}

.hx-page--bonus .hx-bonus-route {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid rgba(168,210,255,.18);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(27,44,78,.72), rgba(32,27,62,.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 42px rgba(5,10,30,.20);
}

.hx-page--bonus .hx-bonus-route-head {
  margin-bottom: 18px;
}

.hx-page--bonus .hx-bonus-route-head strong {
  font-size: clamp(23px, 3vw, 34px);
  letter-spacing: -.02em;
}

.hx-page--bonus .hx-bonus-route-head span {
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(215,230,255,.76);
  background: rgba(120,153,220,.12);
  border: 1px solid rgba(150,190,255,.18);
}

.hx-page--bonus .hx-bonus-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
}

.hx-page--bonus .hx-bonus-step {
  min-height: 176px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 18px;
  border: 1px solid rgba(170,210,255,.13);
  border-radius: 20px;
  background: rgba(13,24,53,.42);
}

.hx-page--bonus .hx-bonus-step-num {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  font-size: 18px;
  background: linear-gradient(145deg, rgba(82,124,205,.55), rgba(77,53,145,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 16px rgba(93,167,255,.18);
}

.hx-page--bonus .hx-bonus-step b {
  display: block;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.15;
}

.hx-page--bonus .hx-bonus-step span {
  display: block;
  margin-top: 8px;
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.3;
}

.hx-page--bonus .hx-bonus-note {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.hx-page--bonus .hx-bonus-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 1080px);
  margin: 18px auto 0;
}

.hx-page--bonus .hx-bonus-cta {
  width: 100%;
  min-height: 64px;
  border-radius: 18px;
  font-size: clamp(15px, 1.8vw, 19px);
}

.hx-page--bonus .hx-bonus-home {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 2px;
}

@media (max-width: 700px) {
  .hx-page--bonus .hx-bonus-hub {
    padding: 16px 10px 24px;
  }

  .hx-page--bonus .hx-bonus-intro {
    margin-bottom: 14px;
  }

  .hx-page--bonus .hx-bonus-intro-copy {
    gap: 12px;
  }

  .hx-page--bonus .hx-bonus-title {
    font-size: clamp(30px, 9vw, 44px);
  }

  .hx-page--bonus .hx-bonus-route {
    padding: 14px 10px;
    border-radius: 24px;
  }

  .hx-page--bonus .hx-bonus-route-head {
    margin-bottom: 12px;
  }

  .hx-page--bonus .hx-bonus-timeline {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hx-page--bonus .hx-bonus-step {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border-radius: 16px;
  }

  .hx-page--bonus .hx-bonus-step span {
    margin-top: 5px;
  }

  .hx-page--bonus .hx-bonus-actions {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .hx-page--bonus .hx-bonus-home {
    grid-column: auto;
  }
}

/* === Hide bonus intro heading block — 20260806-268 === */
.hx-page--bonus .hx-bonus-intro-copy {
  display: none;
}

.hx-page--bonus .hx-bonus-intro {
  display: none;
}

/* Keep the route as the first visible content after removing the intro. */
.hx-page--bonus .hx-bonus-route {
  margin-top: 0;
}

/* === Bonus contact actions — 20260806-277 === */
.hx-page--bonus .hx-bonus-actions > .hx-button.telegram {
  border-color: rgba(126, 224, 255, .78);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 54%, #1687bd 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(1,91,137,.32), 0 12px 26px rgba(34,158,217,.26);
}

.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk {
  border-color: rgba(118, 188, 255, .76);
  background: linear-gradient(135deg, #2688eb 0%, #0077ff 54%, #005fd1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,62,153,.34), 0 12px 26px rgba(0,119,255,.25);
}

.hx-page--bonus .hx-bonus-actions > .hx-button.telegram::before,
.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk::before {
  inset: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 58%);
  opacity: .72;
}

.hx-page--bonus .hx-bonus-actions > .hx-button.telegram,
.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
}

@media (hover: hover) {
  .hx-page--bonus .hx-bonus-actions > .hx-button.telegram:hover,
  .hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk:hover {
    transform: translateY(-3px);
    filter: brightness(1.06) saturate(1.04);
  }
}

.hx-page--bonus .hx-bonus-actions > .hx-button.telegram:active,
.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.98);
}

.hx-page--bonus .hx-bonus-home {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
}

@media (hover: hover) {
  .hx-page--bonus .hx-bonus-home:hover {
    transform: translateY(-3px);
    filter: brightness(1.06);
  }
}

.hx-page--bonus .hx-bonus-home:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.98);
}

/* === Shared inner-page contact buttons — 20260806-278 === */
.hx-page--inner .hx-actions .hx-update-cta {
  min-height: 64px;
  border-radius: 19px;
  font-size: clamp(16px, 1.25vw, 19px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 26px rgba(34,158,217,.18);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
}

.hx-page--inner .hx-actions .hx-update-cta.telegram {
  border-color: rgba(126,224,255,.78);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 54%, #1687bd 100%);
}

.hx-page--inner .hx-actions .hx-update-cta.hx-update-vk {
  border-color: rgba(118,188,255,.76);
  background: linear-gradient(135deg, #2688eb 0%, #0077ff 54%, #005fd1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 26px rgba(0,119,255,.2);
}

@media (hover: hover) {
  .hx-page--inner .hx-actions .hx-update-cta:hover,
  .hx-page--inner .hx-actions .hx-back-link:hover {
    transform: translateY(-3px);
    filter: brightness(1.06) saturate(1.04);
  }
}

.hx-page--inner .hx-actions .hx-update-cta:active,
.hx-page--inner .hx-actions .hx-back-link:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.98);
}

.hx-page--inner .hx-actions .hx-back-link {
  width: fit-content;
  min-height: 46px;
  margin-inline: auto;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 16px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
}

@media (max-width: 700px) {
  .hx-page--inner .hx-actions:has(.hx-update-cta) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hx-page--inner .hx-actions .hx-update-cta {
    min-height: 62px;
    padding: 8px 7px;
    border-radius: 17px;
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.15;
  }

  .hx-page--inner .hx-actions .hx-back-link {
    grid-column: 1 / -1;
  }
}

/* === Match bonus contact layout on update pages — 20260806-279 === */
.hx-page--update .hx-actions.hx-actions--inner .hx-inner-home,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-inner-home {
  width: fit-content;
  min-height: 46px;
  margin: 2px auto 0;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 16px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
}

.hx-page--update .hx-actions.hx-actions--inner .hx-inner-home:hover,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-inner-home:hover,
.hx-page--update .hx-actions.hx-actions--inner .hx-inner-home:focus-visible,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-inner-home:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.06);
}

.hx-page--update .hx-actions.hx-actions--inner .hx-inner-home:active,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-inner-home:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.98);
}

/* === Static contact buttons, matching bonus page — 20260806-282 === */
.hx-page--bonus .hx-bonus-actions > .hx-button.telegram,
.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk,
.hx-page--bonus .hx-bonus-home,
.hx-page--update .hx-actions.hx-actions--inner .hx-update-cta,
.hx-page--update .hx-actions.hx-actions--inner .hx-inner-home,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-inner-home {
  transition: none;
  transform: none;
  filter: none;
}

.hx-page--bonus .hx-bonus-actions > .hx-button.telegram:hover,
.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk:hover,
.hx-page--bonus .hx-bonus-home:hover,
.hx-page--update .hx-actions.hx-actions--inner .hx-update-cta:hover,
.hx-page--update .hx-actions.hx-actions--inner .hx-inner-home:hover,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta:hover,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-inner-home:hover,
.hx-page--bonus .hx-bonus-actions > .hx-button.telegram:active,
.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk:active,
.hx-page--bonus .hx-bonus-home:active,
.hx-page--update .hx-actions.hx-actions--inner .hx-update-cta:active,
.hx-page--update .hx-actions.hx-actions--inner .hx-inner-home:active,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta:active,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-inner-home:active {
  transform: none;
  filter: none;
}

/* Keep contact-button motion; only the home button stays static. */
.hx-page--bonus .hx-bonus-actions > .hx-button.telegram,
.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk,
.hx-page--update .hx-actions.hx-actions--inner .hx-update-cta,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, filter .28s ease;
}

@media (hover: hover) {
  .hx-page--bonus .hx-bonus-actions > .hx-button.telegram:hover,
  .hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk:hover,
  .hx-page--update .hx-actions.hx-actions--inner .hx-update-cta:hover,
  .hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta:hover {
    transform: translateY(-3px);
    filter: brightness(1.06) saturate(1.04);
  }
}

.hx-page--bonus .hx-bonus-actions > .hx-button.telegram:active,
.hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk:active,
.hx-page--update .hx-actions.hx-actions--inner .hx-update-cta:active,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta:active {
  transform: translateY(0) scale(.985);
  filter: brightness(.98);
}

.hx-page--update .hx-actions.hx-actions--inner .hx-update-cta,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta {
  border-color: rgba(126,224,255,.78);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 54%, #1687bd 100%);
}

.hx-page--update .hx-actions.hx-actions--inner .hx-update-cta.hx-update-vk,
.hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta.hx-update-vk {
  border-color: rgba(118,188,255,.76);
  background: linear-gradient(135deg, #2688eb 0%, #0077ff 54%, #005fd1 100%);
}

@media (max-width: 700px) {
  .hx-page--update .hx-actions.hx-actions--inner:has(.hx-update-cta),
  .hx-page--appstore .hx-actions.hx-actions--inner:has(.hx-update-cta) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hx-page--update .hx-actions.hx-actions--inner .hx-update-cta,
  .hx-page--appstore .hx-actions.hx-actions--inner .hx-update-cta {
    min-height: 62px;
    padding: 8px 7px;
    border-radius: 17px;
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.15;
  }

  .hx-page--update .hx-actions.hx-actions--inner .hx-inner-home,
  .hx-page--appstore .hx-actions.hx-actions--inner .hx-inner-home {
    grid-column: 1 / -1;
  }
}

@media (min-width: 701px) {
  .hx-page--bonus .hx-bonus-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
  }

  .hx-page--bonus .hx-bonus-actions > .hx-button.telegram,
  .hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk {
    min-height: 64px;
    border-radius: 19px;
    font-size: clamp(16px, 1.25vw, 19px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 30px rgba(8,18,48,.22);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  }

  .hx-page--bonus .hx-bonus-actions > .hx-button.telegram:hover,
  .hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 34px rgba(42,108,220,.28);
  }
}

@media (max-width: 700px) {
  .hx-page--bonus .hx-bonus-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hx-page--bonus .hx-bonus-actions > .hx-button.telegram,
  .hx-page--bonus .hx-bonus-actions > .hx-button.hx-update-vk {
    min-height: 62px;
    padding: 8px 7px;
    border-radius: 17px;
    font-size: clamp(11px, 3vw, 13px);
    line-height: 1.15;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
  }

  .hx-page--bonus .hx-bonus-home {
    grid-column: 1 / -1;
    justify-self: center;
    width: fit-content;
    min-height: 46px;
    margin: 2px auto 0;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 16px;
  }
}

/* === Bonus page heading hierarchy — 20260806-268 === */
@media (max-width: 700px) {
  .hx-page--bonus .hx-bonus-intro {
    margin-bottom: 36px;
  }

  .hx-page--bonus .hx-bonus-intro-copy {
    gap: 18px;
  }

  .hx-page--bonus .hx-bonus-title {
    font-size: clamp(48px, 12vw, 58px);
    line-height: 1.02;
  }
}

@media (min-width: 701px) {
  .hx-page--bonus .hx-bonus-title {
    max-width: 760px;
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.06;
  }
}

/* === Desktop bonus CTA motion — 20260806-252 === */
@media (min-width: 701px) {
  .hx-page--bonus .hx-bonus-cta {
    transition:
      transform .28s cubic-bezier(.2, .8, .2, 1),
      box-shadow .28s ease,
      border-color .28s ease,
      background .28s ease;
  }

  .hx-page--bonus .hx-bonus-cta:hover {
    transform: translateY(-3px);
    border-color: rgba(135, 235, 255, .52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 14px 30px rgba(4,12,35,.24),
      0 0 24px rgba(67, 198, 255, .18);
  }

  .hx-page--bonus .hx-bonus-cta:active {
    transform: translateY(-1px) scale(.99);
  }
}