/* Doppler phase finder — rebuilt from measurements of skincash.gg/tools/phase-finder */

.pf-page { position: relative }
.pf-page *, .pf-page *::before, .pf-page *::after { box-sizing: border-box }
.pf-content { width: 100%; max-width: var(--content-width, 1792px); margin: 0 auto; padding: 64px }

/* ---- hero ---- */
.pf-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center }
.pf-hero-glow {
  position: absolute; left: 50%; top: -128px; width: 700px; height: 700px; transform: translateX(-50%);
  border-radius: 9999px; opacity: .25; filter: blur(120px); pointer-events: none;
  background: radial-gradient(circle, hsla(320, 80%, 60%, .45) 0%, transparent 70%);
}
.pf-hero > *:not(.pf-hero-glow) { position: relative }
.pf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(244, 114, 182, .3); border-radius: 9999px; padding: 4px 12px;
  background: rgba(244, 114, 182, .1); color: #f9a8d4;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.pf-badge svg { width: 12px; height: 12px }
.pf-title { margin: 0; font-size: 60px; font-weight: 800; letter-spacing: -.025em; line-height: 1 }
.pf-title span {
  background: linear-gradient(110deg, #fff 0%, #fff 40%, hsla(320, 80%, 70%, 1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pf-lead { max-width: 672px; margin: 0; color: rgba(255, 255, 255, .65); font-size: 15px; line-height: 1.6 }

/* ---- form ---- */
.pf-form { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 672px; margin-top: 4px }
.pf-field { position: relative; flex: 1 }
.pf-field > svg { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: rgba(255, 255, 255, .35); pointer-events: none }
.pf-input {
  width: 100%; height: 55px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 16px 16px 16px 44px;
  background: #0e1014; color: #fff; font-family: inherit; font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.pf-input::placeholder { color: rgba(255, 255, 255, .3) }
.pf-input:focus { outline: none; border-color: rgba(244, 114, 182, .5); box-shadow: 0 0 0 3px rgba(236, 72, 153, .12) }
.pf-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 55px; border: 0; border-radius: 12px; padding: 16px 28px;
  background: #f472b6; color: #000; font-family: inherit;
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 8px 30px -8px rgba(236, 72, 153, .7);
  cursor: pointer; transition: box-shadow .2s, transform .1s;
}
.pf-submit svg { width: 16px; height: 16px }
.pf-submit:hover { box-shadow: 0 12px 40px -8px rgba(236, 72, 153, .9) }
.pf-submit:active { transform: scale(.98) }
.pf-submit:disabled { opacity: .6; cursor: progress }
.pf-example {
  border: 1px solid rgba(244, 114, 182, .3); border-radius: 4px; padding: 2px 8px;
  background: rgba(244, 114, 182, .06); color: #f9a8d4;
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.5;
  cursor: pointer; transition: background .15s;
}
.pf-example:hover { background: rgba(244, 114, 182, .12) }
.pf-error { color: #fca5a5; font-size: 13px }

/* ---- result ---- */
.pf-result { max-width: 768px; margin: 32px auto 0 }
.pf-card {
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 32px;
  background: linear-gradient(to bottom right, #15171c, #10141c, #0a0d0c);
}
.pf-item { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center }
.pf-item-image {
  position: relative; display: flex; aspect-ratio: 1; overflow: hidden; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px;
  background: linear-gradient(to bottom right, #15171c, #0a0d0c);
}
.pf-item-image img { width: 85%; height: 85%; object-fit: contain }
.pf-item-copy { min-width: 0 }
.pf-item-label { color: rgba(255, 255, 255, .4); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.pf-item-name { margin: 4px 0 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.pf-item-meta { margin-top: 4px; color: rgba(255, 255, 255, .45); font-size: 12px }
.pf-item-meta b { color: rgba(255, 255, 255, .75); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400 }

.pf-phase {
  position: relative; overflow: hidden; margin-top: 24px;
  border: 1px solid; border-radius: 12px; padding: 20px;
}
/* A soft highlight sits over the gradient, like the live card. */
.pf-phase::before {
  content: ""; position: absolute; inset: 0; opacity: .25; mix-blend-mode: overlay; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .55) 0%, transparent 55%);
}
.pf-phase > * { position: relative }
.pf-phase-kicker { color: rgba(255, 255, 255, .85); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }
.pf-phase-name { margin: 4px 0 0; color: #fff; font-size: 36px; font-weight: 800; line-height: 1.1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }
.pf-phase-desc { margin: 8px 0 0; color: rgba(255, 255, 255, .85); font-size: 12px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }

/* ---- payout call to action ---- */
.pf-cta {
  position: relative; display: block; overflow: hidden; margin-top: 24px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 16px; padding: 24px;
  background: linear-gradient(to bottom right, #0d1411, #0a0d0c, #0a1f15);
  text-decoration: none; transition: transform .2s;
}
.pf-cta:hover { transform: translateY(-2px) }
.pf-cta-glow {
  position: absolute; right: -128px; top: -128px; width: 360px; height: 360px; border-radius: 9999px;
  background: rgba(17, 197, 107, .5); opacity: .3; filter: blur(100px);
  transition: opacity .5s; pointer-events: none;
}
.pf-cta:hover .pf-cta-glow { opacity: .6 }
.pf-cta-sheen {
  position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .07), transparent);
  transition: transform 1s ease-out;
}
.pf-cta:hover .pf-cta-sheen { transform: translateX(100%) }
.pf-cta-grid {
  position: absolute; inset: 0; opacity: .03; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pf-cta-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.pf-cta-copy { display: block; min-width: 0 }
.pf-cta-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 9999px; padding: 2px 8px;
  background: rgba(61, 255, 158, .08); color: #3dff9e;
  font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.pf-cta-badge svg { width: 10px; height: 10px }
.pf-cta-title { display: block; margin: 8px 0 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.pf-cta-title span { display: block; margin-top: 2px; color: rgba(255, 255, 255, .45); font-size: 13px; font-weight: 700 }
.pf-cta-note { display: block; margin: 4px 0 0; color: rgba(255, 255, 255, .55); font-size: 12.5px; line-height: 1.375 }
.pf-cta-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden;
  flex: none; border-radius: 12px; padding: 12px 20px; background: #3dff9e; color: #000;
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 30px -8px rgba(34, 197, 94, .6); transition: box-shadow .2s;
}
.pf-cta:hover .pf-cta-button { box-shadow: 0 14px 42px -8px rgba(34, 197, 94, .9) }
.pf-cta-button svg { width: 16px; height: 16px; transition: transform .2s }
.pf-cta:hover .pf-cta-button svg { transform: translateX(2px) }
.pf-cta-button i {
  position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .3), transparent);
  transition: transform .7s;
}
.pf-cta:hover .pf-cta-button i { transform: translateX(100%) }

/* ---- phase variants ---- */
.pf-section { margin-top: 56px; text-align: center }
.pf-section-title { margin: 0 0 24px; font-size: 24px; font-weight: 800 }
.pf-gradient-text {
  background: linear-gradient(110deg, #fff 0%, hsla(320, 80%, 70%, 1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.pf-tile {
  border: 1px solid; border-radius: 16px; padding: 20px; text-align: left;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}
.pf-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9) }
.pf-tile-name { color: rgba(255, 255, 255, .85); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase }
.pf-tile-desc { margin-top: 8px; color: rgba(255, 255, 255, .75); font-size: 12px; font-weight: 500 }

/* ---- footer note ---- */
.pf-note {
  margin-top: 56px; border: 1px solid rgba(244, 114, 182, .2); border-radius: 16px; padding: 40px;
  background: linear-gradient(to bottom right, #1c1015, #0e0c12, #0a0d12);
}
.pf-note h2 { margin: 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em }
.pf-note p { max-width: 576px; margin: 8px 0 0; color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.6 }
.pf-note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.pf-note-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(251, 191, 36, .3); border-radius: 8px; padding: 8px 12px;
  background: rgba(251, 191, 36, .08); color: #fcd34d;
  font-size: 12px; font-weight: 700; text-decoration: none; transition: background .15s;
}
.pf-note-link svg { width: 14px; height: 14px; flex: none }
.pf-note-link:hover { background: rgba(251, 191, 36, .15) }
.pf-note-link.market { border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .08); color: #6ee7b7 }
.pf-note-link.market:hover { background: rgba(52, 211, 153, .15) }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .pf-content { padding: 40px 24px }
  .pf-title { font-size: 44px }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 767px) {
  .pf-content { padding: 28px 12px }
  .pf-title { font-size: 32px }
  .pf-form { flex-direction: column; align-items: stretch }
  .pf-submit { width: 100% }
  .pf-grid { grid-template-columns: 1fr }
  .pf-item { grid-template-columns: 1fr }
  .pf-cta-row { flex-direction: column; align-items: stretch; text-align: center }
  .pf-card, .pf-cta, .pf-note { padding: 20px }
}
@media (prefers-reduced-motion: reduce) { .pf-tile, .pf-submit, .pf-cta-button { transition: none } }