.public-header {
  position: sticky; top: 0; z-index: var(--z-header); background: var(--header-backdrop);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); height: 72px;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.desktop-nav { display: flex; gap: var(--sp-32); margin-left: var(--sp-48); flex: 1; }
.desktop-nav a { font-weight: 500; color: var(--text-secondary); transition: color 0.2s; }
.desktop-nav a:hover { color: var(--text-primary); }
.header-controls { display: flex; align-items: center; gap: var(--sp-8); }

.mobile-panel {
  position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-modal);
  display: none; opacity: 0; transition: opacity 0.2s;
}
.mobile-panel.show { display: block; opacity: 1; }
.mobile-panel-inner {
  position: absolute; right: 0; top: 0; bottom: 0; width: 280px;
  background: var(--surface); padding: var(--sp-24); box-shadow: var(--shadow-md);
  transform: translateX(100%); transition: transform 0.3s;
}
.mobile-panel.show .mobile-panel-inner { transform: translateX(0); }
.panel-close { margin-bottom: var(--sp-32); margin-left: auto; display: flex; }
.mobile-nav-links { display: flex; flex-direction: column; gap: var(--sp-16); }
.panel-link { font-size: 1.25rem; font-weight: 500; padding: var(--sp-8) 0; }
.btn-primary-mobile { background: var(--primary); color: #fff; padding: var(--sp-12); border-radius: var(--rad-8); text-align: center; margin-top: var(--sp-16); }

.hero { padding: var(--sp-96) 0 var(--sp-64); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: center; }
.eyebrow { color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.875rem; display: block; margin-bottom: var(--sp-16); }
.hero h1 { margin-bottom: var(--sp-24); }
.hero p { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: var(--sp-32); max-width: 480px; }
.hero-actions { display: flex; gap: var(--sp-16); margin-bottom: var(--sp-48); }
.trust-points { list-style: none; display: flex; flex-direction: column; gap: var(--sp-12); }
.trust-points li { display: flex; align-items: center; gap: var(--sp-8); color: var(--text-secondary); }
.trust-points svg { color: var(--success); }

.preview-card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--rad-16); padding: var(--sp-24); position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.preview-header { display: flex; justify-content: space-between; margin-bottom: var(--sp-24); }
.preview-pair { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: var(--sp-8); }
.preview-price { font-size: 2rem; font-weight: 700; margin: var(--sp-4) 0; }
.preview-stats { display: flex; gap: var(--sp-16); font-size: 0.75rem; color: var(--text-secondary); text-align: right; }
.preview-timeframes { display: flex; gap: var(--sp-16); font-size: 0.75rem; color: var(--text-secondary); margin-bottom: var(--sp-8); }
.preview-timeframes .active { color: var(--primary); font-weight: 600; }
.preview-chart { margin-bottom: var(--sp-24); }
.chart-svg { width: 100%; height: 120px; }
.preview-order { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rad-8); padding: var(--sp-16); margin-bottom: var(--sp-16); }
.order-tabs { display: flex; gap: var(--sp-16); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-16); padding-bottom: var(--sp-8); font-size: 0.875rem; }
.order-tabs .active { color: var(--success); font-weight: 600; border-bottom: 2px solid var(--success); }
.order-input { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-secondary); background: var(--surface-elevated); padding: var(--sp-8); border-radius: var(--rad-4); margin-bottom: var(--sp-8); }
.order-input span { color: var(--text-primary); }
.order-btn { background: var(--success); color: #fff; text-align: center; padding: var(--sp-8); border-radius: var(--rad-4); font-weight: 600; margin-top: var(--sp-16); }
.preview-mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.mini-card { background: var(--surface); border: 1px solid var(--border); padding: var(--sp-8) var(--sp-12); border-radius: var(--rad-8); display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 600; }
.mini-card-id { display: flex; align-items: center; gap: var(--sp-4); }
.preview-label { text-align: center; font-size: 0.75rem; color: var(--text-secondary); margin-top: var(--sp-12); }

/* Animated Market Showcase */
.market-showcase {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: var(--sp-16) 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.market-flow {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.market-flow:last-child {
  border-bottom: none;
}

.market-flow__viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.market-flow__track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  will-change: transform;
}

.market-flow:hover .market-flow__track,
.market-flow:focus-within .market-flow__track {
  animation-play-state: paused;
}

.market-flow__group {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: 32px;
  padding-right: 32px; /* Ensure seamless gap loop */
}

.market-flow__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  gap: 10px;
  padding: 16px 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.market-flow__item:hover,
.market-flow__item:focus-visible {
  opacity: 0.7;
}

.market-flow__pair {
  font-weight: 600;
  color: var(--text-primary);
}
.market-flow__price {
  color: var(--text-secondary);
  margin-left: var(--sp-4);
}
.market-flow__change {
  font-weight: 600;
  margin-left: var(--sp-8);
}

@keyframes market-flow-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes market-flow-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.market-flow--left {
  animation-name: market-flow-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.market-flow--right {
  animation-name: market-flow-right;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#flow-row-1 .market-flow__track { animation-duration: 42s; }
#flow-row-2 .market-flow__track { animation-duration: 48s; }
#flow-row-3 .market-flow__track { animation-duration: 54s; }

@media (prefers-reduced-motion: reduce) {
  .market-flow__viewport {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .market-flow__track {
    animation: none !important;
    transform: none !important;
  }
  .market-flow__group[aria-hidden="true"] {
    display: none;
  }
}

.ticker-notice { text-align: center; font-size: 0.75rem; color: var(--text-secondary); margin-top: var(--sp-16); padding: 0 var(--sp-24); }

.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-24); }
.card-icon { margin-bottom: var(--sp-16); color: var(--primary); }
.card h3 { margin-bottom: var(--sp-8); }
.card p { color: var(--text-secondary); margin-bottom: var(--sp-16); font-size: 0.875rem; }
.card-link { color: var(--primary); font-weight: 500; font-size: 0.875rem; display: inline-flex; align-items: center; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: center; }
.benefits-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.benefits-list li { display: flex; align-items: center; gap: var(--sp-8); font-weight: 500; }
.benefits-list svg { color: var(--primary); }
.exp-preview { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--rad-16); padding: var(--sp-24); }
.exp-label { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin-bottom: var(--sp-16); }
.exp-ui { border: 1px solid var(--border); background: var(--bg-main); border-radius: var(--rad-8); height: 200px; display: flex; flex-direction: column; }
.exp-nav { height: 24px; border-bottom: 1px solid var(--border); background: var(--surface); }
.exp-body { flex: 1; display: flex; }
.exp-chart-area { flex: 2; border-right: 1px solid var(--border); }
.exp-side { flex: 1; display: flex; flex-direction: column; }
.exp-box { flex: 1; border-bottom: 1px solid var(--border); }
.exp-footer { height: 32px; border-top: 1px solid var(--border); background: var(--surface); }
.exp-features { margin-top: var(--sp-16); display: flex; flex-wrap: wrap; gap: var(--sp-8); justify-content: center; }
.exp-features span { background: var(--surface); padding: 4px var(--sp-8); border-radius: var(--rad-4); font-size: 0.75rem; border: 1px solid var(--border); }

.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); margin-top: var(--sp-48); }
.sec-item { background: var(--surface); border: 1px solid var(--border); padding: var(--sp-24); border-radius: var(--rad-12); }
.sec-item .badge { margin-bottom: var(--sp-12); }

.steps-container { max-width: 800px; }
.steps-flex { display: flex; justify-content: space-between; align-items: flex-start; margin-top: var(--sp-48); position: relative; }
.step { text-align: center; width: 120px; z-index: 2; background: var(--bg-main); }
.step-num { width: 48px; height: 48px; background: var(--primary); color: #fff; border-radius: var(--rad-full); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; margin: 0 auto var(--sp-16); }
.step p { font-weight: 500; font-size: 0.875rem; }
.step-line { flex: 1; height: 2px; background: var(--border); margin-top: 24px; z-index: 1; }

.faq-container { max-width: 700px; }
.cta-btns { display: flex; justify-content: center; gap: var(--sp-16); }

.public-footer { background: var(--surface-elevated); border-top: 1px solid var(--border); padding: var(--sp-64) 0 var(--sp-24); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--sp-32); margin-bottom: var(--sp-64); }
.footer-desc { color: var(--text-secondary); margin: var(--sp-16) 0; font-size: 0.875rem; }
.footer-email { color: var(--text-secondary); font-size: 0.875rem; }
.footer-col h4 { margin-bottom: var(--sp-16); font-size: 1rem; }
.footer-col a { display: block; color: var(--text-secondary); margin-bottom: var(--sp-12); font-size: 0.875rem; }
.footer-col a:hover:not(.disabled-link) { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--border); padding-top: var(--sp-24); flex-wrap: wrap; gap: var(--sp-24); }
.footer-controls { display: flex; gap: var(--sp-16); }
.footer-legal { text-align: right; font-size: 0.75rem; color: var(--text-secondary); max-width: 400px; }
.footer-legal p { margin-top: var(--sp-8); }
.footer-dropdown-btn { background: var(--surface); border: 1px solid var(--border); }