:root {
      --bg: #f5f5f7;
      --ink: #1d1d1f;
      --muted: #6e6e73;
      --line: rgba(0, 0, 0, 0.08);
      --accent: #0071e3;
      --accent-soft: rgba(0, 113, 227, 0.12);
      --ok: #30d158;
      --danger: #ff3b30;
      --card: rgba(255, 255, 255, 0.72);
      --ease: cubic-bezier(0.32, 0.72, 0, 1);
      --font: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
      --phone: 430px;
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { margin: 0; min-height: 100%; }
    body {
      font-family: var(--font);
      color: var(--ink);
      background: #e8e8ed;
      display: flex;
      justify-content: center;
      -webkit-font-smoothing: antialiased;
    }

    .liquid {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 45%, #eef1f6 100%);
    }
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(72px);
      opacity: 0.55;
      will-change: transform;
      animation: liquidDrift 18s var(--ease) infinite alternate;
    }
    .blob.a { width: 280px; height: 280px; left: -60px; top: -40px; background: #a8c7fa; animation-duration: 16s; }
    .blob.b { width: 260px; height: 260px; right: -70px; top: 18%; background: #c7b8f5; animation-duration: 22s; animation-delay: -4s; }
    .blob.c { width: 320px; height: 320px; left: 20%; bottom: 8%; background: #b8e0d2; animation-duration: 20s; animation-delay: -8s; }
    .blob.d { width: 200px; height: 200px; right: 10%; bottom: 22%; background: #f5d0c5; opacity: 0.4; animation-duration: 14s; }

    .phone {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: var(--phone);
      min-height: 100dvh;
      padding: calc(10px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
      overflow-x: hidden;
    }

    .sticky-strip {
      position: sticky;
      top: 0;
      z-index: 40;
      margin: 0 -16px 14px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.62);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--line);
    }
    .token-logo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: #fff;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }
    .token-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .strip-copy { min-width: 0; flex: 1; }
    .strip-copy strong {
      display: block;
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .strip-copy span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 560;
    }
    .strip-badge {
      flex-shrink: 0;
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--accent);
      background: var(--accent-soft);
      border-radius: 999px;
      padding: 6px 10px;
    }

    .top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }
    .brand strong {
      display: block;
      font-size: 1.02rem;
      font-weight: 780;
      letter-spacing: -0.03em;
      line-height: 1.15;
    }
    .brand em {
      display: block;
      margin-top: 4px;
      font-style: normal;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 560;
    }
    .lang-btn {
      border: 0;
      background: rgba(255,255,255,0.7);
      color: var(--ink);
      border-radius: 999px;
      padding: 9px 12px;
      font: 650 0.78rem/1 var(--font);
      display: inline-flex;
      gap: 6px;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 24px rgba(0,0,0,0.06);
    }

    .hero-stage {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      margin-bottom: 20px;
      min-height: 168px;
      background: rgba(255,255,255,0.45);
      border: 1px solid rgba(255,255,255,0.65);
      box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    }
    .hero-stage .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(28px);
      animation: liquidDrift 12s var(--ease) infinite alternate;
    }
    .hero-stage .orb.o1 { width: 160px; height: 160px; left: -20px; top: -30px; background: #9ec5ff; opacity: 0.7; }
    .hero-stage .orb.o2 { width: 140px; height: 140px; right: -10px; bottom: -40px; background: #d4c4ff; opacity: 0.55; animation-delay: -3s; }
    .hero-stage .orb.o3 { width: 110px; height: 110px; left: 40%; top: 30%; background: #b8f0d8; opacity: 0.5; animation-delay: -6s; }
    .hero-inner {
      position: relative;
      z-index: 1;
      padding: 22px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: 168px;
      justify-content: space-between;
    }
    .hero-kicker {
      display: inline-flex;
      align-self: flex-start;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(255,255,255,0.7);
      border-radius: 999px;
      padding: 6px 10px;
    }
    .hero-token {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .hero-token img {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 10px 28px rgba(0,0,0,0.1);
    }
    .hero-token strong {
      display: block;
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
    }
    .hero-token span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 560;
    }

    .intro h1 {
      margin: 0 0 10px;
      font-size: clamp(1.7rem, 7.2vw, 2.15rem);
      font-weight: 800;
      letter-spacing: -0.045em;
      line-height: 1.05;
    }
    .intro h1 .flash {
      color: var(--accent);
    }
    .intro .lead {
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.55;
      font-weight: 500;
    }

    .feature-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      margin-bottom: 16px;
      border-radius: 20px;
      background: var(--card);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.8);
      box-shadow: 0 12px 32px rgba(0,0,0,0.05);
    }
    .feature-card img {
      width: 44px; height: 44px; border-radius: 50%; background: #fff; flex-shrink: 0;
    }
    .feature-card strong {
      display: block; font-size: 0.92rem; font-weight: 730; letter-spacing: -0.02em; line-height: 1.2;
    }
    .feature-card span {
      display: block; margin-top: 3px; color: var(--muted); font-size: 0.75rem; font-weight: 550;
    }

    .benefit {
      display: grid;
      gap: 8px;
      margin-bottom: 18px;
    }
    .benefit div {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.55);
      border: 1px solid rgba(255,255,255,0.75);
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--ink);
    }
    .benefit i {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    .btn {
      appearance: none; border: 0; width: 100%;
      border-radius: 999px; padding: 15px 18px;
      font: 720 0.98rem/1 var(--font); cursor: pointer;
      transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    }
    .btn:active { transform: scale(0.98); }
    .btn-primary {
      color: #fff;
      background: var(--ink);
      box-shadow: 0 12px 28px rgba(0,0,0,0.14);
    }
    .btn-ghost {
      margin-top: 10px;
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--line);
    }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

    .screen { display: none; animation: rise 0.4s var(--ease); }
    .screen.active { display: block; }

    .quiz-head {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 10px; gap: 8px;
    }
    .quiz-head .tag {
      font-size: 0.72rem; font-weight: 700; color: var(--accent);
      background: var(--accent-soft); border-radius: 999px; padding: 6px 10px;
    }
    .quiz-head .count { font-size: 0.8rem; color: var(--muted); font-weight: 650; }
    .track {
      height: 4px; border-radius: 999px; overflow: hidden;
      background: rgba(0,0,0,0.06); margin-bottom: 14px;
    }
    .track > i {
      display: block; height: 100%; width: 0;
      background: var(--accent);
      transition: width 0.35s var(--ease);
    }
    .q-card {
      background: rgba(255,255,255,0.78);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255,255,255,0.9);
      border-radius: 24px;
      padding: 16px 14px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.06);
    }
    .q-visual {
      height: 88px;
      border-radius: 18px;
      margin-bottom: 14px;
      overflow: hidden;
      position: relative;
      background: linear-gradient(135deg, rgba(168,199,250,0.55), rgba(199,184,245,0.45));
    }
    .q-visual .q-label {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 18px;
      font-weight: 780; letter-spacing: -0.03em;
    }
    .q-visual .q-label strong { font-size: 1.45rem; }
    .q-visual .q-label span { font-size: 0.75rem; color: var(--muted); font-weight: 650; }
    .q-visual img {
      position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
      width: 48px; height: 48px; border-radius: 50%;
      background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    .q-title {
      margin: 0 0 12px;
      font-size: 1.08rem;
      font-weight: 750;
      letter-spacing: -0.025em;
      line-height: 1.3;
    }
    .opts { display: grid; gap: 10px; }
    .opt {
      width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,0.8);
      border-radius: 16px; padding: 12px 12px; text-align: left; color: var(--ink);
      font: 650 0.94rem/1.35 var(--font); cursor: pointer;
      display: flex; align-items: center; gap: 12px;
      transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .opt:active { transform: scale(0.985); }
    .opt.picked { border-color: rgba(0,113,227,0.35); background: var(--accent-soft); }
    .opt img, .opt .ico-fallback {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: #f2f2f7;
      object-fit: cover;
    }
    .opt .ico-fallback {
      display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; color: #fff;
      background: #AEAEB2;
    }

    .form-card, .result {
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(255,255,255,0.9);
      border-radius: 24px;
      padding: 20px 16px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.05);
    }
    .form-card h2, .result h2 {
      margin: 0 0 8px; font-size: 1.25rem; font-weight: 780; letter-spacing: -0.03em;
    }
    .hint, .result p {
      margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; font-weight: 500;
    }
    label.field {
      display: grid; gap: 7px; margin-bottom: 12px;
      font-size: 0.78rem; font-weight: 650; color: var(--muted);
    }
    input[type="email"],
    input[type="text"],
    select {
      width: 100%; border: 1px solid var(--line); border-radius: 14px;
      padding: 13px 14px; font: 560 0.98rem/1.2 var(--font);
      background: rgba(255,255,255,0.9); color: var(--ink); outline: none;
      appearance: none;
    }
    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6e73' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
    }
    input:focus, select:focus { border-color: rgba(0,113,227,0.4); box-shadow: 0 0 0 4px rgba(0,113,227,0.12); }
    .review-bonus {
      margin: 0 0 12px;
      padding: 12px 12px;
      border-radius: 14px;
      background: rgba(0, 113, 227, 0.08);
      color: var(--accent);
      font-size: 0.88rem;
      font-weight: 680;
      line-height: 1.45;
    }
    .review-phase {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 620;
    }
    .checks { display: grid; gap: 12px; margin: 8px 0 14px; }
    .check {
      display: flex; gap: 10px; align-items: flex-start;
      font-size: 0.84rem; line-height: 1.45; color: var(--muted); font-weight: 530;
    }
    .check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
    .check a { color: var(--accent); }
    .error { color: var(--danger); font-size: 0.82rem; margin-bottom: 10px; display: none; font-weight: 650; }
    .error.show { display: block; }
    .result { text-align: center; }
    .result .mark {
      width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
      background: rgba(48,209,88,0.12); color: #1f8f45;
      display: grid; place-items: center;
    }
    .ref {
      display: inline-flex; gap: 6px; margin-top: 6px; padding: 8px 12px;
      border-radius: 999px; background: #f2f2f7;
      font-size: 0.8rem; font-weight: 700;
    }

    .details {
      margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
      color: var(--muted); font-size: 0.78rem; line-height: 1.5; font-weight: 520;
    }
    .details h3 { margin: 0 0 8px; color: var(--ink); font-size: 0.9rem; font-weight: 730; }
    .details a { color: var(--accent); word-break: break-all; }
    .foot { margin-top: 16px; color: #8e8e93; font-size: 0.72rem; line-height: 1.45; }

    .site-footer {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      margin-bottom: 14px;
    }
    .footer-nav button {
      border: 0;
      background: transparent;
      color: var(--accent);
      font: 620 0.78rem/1.3 var(--font);
      padding: 0;
      cursor: pointer;
      text-align: left;
    }
    .footer-copy {
      margin: 0;
      color: #8e8e93;
      font-size: 0.72rem;
      line-height: 1.5;
    }

    .legal-sheet {
      position: fixed;
      left: 50%;
      top: 0;
      bottom: 0;
      width: min(430px, 100%);
      transform: translate3d(-50%, 100%, 0);
      z-index: 95;
      background: #f5f5f7;
      display: flex;
      flex-direction: column;
      visibility: hidden;
      pointer-events: none;
      transition: transform 0.38s var(--ease), visibility 0.38s;
      will-change: transform;
    }
    .legal-sheet.open {
      transform: translate3d(-50%, 0, 0);
      visibility: visible;
      pointer-events: auto;
    }
    .legal-top {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
      background: rgba(255,255,255,0.82);
      backdrop-filter: saturate(180%) blur(18px);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      border-bottom: 1px solid var(--line);
    }
    .legal-top h1 {
      margin: 0;
      flex: 1;
      font-size: 1.05rem;
      font-weight: 780;
      letter-spacing: -0.03em;
    }
    .legal-back {
      border: 0;
      background: rgba(0,0,0,0.06);
      border-radius: 999px;
      padding: 8px 12px;
      font: 650 0.78rem/1 var(--font);
      cursor: pointer;
      color: var(--ink);
    }
    .legal-scroll {
      flex: 1;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
    }
    .legal-meta {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 560;
    }
    .legal-scroll h2 {
      margin: 18px 0 8px;
      font-size: 0.98rem;
      font-weight: 750;
      letter-spacing: -0.02em;
    }
    .legal-scroll h2:first-of-type { margin-top: 0; }
    .legal-scroll p {
      margin: 0 0 12px;
      color: #3a3a3c;
      font-size: 0.88rem;
      line-height: 1.65;
      font-weight: 500;
    }

    .overlay, .lang-panel {
      position: fixed; inset: 0; z-index: 80;
      display: none; place-items: center; padding: 20px;
      background: rgba(29, 29, 31, 0.28);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .overlay.open, .lang-panel.open { display: grid; }
    .lang-panel { align-items: end; }
    .welcome, .review, .lang-sheet {
      width: min(380px, 100%);
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(255,255,255,0.95);
      border-radius: 28px;
      padding: 24px 18px 18px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.18);
      animation: rise 0.4s var(--ease);
      text-align: center;
    }
    .welcome .eyebrow {
      display: inline-block; margin-bottom: 10px;
      font-size: 0.7rem; font-weight: 730; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 10px;
    }
    .welcome h2 {
      margin: 0 0 8px; font-size: clamp(1.35rem, 5.8vw, 1.65rem);
      font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
    }
    .welcome h2 .flash { color: var(--accent); }
    .welcome p {
      margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; font-weight: 520;
    }
    .welcome .logo-wrap {
      width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%;
      overflow: hidden; background: #fff;
      box-shadow: 0 16px 40px rgba(0,0,0,0.1);
    }
    .welcome .logo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .welcome .amount {
      margin-bottom: 16px;
      font-size: 1.05rem; font-weight: 780; letter-spacing: -0.02em; color: var(--ink);
    }
    .review { text-align: left; }
    .review h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 780; letter-spacing: -0.03em; }
    .review p { margin: 0 0 16px; color: var(--muted); font-size: 0.88rem; line-height: 1.45; font-weight: 520; }
    .ring-wrap {
      display: grid;
      place-items: center;
      margin: 4px auto 16px;
      width: 112px;
      height: 112px;
      position: relative;
    }
    .ring-wrap svg {
      width: 112px;
      height: 112px;
      transform: rotate(-90deg);
      display: block;
    }
    .ring-wrap .ring-bg {
      fill: none;
      stroke: rgba(0, 0, 0, 0.08);
      stroke-width: 7;
    }
    .ring-wrap .ring-fg {
      fill: none;
      stroke: var(--accent);
      stroke-width: 7;
      stroke-linecap: round;
      stroke-dasharray: 301.6;
      stroke-dashoffset: 0;
      transition: stroke 0.2s var(--ease);
    }
    .ring-center {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      text-align: center;
      pointer-events: none;
    }
    .ring-center strong {
      display: block;
      font-size: 1.85rem;
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .ring-center span {
      display: block;
      margin-top: 4px;
      font-size: 0.68rem;
      font-weight: 650;
      color: var(--muted);
    }
    .bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,0.06); }
    .bar > i { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: inherit; }
    .bar-meta {
      display: flex; justify-content: space-between; margin-top: 10px;
      font-size: 0.75rem; font-weight: 680; color: var(--muted);
    }

    .lang-sheet {
      text-align: left; max-height: min(72vh, 640px);
      display: flex; flex-direction: column; padding: 0; overflow: hidden;
    }
    .lang-sheet header {
      padding: 14px 16px 8px; font-weight: 750;
      display: flex; justify-content: space-between; align-items: center;
    }
    .lang-sheet input {
      margin: 0 16px 10px; border: 1px solid var(--line); border-radius: 12px;
      padding: 12px 14px; font: 560 0.95rem/1.2 var(--font);
      background: #fafafa; color: var(--ink); outline: none;
    }
    .lang-list { overflow: auto; padding: 0 8px 12px; }
    .lang-item {
      width: 100%; border: 0; background: transparent; color: var(--ink);
      text-align: left; padding: 12px; border-radius: 12px; cursor: pointer;
      display: flex; justify-content: space-between; gap: 10px;
      font: 580 0.92rem/1.25 var(--font);
    }
    .lang-item.active, .lang-item:hover { background: var(--accent-soft); }
    .lang-item span { color: var(--muted); font-size: 0.75rem; }

    @keyframes rise {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes liquidDrift {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to { transform: translate3d(24px, -18px, 0) scale(1.08); }
    }
    @media (prefers-reduced-motion: reduce) {
      .blob, .orb { animation: none !important; }
      * { transition: none !important; }
    }