/* Gold Go motion system: purposeful, GPU-friendly, and reduced-motion safe. */
:root {
  --ease-fintech-out: cubic-bezier(.19, 1, .22, 1);
  --ease-gold-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-data-draw: cubic-bezier(.65, 0, .35, 1);
  --dur-hover: 240ms;
  --dur-panel: 400ms;
  --dur-reveal: 700ms;
  --dur-chart: 1200ms;
}

/* Header and primary actions */
.site-header,
.header-inner {
  transition: min-height var(--dur-panel) var(--ease-fintech-out),
              background-color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              box-shadow var(--dur-hover) ease;
}

.site-header.is-scrolled {
  background: rgba(9, 9, 9, .9);
  border-color: rgba(243, 189, 60, .16);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

.site-header.is-scrolled .header-inner { min-height: 64px; }
.brand img { transition: filter var(--dur-hover) ease, transform var(--dur-hover) var(--ease-gold-spring); }
.brand:hover img { filter: drop-shadow(0 0 10px rgba(255, 215, 109, .48)); transform: rotate(-2deg) scale(1.04); }
.primary-nav > ul a { position: relative; transition: color var(--dur-hover) ease; }
.primary-nav > ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-hover) var(--ease-fintech-out);
}
.primary-nav > ul a:hover::after,
.primary-nav > ul a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.button { transition: transform var(--dur-hover) var(--ease-fintech-out), background var(--dur-hover) ease, box-shadow var(--dur-hover) ease; }
.button:hover { box-shadow: 0 10px 28px rgba(243, 189, 60, .28); }
.button:active { transform: translateY(0) scale(.98); }

/* Hero entrance and ambient depth */
.hero::after {
  content: ""; position: absolute; right: -220px; top: 30px; width: 620px; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; filter: blur(48px);
  background: radial-gradient(circle, rgba(243, 189, 60, .16), transparent 69%);
  animation: ambient-gold-drift 9s ease-in-out infinite alternate;
}
.hero-copy > * { opacity: 0; transform: translateY(24px); animation: hero-copy-in 650ms var(--ease-fintech-out) forwards; }
.hero-copy > :nth-child(1) { animation-delay: 40ms; }
.hero-copy > :nth-child(2) { animation-delay: 140ms; }
.hero-copy > :nth-child(3) { animation-delay: 240ms; }
.hero-copy > :nth-child(4) { animation-delay: 340ms; }
.hero-copy > :nth-child(5) { animation-delay: 410ms; }
.hero-copy > :nth-child(6) { animation-delay: 460ms; }
.hero-phone-stage { opacity: 0; transform: translateX(40px) rotate(2deg); animation: hero-stage-in 850ms var(--ease-fintech-out) 180ms forwards; }
.hero-phone-mockup { animation: mockup-float 5s ease-in-out 1.05s infinite; will-change: transform; }
.hero-glow { animation: glow-breathe 6s ease-in-out infinite; }
.stat-pill-floating { animation: stat-pill-float 4.4s ease-in-out 1.2s infinite; will-change: transform; }
.hero-range-pill {
  position: absolute; z-index: 3; left: 3%; top: 18%; display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border: 1px solid rgba(255, 215, 109, .2); border-radius: 999px;
  background: rgba(17, 17, 15, .88); backdrop-filter: blur(12px); box-shadow: var(--shadow);
  color: var(--muted); font: 700 12px/1.2 "Manrope", sans-serif;
}
.hero-range-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(120, 214, 161, .12); }

/* Scroll reveals */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur-reveal) var(--ease-fintech-out), transform var(--dur-reveal) var(--ease-fintech-out), border-color var(--dur-hover) ease, box-shadow var(--dur-panel) var(--ease-fintech-out), background-color var(--dur-hover) ease;
}
.js [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
.js [data-stagger] > [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.js [data-stagger] > [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.js [data-stagger] > [data-reveal]:nth-child(4) { transition-delay: 210ms; }

/* Live price loading and financial ticker */
.live-card { position: relative; }
.market-pill { display: inline-flex; align-items: center; gap: 8px; }
.market-pill::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.market-pill.is-open::before { animation: live-pulse 2s ease-out infinite; }
.live-card.is-loading .price-group dd {
  width: min(100%, 150px); min-height: 40px; color: transparent; border-radius: 8px;
  background: linear-gradient(105deg, rgba(243, 189, 60, .06) 28%, rgba(255, 215, 109, .18) 43%, rgba(243, 189, 60, .06) 58%);
  background-size: 220% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.price-group dd { font-variant-numeric: tabular-nums; }
.price-group dd.is-settled { animation: number-settle 360ms var(--ease-gold-spring); }
.price-change { display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 10px; font: 700 12px/1.2 "Manrope", sans-serif; }
.price-change::before { content: ""; width: 0; height: 0; border-inline: 4px solid transparent; }
.price-change.is-up { color: var(--success); }
.price-change.is-up::before { border-bottom: 6px solid currentColor; }
.price-change.is-down { color: var(--danger); }
.price-change.is-down::before { border-top: 6px solid currentColor; }
.price-change.is-flat { color: var(--muted); }
.price-change.is-flat::before { width: 8px; height: 2px; border: 0; background: currentColor; }
.price-change.is-visible { animation: delta-pop 420ms var(--ease-gold-spring); }

/* Cards, icons, and data stories */
.gold-card:hover,
.js [data-reveal].is-revealed.gold-card:hover { transform: translateY(-6px); border-color: rgba(243, 189, 60, .38); box-shadow: 0 16px 36px rgba(243, 189, 60, .09); }
.pain-item { padding: 22px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(23, 23, 20, .32); }
.pain-item:hover .icon-box,
.feature-card:hover .icon-box { transform: scale(1.1) rotate(-3deg); }
.icon-box { transition: transform var(--dur-hover) var(--ease-gold-spring), background var(--dur-hover) ease; }
.feature-grid { overflow: visible; gap: 12px; border-color: transparent; background: transparent; }
.feature-card { border: 1px solid var(--line); border-radius: 16px; }
.feature-card.is-revealed .icon-box { animation: category-pop 520ms var(--ease-gold-spring) both; }
.feature-card:nth-child(2).is-revealed .icon-box { animation-delay: 120ms; }
.feature-card:nth-child(3).is-revealed .icon-box { animation-delay: 240ms; }
.feature-card:nth-child(4).is-revealed .icon-box { animation-delay: 360ms; }
.feature-trend { margin-top: 20px; }
.feature-trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-path-anim { fill: none; stroke: var(--gold-bright); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 430; stroke-dashoffset: 430; }
.trend-area { opacity: 0; transition: opacity 600ms ease 650ms; }
.trend-point { fill: var(--bg); stroke: var(--gold-bright); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.feature-card.is-revealed .chart-path-anim { animation: chart-draw var(--dur-chart) var(--ease-data-draw) 180ms forwards; }
.feature-card.is-revealed .trend-area { opacity: 1; }
.feature-card.is-revealed .trend-point { animation: point-pop 360ms var(--ease-gold-spring) 1.2s forwards; }
.feature-trend > div { display: flex; justify-content: space-between; color: #817b70; font: 700 10px/1 "Manrope", sans-serif; }
.profit-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 22px; color: #817b70; font-size: 11px; }
.profit-flow span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; opacity: 0; transform: translateY(6px); }
.feature-card.is-revealed .profit-flow span { animation: flow-item-in 380ms var(--ease-fintech-out) 420ms forwards; }
.feature-card.is-revealed .profit-flow span:nth-of-type(2) { animation-delay: 560ms; }
.feature-card.is-revealed .profit-flow span:nth-of-type(3) { animation-delay: 700ms; }

/* Showcase and step progression */
.screenshot-grid { counter-reset: showcase; }
.screenshot { --parallax-y: 0px; counter-increment: showcase; }
.screenshot img { transform: translateY(var(--parallax-y)); transition: transform 90ms linear, filter var(--dur-panel) ease; }
.screenshot:hover img { filter: drop-shadow(0 30px 42px rgba(243, 189, 60, .14)); }
.steps-list > li { position: relative; }
.steps-list > li > span {
  position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--bg); font-size: 18px;
  transition: color var(--dur-hover) ease, border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.steps-list > li.is-revealed > span { color: var(--gold-bright); border-color: rgba(243, 189, 60, .55); box-shadow: 0 0 0 6px rgba(243, 189, 60, .06); animation: step-ring 650ms var(--ease-gold-spring); }

/* Privacy, FAQ, conversion area, footer */
.privacy-icon { position: relative; overflow: hidden; }
.privacy-icon::after {
  content: ""; position: absolute; inset: -30% auto -30% -80%; width: 45%; transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  animation: vault-sweep 6s ease-in-out infinite;
}
.privacy-card .text-link span { display: inline-block; transition: transform var(--dur-hover) var(--ease-fintech-out); }
.privacy-card:hover .text-link span { transform: translateX(4px); }
.faq-list details { transition: background-color var(--dur-hover) ease; }
.faq-list details[open] { background: rgba(243, 189, 60, .035); }
.faq-content-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-panel) var(--ease-fintech-out); }
.faq-content-inner { overflow: hidden; }
.faq-list .faq-content-inner p { margin: -7px 42px 0 0; padding-bottom: 22px; }
html:not(.js) .faq-list details[open] .faq-content-grid,
.faq-list details.is-expanded .faq-content-grid { grid-template-rows: 1fr; }
.faq-list summary span { transition: transform var(--dur-panel) var(--ease-fintech-out), color var(--dur-hover) ease; }
.faq-list details.is-expanded summary span,
.faq-list details[open] summary span { color: var(--gold-bright); transform: rotate(45deg); }
.final-cta-inner::before {
  content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image: radial-gradient(circle at 12% 18%, rgba(255, 215, 109, .42) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 72%, rgba(243, 189, 60, .28) 0 1px, transparent 1.5px);
  background-size: 110px 110px, 160px 160px; animation: star-drift 12s linear infinite;
}
.btn-gold-shimmer { position: relative; overflow: hidden; }
.btn-gold-shimmer::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
  transform: rotate(24deg); animation: button-shimmer 4.2s ease-in-out infinite;
}
.js .site-footer { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-fintech-out), transform var(--dur-reveal) var(--ease-fintech-out); }
.js .site-footer.is-revealed { opacity: 1; transform: translateY(0); }
.footer-grid li a { transition: color var(--dur-hover) ease; }
.footer-grid li a:hover { color: var(--gold-bright); }

@keyframes hero-copy-in { to { opacity: 1; transform: translateY(0); } }
@keyframes hero-stage-in { to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes ambient-gold-drift { to { transform: translate(-34px, 20px) scale(1.12); opacity: .72; } }
@keyframes glow-breathe { 50% { transform: scale(1.1); opacity: .72; } }
@keyframes mockup-float { 50% { transform: translateY(-9px); } }
@keyframes stat-pill-float { 50% { transform: translateY(-7px); } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(120, 214, 161, .52); } 70% { box-shadow: 0 0 0 9px rgba(120, 214, 161, 0); } 100% { box-shadow: 0 0 0 0 rgba(120, 214, 161, 0); } }
@keyframes skeleton-shimmer { to { background-position: -220% 0; } }
@keyframes number-settle { 45% { transform: scale(1.055); } }
@keyframes delta-pop { 0% { opacity: 0; transform: translateY(4px) scale(.8); } 60% { transform: translateY(-1px) scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes category-pop { 50% { transform: scale(1.12) rotate(-3deg); } }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes point-pop { 0% { opacity: 0; transform: scale(.55); } 100% { opacity: 1; transform: scale(1); } }
@keyframes flow-item-in { to { opacity: 1; transform: translateY(0); } }
@keyframes step-ring { 50% { transform: scale(1.08) rotate(8deg); } }
@keyframes vault-sweep { 0%, 70% { left: -80%; } 100% { left: 150%; } }
@keyframes button-shimmer { 0%, 72% { left: -70%; } 100% { left: 145%; } }
@keyframes star-drift { to { background-position: 35px 24px, -28px 38px; } }

@media (max-width: 980px) {
  .primary-nav > ul a::after { bottom: 2px; }
  .site-header.is-scrolled .header-inner { min-height: 60px; }
  .hero-range-pill { left: 8%; }
}

@media (max-width: 680px) {
  .hero::after { display: none; }
  .hero-range-pill { left: 0; top: 12%; font-size: 10px; }
  .hero-badge { max-width: 155px; }
  .live-heading .eyebrow { padding-right: 112px; }
  .market-pill {
    position: absolute;
    top: 20px;
    right: 18px;
    white-space: nowrap;
  }
  .gold-card:hover,
  .js [data-reveal].is-revealed.gold-card:hover { transform: none; }
  .screenshot-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .screenshot,
  .screenshot-wide {
    grid-column: auto;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 20px;
    min-height: 280px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
  }
  .screenshot:last-child { border-bottom: 1px solid var(--line); }
  .screenshot img,
  .screenshot-wide img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-height: 250px;
    justify-self: start;
    object-fit: contain;
    object-position: center;
    transform: none;
    transition: filter var(--dur-panel) ease;
  }
  .screenshot-wide img { max-height: 220px; }
  .screenshot figcaption {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    text-align: left;
    text-wrap: balance;
  }
  .screenshot figcaption::before {
    content: "0" counter(showcase);
    display: block;
    margin-bottom: 9px;
    color: var(--gold-bright);
    font: 800 12px/1 "Manrope", sans-serif;
    letter-spacing: .12em;
  }
  .screenshot:nth-child(even) img {
    grid-column: 2;
    justify-self: end;
  }
  .screenshot:nth-child(even) figcaption {
    grid-column: 1;
    text-align: right;
  }
  .js .screenshot-grid > .screenshot[data-reveal]:not(.is-revealed):nth-child(odd) { transform: translateX(-20px); }
  .js .screenshot-grid > .screenshot[data-reveal]:not(.is-revealed):nth-child(even) { transform: translateX(20px); }
  .final-cta-inner > div .button {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
  .final-cta img {
    justify-self: center;
  }
  .steps-list > li > span { width: 44px; height: 44px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-phone-stage, .site-footer, .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-copy > *, .hero-phone-stage, .hero-phone-mockup, .hero-glow, .stat-pill-floating,
  .market-pill::before, .live-card.is-loading .price-group dd, .feature-card .icon-box,
  .price-change,
  .feature-card .chart-path-anim, .feature-card .trend-point, .feature-card .profit-flow span,
  .steps-list > li > span, .privacy-icon::after, .btn-gold-shimmer::after, .final-cta-inner::before {
    animation: none !important;
  }
  .chart-path-anim { stroke-dashoffset: 0; }
  .trend-area, .trend-point, .profit-flow span { opacity: 1; transform: none; }
  .screenshot img { transform: none !important; }
}