:root {
  --bg: #111315;
  --bg-2: #191d20;
  --paper: #f3efeb;
  --paper-2: #e9e2dc;
  --ink: #171717;
  --muted: #746b66;
  --line: #d6cbc4;
  --accent: #ff5c35;
  --accent-dark: #d53a1f;
  --accent-soft: #ff7b58;
  --steel: #aeb4b8;
  --steel-dark: #555c61;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(145deg, #0f1113 0%, #191c1f 52%, #111315 100%);
  overflow-x: hidden;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.background,
.stage { position: fixed; inset: 0; }
.background { overflow: hidden; pointer-events: none; }
.stage {
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding:
    max(26px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(26px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.metal-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
}

.metal-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.045) 38% 39%, transparent 39% 100%),
    linear-gradient(25deg, transparent 0 63%, rgba(255,92,53,.07) 63% 64%, transparent 64% 100%);
}

.energy,
.pulse {
  position: absolute;
  pointer-events: none;
}

.energy {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), rgba(255,92,53,.88), transparent);
  box-shadow: 0 0 10px rgba(255,92,53,.18);
  opacity: .28;
}
.energy::before,
.energy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
}
.energy::before { transform: rotate(9deg) scaleX(.72); transform-origin: left center; }
.energy::after { transform: rotate(-11deg) scaleX(.45); transform-origin: right center; }
.energy--1 { width: 240px; top: 14%; right: 10%; transform: rotate(-18deg); animation: flickerBolt 5.5s ease-in-out infinite; }
.energy--2 { width: 190px; bottom: 16%; left: 8%; transform: rotate(14deg); animation: flickerBolt 6.2s ease-in-out infinite 1.1s; opacity: .22; }
.energy--3 { width: 130px; top: 58%; right: 20%; transform: rotate(28deg); animation: flickerBolt 4.8s ease-in-out infinite .4s; opacity: .18; }

.pulse {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,92,53,.20), rgba(255,92,53,.04) 42%, transparent 68%);
  opacity: .34;
}
.pulse--1 { width: 320px; height: 320px; top: -60px; left: -100px; animation: floatDrift 13s ease-in-out infinite; }
.pulse--2 { width: 280px; height: 280px; right: -80px; bottom: -60px; animation: floatDrift 15s ease-in-out infinite reverse; opacity: .24; }

.ti-token {
  position: absolute;
  width: 112px;
  aspect-ratio: 1;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.22);
  color: #dfe3e5;
  background: linear-gradient(145deg, #3b4145, #1c2023 62%, #4b5155);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 45px rgba(0,0,0,.22);
  display: grid;
  grid-template-rows: auto 1fr auto;
  transform: rotate(-9deg);
}
.ti-token__num { font-size: 11px; font-weight: 700; color: #f2a08b; }
.ti-token strong {
  align-self: center;
  justify-self: center;
  font-family: Manrope, Inter, sans-serif;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.07em;
  color: #f2f4f5;
}
.ti-token__name { font-size: 8px; letter-spacing: .2em; color: #aeb5b9; }
.ti-token--1 { top: 7%; left: 6%; animation: floatToken 9s ease-in-out infinite; }
.ti-token--2 { right: 5%; bottom: 8%; transform: rotate(11deg) scale(.78); opacity: .72; animation: floatTokenAlt 11s ease-in-out infinite; }

.metal-shard {
  position: absolute;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.015));
  clip-path: polygon(0 16%, 78% 0, 100% 72%, 22% 100%);
}
.metal-shard--1 { width: 150px; height: 88px; right: 4%; top: 13%; transform: rotate(16deg); animation: floatShard1 12s ease-in-out infinite; }
.metal-shard--2 { width: 128px; height: 72px; left: 3%; bottom: 12%; transform: rotate(-22deg); opacity: .65; animation: floatShard2 14s ease-in-out infinite; }
.metal-shard--3 { width: 76px; height: 44px; right: 17%; top: 56%; transform: rotate(31deg); opacity: .45; animation: floatShard3 10s ease-in-out infinite .6s; }

.modal {
  position: relative;
  width: min(720px, 100%);
  padding: 48px 48px 28px;
  border: 1px solid #cbbeb5;
  border-radius: 30px;
  background: linear-gradient(160deg, var(--paper) 0%, #f7f4f1 44%, var(--paper-2) 100%);
  box-shadow: 0 34px 80px rgba(0,0,0,.44), 0 8px 24px rgba(0,0,0,.22);
  overflow: hidden;
}

.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.8), transparent 14% 86%, rgba(97,79,70,.035)),
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 18%);
}

.modal__topline {
  position: absolute;
  top: 0;
  left: 34px;
  right: 34px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.titanium-mark {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px solid #8d969c;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(145deg, #dadee0 0%, #9ea5a9 48%, #747b80 49%, #c8cdd0 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.titanium-mark strong {
  font-family: Manrope, Inter, sans-serif;
  font-size: 34px;
  letter-spacing: -.08em;
  color: #15181a;
}
.titanium-mark__num {
  position: absolute;
  top: 17px;
  left: 19px;
  font-size: 8px;
  font-weight: 800;
  color: #4c5357;
}

.eyebrow,
h1,
.subtitle,
.divider,
.actions { position: relative; z-index: 1; }

.eyebrow {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .34em;
  color: var(--accent-dark);
}

h1 {
  margin: 8px 0 0;
  text-align: center;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(54px, 8vw, 84px);
  line-height: .95;
  letter-spacing: .12em;
  font-weight: 800;
  transform: translateX(.06em);
}

.subtitle {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.divider {
  width: min(330px, 78%);
  margin: 28px auto 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--accent);
}
.divider span { height: 1px; background: linear-gradient(90deg, transparent, currentColor); opacity: .45; }
.divider span:last-child { background: linear-gradient(90deg, currentColor, transparent); }
.divider i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }

.actions { display: grid; gap: 12px; }
.action {
  position: relative;
  min-height: 80px;
  padding: 13px 18px 13px 13px;
  border: 1px solid #d2c6bf;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #221b18;
  background: rgba(255,255,255,.58);
  box-shadow: 0 8px 18px rgba(67,46,37,.07), inset 0 1px 0 #fff;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.action:hover {
  transform: translateY(-2px);
  border-color: #b9aaa1;
  box-shadow: 0 12px 25px rgba(67,46,37,.11), inset 0 1px 0 #fff;
}
.action:active { transform: translateY(0) scale(.99); }
.action:focus-visible { outline: 3px solid rgba(255,92,53,.26); outline-offset: 3px; }

.action--primary {
  color: #fff;
  border-color: #c84428;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent) 55%, var(--accent-soft));
  box-shadow: 0 13px 30px rgba(197,54,30,.25), inset 0 1px 0 rgba(255,255,255,.22);
}
.action--primary:hover { border-color: #b5321b; box-shadow: 0 15px 32px rgba(197,54,30,.30), inset 0 1px 0 rgba(255,255,255,.22); }

.action__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--accent-dark);
  background: #fff;
  border: 1px solid rgba(106,82,71,.11);
}
.action__icon svg { width: 24px; height: 24px; fill: currentColor; }
.action__text { min-width: 0; display: grid; gap: 3px; }
.action__text b { font-size: 16px; font-weight: 800; }
.action__text small {
  font-size: 12px;
  color: #7a6f69;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.action--primary .action__text small { color: rgba(255,255,255,.75); }
.action__arrow {
  font-size: 23px;
  line-height: 1;
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.action:hover .action__arrow { transform: translate(2px,-2px); opacity: .9; }


@keyframes floatToken {
  0%,100% { transform: rotate(-9deg) translate3d(0,0,0); }
  50% { transform: rotate(-7deg) translate3d(0,-12px,0); }
}
@keyframes floatTokenAlt {
  0%,100% { transform: rotate(11deg) scale(.78) translate3d(0,0,0); }
  50% { transform: rotate(9deg) scale(.78) translate3d(0,-10px,0); }
}
@keyframes floatShard1 {
  0%,100% { transform: rotate(16deg) translate3d(0,0,0); }
  50% { transform: rotate(18deg) translate3d(0,-10px,0); }
}
@keyframes floatShard2 {
  0%,100% { transform: rotate(-22deg) translate3d(0,0,0); }
  50% { transform: rotate(-20deg) translate3d(0,-9px,0); }
}
@keyframes floatShard3 {
  0%,100% { transform: rotate(31deg) translate3d(0,0,0); }
  50% { transform: rotate(34deg) translate3d(0,-8px,0); }
}
@keyframes floatDrift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(12px,-10px,0) scale(1.05); }
}
@keyframes flickerBolt {
  0%,100% { opacity: .12; }
  9% { opacity: .12; }
  10% { opacity: .55; }
  11% { opacity: .22; }
  13% { opacity: .62; }
  15% { opacity: .14; }
  50% { opacity: .38; }
  52% { opacity: .14; }
}

.ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,.28);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .5s ease-out forwards;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }

@media (max-width: 760px) {
  .stage {
    place-items: center;
    padding:
      max(18px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .modal {
    width: min(100%, 360px);
    min-height: auto;
    padding: 24px 16px 16px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-block: 10px;
  }

  .modal__topline { left: 22px; right: 22px; }
  .titanium-mark { width: 60px; height: 60px; margin-bottom: 10px; }
  .titanium-mark strong { font-size: 27px; }
  .titanium-mark__num { top: 12px; left: 14px; font-size: 7px; }
  .eyebrow { font-size: 8px; letter-spacing: .24em; }
  h1 { margin-top: 6px; font-size: clamp(38px, 12vw, 58px); letter-spacing: .08em; }
  .subtitle { margin-top: 8px; font-size: 12px; }
  .divider { margin: 16px auto 14px; width: 68%; }
  .actions { gap: 9px; }

  .energy--1 { width: 148px; top: 10%; right: -20px; }
  .energy--2 { width: 120px; bottom: 12%; left: -12px; }
  .energy--3 { width: 100px; top: 66%; right: 10%; }
  .pulse--1 { width: 190px; height: 190px; top: -42px; left: -66px; }
  .pulse--2 { width: 170px; height: 170px; right: -54px; bottom: -38px; }

  .action {
    min-height: 68px;
    padding: 9px 12px 9px 10px;
    border-radius: 18px;
    grid-template-columns: 44px minmax(0,1fr) auto;
    gap: 10px;
  }
  .action__icon { width: 44px; height: 44px; border-radius: 13px; }
  .action__icon svg { width: 20px; height: 20px; }
  .action__text b { font-size: 15px; }
  .action__text small { font-size: 10px; }

  .ti-token--1 { width: 66px; top: 5%; left: -20px; opacity: .35; }
  .ti-token--2 { width: 68px; right: -20px; bottom: 8%; opacity: .32; }
  .metal-shard--1 { width: 96px; height: 56px; right: -28px; top: 20%; opacity: .5; }
  .metal-shard--2 { width: 90px; height: 50px; left: -25px; bottom: 20%; opacity: .4; }
  .metal-shard--3 { display: none; }
}

@media (max-width: 390px) {
  .modal { width: min(100%, 340px); padding: 22px 12px 14px; }
  h1 { font-size: 36px; }
  .subtitle { font-size: 11px; }
  .action { gap: 8px; }
  .action__text small { max-width: 165px; }
}

@media (max-height: 700px) and (max-width: 760px) {
  .stage { place-items: start center; }
  .modal { margin-block: 0; }
  .titanium-mark { width: 56px; height: 56px; margin-bottom: 8px; }
  .titanium-mark strong { font-size: 25px; }
  h1 { font-size: 35px; }
  .subtitle { margin-top: 6px; }
  .divider { margin: 14px auto 12px; }
  .action { min-height: 62px; }
  .action__icon { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}