:root {
      --pink: #ff2d55;
      --cyan: #00f2ea;
      --purple: #7c3aed;
      --yellow: #ffe066;
      --green: #20e3a2;
      --red: #ff3b30;
      --dark: #070714;
      --dark-2: #111226;
      --card: rgba(255, 255, 255, .08);
      --card-2: rgba(255, 255, 255, .12);
      --line: rgba(255, 255, 255, .18);
      --text: #ffffff;
      --muted: rgba(255, 255, 255, .76);
      --shadow: 0 22px 50px rgba(0, 0, 0, .38);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(700px 380px at 0% -10%, rgba(0, 242, 234, .38), transparent 58%),
        radial-gradient(700px 420px at 100% 0%, rgba(255, 45, 85, .36), transparent 55%),
        linear-gradient(180deg, #090914 0%, #111226 58%, #080812 100%);
      padding: 12px 12px 92px;
      overflow-x: hidden;
    }

    body.loading {
      cursor: progress;
    }

    body.loading * {
      pointer-events: none;
    }

    .wrap {
      width: min(440px, 100%);
      margin: 0 auto;
      position: relative;
    }

    .hero-link {
      display: block;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    .hero {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 28px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
        rgba(255,255,255,.05);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
      isolation: isolate;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      filter: blur(12px);
      opacity: .78;
    }

    .hero::before {
      top: -70px;
      right: -65px;
      background: rgba(255, 45, 85, .55);
    }

    .hero::after {
      bottom: 120px;
      left: -80px;
      background: rgba(0, 242, 234, .48);
    }

    .top {
      padding: 18px 16px 10px;
      text-align: center;
    }

    .badge-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.11);
      font-size: 12.5px;
      font-weight: 900;
      letter-spacing: .2px;
    }

    .pulse {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 0 rgba(32,227,162,.62);
      animation: pulse 1.25s infinite;
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(32,227,162,.62);
      }

      70% {
        box-shadow: 0 0 0 8px rgba(32,227,162,0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(32,227,162,0);
      }
    }

    h1 {
      margin: 14px auto 9px;
      max-width: 370px;
      font-size: clamp(28px, 8.2vw, 38px);
      line-height: 1.04;
      letter-spacing: -.85px;
      font-weight: 1000;
    }

    .gradient-text {
      color: #fff;
      text-shadow:
        2px 2px 0 rgba(255,45,85,.45),
        -2px -2px 0 rgba(0,242,234,.30);
    }

    .sub {
      max-width: 350px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.45;
    }

    .offer-card {
      margin: 16px 14px 12px;
      padding: 16px 13px 14px;
      border: 1px solid rgba(255, 224, 102, .42);
      border-radius: 24px;
      text-align: center;
      background:
        radial-gradient(220px 100px at 50% 0%, rgba(255, 224, 102, .38), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.075));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 16px 28px rgba(0,0,0,.20);
    }

    .offer-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--yellow);
      font-size: 13px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .35px;
    }

    .offer-title {
      margin: 7px 0 6px;
      font-size: clamp(30px, 9.5vw, 44px);
      line-height: 1;
      font-weight: 1000;
      letter-spacing: -1.1px;
    }

    .offer-title span {
      color: var(--yellow);
      text-shadow: 0 0 22px rgba(255, 224, 102, .34);
    }

    .micro {
      color: rgba(255,255,255,.72);
      font-size: 12.5px;
      line-height: 1.35;
    }

    .timer {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 11px;
      min-height: 36px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 59, 48, .16);
      border: 1px solid rgba(255, 59, 48, .28);
      color: #ffd3cf;
      font-size: 13px;
      font-weight: 950;
    }

    .cta-attention {
      width: calc(100% - 28px);
      margin: 0 14px 8px;
      padding: 8px 10px;
      border-radius: 999px;
      text-align: center;
      color: #fff7b8;
      background: rgba(255, 224, 102, .13);
      border: 1px solid rgba(255, 224, 102, .32);
      font-size: 12.5px;
      font-weight: 950;
      text-shadow: 0 0 12px rgba(255,224,102,.35);
    }

    .cta {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: calc(100% - 28px);
      min-height: 66px;
      margin: 0 14px 14px;
      border: 2px solid rgba(255, 255, 255, .72);
      border-radius: 22px;
      color: #061018;
      background:
        linear-gradient(90deg, #00f2ea 0%, #ffffff 35%, #ffe066 58%, #ff2d55 100%);
      box-shadow:
        0 0 0 5px rgba(255,255,255,.08),
        0 0 28px rgba(0,242,234,.46),
        0 0 34px rgba(255,45,85,.36),
        0 18px 38px rgba(0,0,0,.34);
      font-size: 18.5px;
      font-weight: 1000;
      letter-spacing: .35px;
      text-decoration: none;
      cursor: pointer;
      touch-action: manipulation;
      overflow: hidden;
      isolation: isolate;
      text-transform: uppercase;
      animation: ctaPop 1.15s ease-in-out infinite, ctaGlow 1.7s ease-in-out infinite;
    }

    .cta::before {
      content: "";
      position: absolute;
      inset: -3px;
      z-index: -1;
      border-radius: inherit;
      background: conic-gradient(from 0deg, var(--cyan), #fff, var(--yellow), var(--pink), var(--cyan));
      filter: blur(12px);
      opacity: .86;
      animation: ctaRing 2.4s linear infinite;
    }

    .cta::after {
      content: "";
      position: absolute;
      top: -45%;
      left: -34%;
      width: 30%;
      height: 190%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), transparent);
      transform: rotate(18deg);
      animation: ctaSweep 1.55s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes ctaPop {
      0%, 100% {
        transform: translateY(0) scale(1);
      }

      50% {
        transform: translateY(-3px) scale(1.045);
      }
    }

    @keyframes ctaGlow {
      0%, 100% {
        box-shadow:
          0 0 0 5px rgba(255,255,255,.08),
          0 0 28px rgba(0,242,234,.46),
          0 0 34px rgba(255,45,85,.36),
          0 18px 38px rgba(0,0,0,.34);
      }

      50% {
        box-shadow:
          0 0 0 8px rgba(255,255,255,.13),
          0 0 42px rgba(0,242,234,.72),
          0 0 52px rgba(255,45,85,.58),
          0 22px 44px rgba(0,0,0,.42);
      }
    }

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

    @keyframes ctaSweep {
      0% {
        left: -42%;
        opacity: 0;
      }

      28% {
        opacity: 1;
      }

      68%, 100% {
        left: 118%;
        opacity: 0;
      }
    }

    .cta:active {
      transform: translateY(2px) scale(.985);
      filter: brightness(1.08);
      animation: none;
    }

    .tap-hint {
      margin: -2px 14px 13px;
      text-align: center;
      color: rgba(255,255,255,.68);
      font-size: 12px;
      font-weight: 750;
    }

    .route-steps {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
      margin: 0 14px 13px;
    }

    .route-step {
      position: relative;
      padding: 11px 9px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.095);
      text-align: center;
      overflow: hidden;
    }

    .route-step::before {
      content: "";
      position: absolute;
      inset: -1px;
      background: linear-gradient(110deg, transparent, rgba(255,255,255,.18), transparent);
      transform: translateX(-120%);
      animation: shine 2.6s infinite;
    }

    .route-step b {
      position: relative;
      display: block;
      font-size: 13px;
      font-weight: 1000;
    }

    .route-step span {
      position: relative;
      display: block;
      margin-top: 3px;
      color: rgba(255,255,255,.68);
      font-size: 11.3px;
      line-height: 1.25;
    }

    @keyframes shine {
      0% { transform: translateX(-120%); }
      55%, 100% { transform: translateX(120%); }
    }

    .proof {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 0 14px 13px;
    }

    .proof-item {
      min-height: 72px;
      padding: 10px 6px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: var(--card);
      text-align: center;
    }

    .proof-item b {
      display: block;
      font-size: 14px;
      font-weight: 1000;
    }

    .proof-item span {
      display: block;
      margin-top: 3px;
      color: rgba(255,255,255,.66);
      font-size: 11.5px;
      line-height: 1.25;
    }

    .list {
      margin: 0 14px 14px;
      border: 1px solid var(--line);
      border-radius: 20px;
      overflow: hidden;
      background: rgba(255,255,255,.075);
    }

    .list-head {
      padding: 12px 13px;
      background: rgba(255,255,255,.08);
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      font-weight: 1000;
    }

    .item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .item:last-child {
      border-bottom: 0;
    }

    .check {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green);
      color: #04120d;
      font-size: 13px;
      font-weight: 1000;
    }

    .item b {
      display: block;
      font-size: 14.5px;
      line-height: 1.25;
    }

    .item small {
      display: block;
      margin-top: 2px;
      color: rgba(255,255,255,.62);
      font-size: 12px;
    }

    .trust {
      margin: 0 14px 15px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 17px;
      background: rgba(0,0,0,.16);
      color: rgba(255,255,255,.68);
      font-size: 12.2px;
      line-height: 1.42;
      text-align: center;
    }

    .terms {
      margin: 0 16px 16px;
      color: rgba(255,255,255,.54);
      font-size: 11px;
      line-height: 1.35;
      text-align: center;
    }

    .sticky {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 20;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      background: rgba(7, 7, 20, .78);
      border-top: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(16px);
    }

    .sticky-inner {
      width: min(440px, 100%);
      margin: 0 auto;
    }

    .sticky .cta {
      width: 100%;
      margin: 0;
      min-height: 64px;
      border-radius: 20px;
      font-size: 18px;
    }

    .layer-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background:
        radial-gradient(620px 320px at 50% 0%, rgba(0,242,234,.30), transparent 60%),
        radial-gradient(560px 320px at 50% 100%, rgba(255,45,85,.30), transparent 62%),
        rgba(4, 4, 12, .78);
      backdrop-filter: blur(18px);
    }

    .layer-backdrop.show {
      display: flex;
    }

    .layer-card {
      width: min(390px, 100%);
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.22);
      background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07)),
        #101124;
      box-shadow: 0 28px 70px rgba(0,0,0,.52);
      overflow: hidden;
      transform: translateY(10px) scale(.96);
      opacity: 0;
      animation: modalIn .28s ease forwards;
    }

    @keyframes modalIn {
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .layer-head {
      padding: 18px 16px 12px;
      text-align: center;
      background:
        radial-gradient(230px 110px at 50% 0%, rgba(255,224,102,.36), transparent 72%),
        rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .layer-icon {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      margin: 0 auto 10px;
      border-radius: 22px;
      color: #071018;
      background: linear-gradient(135deg, var(--yellow), #fff, var(--cyan));
      box-shadow: 0 0 34px rgba(255,224,102,.26);
      font-size: 30px;
      font-weight: 1000;
      animation: floatIcon 1.5s ease-in-out infinite;
    }

    @keyframes floatIcon {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    .layer-title {
      margin: 0;
      font-size: 24px;
      line-height: 1.12;
      font-weight: 1000;
      letter-spacing: -.4px;
    }

    .layer-sub {
      margin: 7px auto 0;
      color: rgba(255,255,255,.72);
      font-size: 13.5px;
      line-height: 1.42;
      max-width: 310px;
    }

    .layer-body {
      padding: 15px 15px 16px;
    }

    .loading-line {
      position: relative;
      height: 7px;
      margin: 0 0 13px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,.12);
    }

    .loading-line span {
      position: absolute;
      inset: 0 auto 0 0;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyan), var(--yellow), var(--pink));
      animation: loadingMove 1.2s ease-in-out infinite;
    }

    @keyframes loadingMove {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(245%); }
    }

    .process-box {
      display: grid;
      gap: 9px;
      margin-bottom: 13px;
    }

    .process-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      border-radius: 17px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(255,255,255,.075);
    }

    .process-dot {
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.16);
      color: rgba(255,255,255,.72);
      font-size: 12px;
      font-weight: 1000;
    }

    .process-row.active .process-dot {
      background: var(--green);
      color: #04120d;
      box-shadow: 0 0 0 6px rgba(32,227,162,.12);
    }

    .process-row b {
      display: block;
      font-size: 13.5px;
      line-height: 1.25;
    }

    .process-row small {
      display: block;
      margin-top: 2px;
      color: rgba(255,255,255,.60);
      font-size: 11.7px;
    }

    .layer-cta {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 66px;
      border: 2px solid rgba(255,255,255,.72);
      border-radius: 22px;
      color: #061018;
      background: linear-gradient(90deg, var(--yellow), #ffffff 44%, var(--cyan) 72%, var(--green));
      box-shadow:
        0 0 0 6px rgba(255,224,102,.10),
        0 0 36px rgba(255,224,102,.58),
        0 0 44px rgba(0,242,234,.42),
        0 18px 40px rgba(0,0,0,.34);
      font-size: 17.5px;
      font-weight: 1000;
      letter-spacing: .28px;
      cursor: pointer;
      overflow: hidden;
      text-transform: uppercase;
      animation: ctaPop 1.05s ease-in-out infinite, layerCtaGlow 1.55s ease-in-out infinite;
    }

    .layer-cta::after {
      content: "";
      position: absolute;
      top: -45%;
      left: -38%;
      width: 32%;
      height: 190%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
      transform: rotate(18deg);
      animation: ctaSweep 1.35s ease-in-out infinite;
      pointer-events: none;
    }

    .layer-cta:active {
      transform: translateY(2px) scale(.985);
      filter: brightness(1.1);
      animation: none;
    }

    @keyframes layerCtaGlow {
      0%, 100% {
        box-shadow:
          0 0 0 6px rgba(255,224,102,.10),
          0 0 36px rgba(255,224,102,.58),
          0 0 44px rgba(0,242,234,.42),
          0 18px 40px rgba(0,0,0,.34);
      }

      50% {
        box-shadow:
          0 0 0 10px rgba(255,224,102,.16),
          0 0 54px rgba(255,224,102,.78),
          0 0 62px rgba(0,242,234,.62),
          0 22px 46px rgba(0,0,0,.46);
      }
    }

    .layer-note {
      margin: 9px 3px 0;
      color: rgba(255,255,255,.58);
      text-align: center;
      font-size: 11.3px;
      line-height: 1.35;
    }

    @media (prefers-reduced-motion: reduce) {
      .cta,
      .cta::before,
      .cta::after,
      .layer-cta,
      .layer-cta::after,
      .pulse {
        animation: none;
      }
    }