: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(3, 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: 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;
      }
    }












.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;
  }
}

@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: contain;
  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: contain;
  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;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.46), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(0,229,255,.20), transparent 34%),
    radial-gradient(circle at 50% 52%, rgba(255,184,0,.24), transparent 48%),
    linear-gradient(145deg, rgba(255,184,0,.30), rgba(255,78,205,.17), rgba(0,229,255,.24));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -18px 38px rgba(10, 16, 36, .16),
    inset 0 0 34px rgba(255,255,255,.14),
    inset 0 0 42px rgba(255,184,0,.12),
    0 14px 30px rgba(0,0,0,.20),
    0 0 30px rgba(255,184,0,.24),
    0 0 48px rgba(0,229,255,.18);
}

.hx-page--home .hx-icon::before {
  width: 88px;
  height: 30px;
  opacity: .72;
}

.hx-page--home .hx-icon::after {
  right: 17px;
  top: 15px;
  opacity: .76;
}

.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-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)));
  }

  .hx-page--home .hx-section {
    min-height: inherit;
    display: flex;
    flex-direction: column;
  }

  .hx-page--home .hx-note {
    margin-top: auto;
  }
}

@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: none;
}

.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(16.666% - 1px),
    rgba(209,239,255,.22) calc(16.666% - 1px) 16.666%
  );
  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 — 20260721-030 === */
.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(10% - 1px),
    rgba(209,239,255,.18) calc(10% - 1px) 10%
  );
}

.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-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-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;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-page--appstore .hx-update-progress-fill,
  .hx-page--appstore .hx-appstore-photo-button {
    transition: none;
  }
}