:root {
      --bg: #f7f8fb;
      --surface: #ffffff;
      --ink: #151821;
      --muted: #616875;
      --line: #e3e7ee;
      --red: #20a8ff;
      --red-dark: #0878d7;
      --mint: #25d6c6;
      --gold: #ffcb45;
      --charcoal: #1d3147;
      --sky-soft: #eaf7ff;
      --sky-line: #bfe8ff;
      --shadow: 0 24px 70px rgba(16, 84, 132, .16);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--bg);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid rgba(227, 231, 238, .78);
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(14px);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(1180px, calc(100% - 32px));
      min-height: 72px;
      margin: 0 auto;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .brand-mark {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, var(--red), #68d2ff);
      box-shadow: 0 12px 28px rgba(32, 168, 255, .28);
      font-weight: 900;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      color: #3d4350;
      font-size: 14px;
      font-weight: 650;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .language {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: #4c5360;
      font-size: 13px;
      font-weight: 700;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 8px;
      border: 1px solid transparent;
      font-weight: 800;
      white-space: nowrap;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

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

    .button.primary {
      color: #fff;
      background: var(--red);
      box-shadow: 0 16px 34px rgba(32, 168, 255, .28);
    }

    .button.primary:hover {
      background: var(--red-dark);
    }

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

    .hero {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 9% 12%, rgba(37, 214, 198, .18), transparent 24%),
        radial-gradient(circle at 91% 10%, rgba(32, 168, 255, .2), transparent 22%),
        linear-gradient(180deg, #fff 0%, #f7f8fb 100%);
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
      align-items: center;
      gap: 58px;
      width: min(1180px, calc(100% - 32px));
      min-height: calc(100vh - 72px);
      margin: 0 auto;
      padding: 72px 0 64px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(32, 168, 255, .24);
      border-radius: 8px;
      color: var(--red-dark);
      background: var(--sky-soft);
      font-size: 13px;
      font-weight: 800;
    }

    .pulse {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--mint);
      box-shadow: 0 0 0 6px rgba(31, 199, 162, .16);
    }

    h1 {
      margin: 24px 0 18px;
      max-width: 760px;
      font-size: clamp(44px, 7vw, 86px);
      line-height: .96;
      letter-spacing: 0;
    }

    .hero-copy {
      max-width: 620px;
      margin: 0;
      color: var(--muted);
      font-size: clamp(17px, 2vw, 21px);
      line-height: 1.6;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .hero-note {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 22px;
      color: #4f5663;
      font-size: 14px;
      font-weight: 650;
    }

    .hero-note span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
    }

    .phone-stage {
      position: relative;
      min-height: 620px;
    }

    .network-card,
    .asset-card {
      position: absolute;
      z-index: 2;
      width: 190px;
      border: 1px solid rgba(227, 231, 238, .9);
      border-radius: 8px;
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 20px 48px rgba(20, 24, 32, .16);
    }

    .network-card {
      top: 38px;
      left: 0;
      padding: 16px;
    }

    .asset-card {
      right: 0;
      bottom: 96px;
      padding: 14px;
    }

    .card-title {
      margin: 0 0 12px;
      color: #6a7180;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .chain-row,
    .asset-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 34px;
      color: #242936;
      font-size: 13px;
      font-weight: 800;
    }

    .chain-badge,
    .token-badge {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      border-radius: 7px;
      color: #fff;
      background: var(--red);
      font-size: 11px;
      font-weight: 900;
    }

    .chain-row span:first-of-type,
    .asset-row span:first-of-type {
      margin-right: auto;
    }

    .phone {
      position: absolute;
      inset: 0;
      width: min(340px, 78vw);
      height: 610px;
      margin: 0 auto;
      border: 10px solid #1f2430;
      border-radius: 38px;
      background: #ffffff;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .phone::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 50%;
      z-index: 2;
      width: 92px;
      height: 22px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: #1f2430;
    }

    .phone-screen {
      min-height: 100%;
      padding: 54px 22px 24px;
      background:
        linear-gradient(160deg, rgba(32, 168, 255, .16), transparent 36%),
        linear-gradient(180deg, #fff, #f3f6fa);
    }

    .wallet-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
      font-weight: 850;
    }

    .avatar {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 8px;
      color: #fff;
      background: var(--charcoal);
      font-weight: 900;
    }

    .balance-panel {
      padding: 22px;
      border-radius: 8px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 45%),
        linear-gradient(135deg, #20a8ff, #64d6ff);
      box-shadow: 0 18px 34px rgba(32, 168, 255, .24);
    }

    .balance-label {
      margin: 0;
      opacity: .82;
      font-size: 13px;
      font-weight: 700;
    }

    .balance-value {
      margin: 8px 0 18px;
      font-size: 34px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .wallet-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
    }

    .wallet-actions span {
      display: grid;
      place-items: center;
      min-height: 38px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .18);
      font-size: 12px;
      font-weight: 800;
    }

    .mini-section {
      margin-top: 22px;
    }

    .mini-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 850;
    }

    .token-list {
      display: grid;
      gap: 10px;
    }

    .token-line {
      display: grid;
      grid-template-columns: 38px 1fr auto;
      align-items: center;
      gap: 10px;
      min-height: 58px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .token-badge.mint {
      background: var(--mint);
    }

    .token-badge.gold {
      background: var(--gold);
    }

    .token-name {
      display: block;
      font-weight: 850;
    }

    .token-network {
      color: #7a828f;
      font-size: 12px;
      font-weight: 700;
    }

    .amount {
      text-align: right;
      font-size: 13px;
      font-weight: 850;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: 0 16px 48px rgba(22, 26, 36, .08);
      transform: translateY(-26px);
    }

    .stat {
      padding: 26px 22px;
      border-right: 1px solid var(--line);
    }

    .stat:last-child {
      border-right: 0;
    }

    .stat strong {
      display: block;
      color: var(--red);
      font-size: clamp(25px, 3vw, 38px);
      line-height: 1;
      letter-spacing: 0;
    }

    .stat span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 750;
    }

    .section {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 84px 0;
    }

    .section-heading {
      max-width: 720px;
      margin-bottom: 34px;
    }

    .section-heading h2 {
      margin: 0 0 12px;
      font-size: clamp(30px, 4vw, 52px);
      line-height: 1.06;
      letter-spacing: 0;
    }

    .section-heading p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.65;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .feature-card {
      min-height: 235px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: 0 12px 34px rgba(22, 26, 36, .06);
    }

    .feature-icon {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-bottom: 20px;
      border-radius: 8px;
      color: #fff;
      background: var(--charcoal);
      font-weight: 900;
    }

    .feature-card:nth-child(2) .feature-icon {
      background: var(--mint);
    }

    .feature-card:nth-child(3) .feature-icon {
      background: var(--red);
    }

    .feature-card:nth-child(4) .feature-icon {
      background: var(--gold);
      color: #33250a;
    }

    .feature-card h3 {
      margin: 0 0 10px;
      font-size: 19px;
      letter-spacing: 0;
    }

    .feature-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .security-band {
      background: #151821;
      color: #fff;
    }

    .security-band .section {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(280px, 1fr);
      align-items: center;
      gap: 46px;
      padding: 78px 0;
    }

    .security-band p {
      color: rgba(255, 255, 255, .72);
    }

    .check-list {
      display: grid;
      gap: 12px;
      margin-top: 26px;
    }

    .check-item {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 48px;
      padding: 0 14px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
      font-weight: 750;
    }

    .check {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: var(--mint);
      color: #081f1a;
      font-weight: 950;
    }

    .security-visual {
      position: relative;
      min-height: 380px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 8px;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(32, 168, 255, .34), transparent 42%),
        linear-gradient(315deg, rgba(37, 214, 198, .2), transparent 48%),
        #17283a;
    }

    .vault {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 210px;
      height: 210px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(255, 255, 255, .24);
      border-radius: 8px;
      background: rgba(255, 255, 255, .08);
      box-shadow: inset 0 0 0 14px rgba(255, 255, 255, .04);
    }

    .vault::before {
      content: "";
      position: absolute;
      inset: 42px;
      border: 18px solid rgba(255, 255, 255, .82);
      border-radius: 50%;
    }

    .vault::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 36px;
      height: 96px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: var(--red);
    }

    .download {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 32px;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(32, 168, 255, .1), transparent 38%),
        var(--surface);
      box-shadow: 0 16px 42px rgba(22, 26, 36, .08);
    }

    .app-download {
      display: grid;
      grid-template-columns: minmax(280px, .92fr) minmax(0, 1fr);
      align-items: center;
      gap: 42px;
      padding: 38px;
      border: 1px solid var(--sky-line);
      border-radius: 8px;
      background:
        radial-gradient(circle at 12% 18%, rgba(37, 214, 198, .22), transparent 26%),
        linear-gradient(135deg, #eef9ff, #ffffff 58%);
      box-shadow: 0 18px 48px rgba(32, 168, 255, .12);
    }

    .app-phone {
      position: relative;
      min-height: 430px;
    }

    .app-phone-shell {
      position: absolute;
      inset: 0;
      width: min(250px, 82vw);
      height: 430px;
      margin: 0 auto;
      border: 8px solid #1d3147;
      border-radius: 34px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 22px 50px rgba(16, 84, 132, .2);
    }

    .app-phone-shell::before {
      content: "";
      position: absolute;
      top: 12px;
      left: 50%;
      width: 78px;
      height: 18px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: #1d3147;
      z-index: 1;
    }

    .app-screen {
      min-height: 100%;
      padding: 52px 18px 20px;
      background:
        linear-gradient(170deg, rgba(32, 168, 255, .18), transparent 42%),
        #f8fcff;
    }

    .app-balance {
      padding: 18px;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(135deg, #0878d7, #58cfff);
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(32, 168, 255, .24);
    }

    .app-balance-value {
      margin-top: 8px;
      font-size: 30px;
    }

    .app-menu {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-top: 18px;
    }

    .app-menu span {
      display: grid;
      place-items: center;
      min-height: 76px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: #35506a;
      font-size: 13px;
      font-weight: 850;
    }

    .store-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .store-button {
      display: inline-grid;
      grid-template-columns: 34px auto;
      align-items: center;
      gap: 10px;
      min-width: 178px;
      min-height: 58px;
      padding: 0 16px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 12px 28px rgba(16, 84, 132, .08);
      font-weight: 900;
    }

    .store-button small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .store-icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      color: #fff;
      background: var(--red);
    }

    .faq-list {
      display: grid;
      gap: 14px;
    }

    .faq-item {
      padding: 22px 24px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(22, 26, 36, .05);
    }

    .faq-item h3 {
      margin: 0 0 10px;
      color: #16283b;
      font-size: 18px;
      letter-spacing: 0;
    }

    .faq-item p {
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
    }

    .download h2 {
      margin: 0 0 10px;
      font-size: clamp(27px, 4vw, 44px);
      letter-spacing: 0;
    }

    .download p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }

    .download-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px;
    }

    .site-footer {
      border-top: 1px solid var(--line);
      background: #fff;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: min(1180px, calc(100% - 32px));
      min-height: 92px;
      margin: 0 auto;
      color: #5f6673;
      font-size: 14px;
    }

    .footer-links {
      display: flex;
      gap: 18px;
      font-weight: 700;
    }

    @media (max-width: 920px) {
      .nav-links {
        display: none;
      }

      .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        min-height: auto;
        padding-top: 52px;
      }

      .phone-stage {
        min-height: 560px;
      }

      .phone {
        height: 550px;
      }

      .stats,
      .feature-grid,
      .security-band .section,
      .download,
      .app-download {
        grid-template-columns: 1fr 1fr;
      }

      .security-band .section,
      .download,
      .app-download {
        grid-template-columns: 1fr;
      }

      .download-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 640px) {
      .nav {
        width: min(100% - 24px, 1180px);
        min-height: 64px;
      }

      .nav-actions .language {
        display: none;
      }

      .button {
        min-height: 42px;
        padding: 0 14px;
      }

      .hero-inner,
      .section,
      .stats,
      .footer-inner {
        width: min(100% - 24px, 1180px);
      }

      h1 {
        font-size: 46px;
      }

      .phone-stage {
        min-height: 500px;
      }

      .phone {
        width: min(310px, 86vw);
        height: 500px;
        border-width: 8px;
      }

      .phone-screen {
        padding: 48px 16px 18px;
      }

      .network-card,
      .asset-card {
        display: none;
      }

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

      .app-download {
        padding: 24px;
      }

      .app-phone {
        min-height: 380px;
      }

      .app-phone-shell {
        height: 380px;
      }

      .stat {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

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

      .section {
        padding: 58px 0;
      }

      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 24px 0;
      }
    }