/* Homepage — modern crimson WAVE theme (readable nested cards) */

:root {
  --home-teal: #dc143c;
  --home-teal-deep: #8b0000;
  --home-mint: #f2eef0;
  --home-leaf: #e53955;
  --home-ink: #1a1a1a;
  --home-muted: #6b5c60;
  --home-field: #ffffff;
  --home-line: #eadfe2;
  --home-card: #ffffff;
  --r-soft: 16px;
  --r-cut: 16px;
}

body.home-shell {
  background:
    radial-gradient(ellipse 70% 45% at 8% 0%, rgba(220, 20, 60, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 12%, rgba(26, 26, 26, 0.06), transparent 50%),
    linear-gradient(180deg, #f8f4f5 0%, #f2eef0 50%, #ebe6e8 100%) !important;
  color: var(--home-ink) !important;
}

.ox-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.ox-wave {
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  right: 0;
}

.ox-wave--top {
  top: 0;
  height: 42%;
  min-height: 48px;
}

.ox-wave--bot {
  bottom: 0;
  height: 52%;
  min-height: 64px;
}

/* —— Nav —— */
.home-nav {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 90% at 8% 0%, rgba(220, 20, 60, 0.4), transparent 55%),
    linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 28%, #8b0000 58%, #dc143c 100%) !important;
  border-bottom: 0 !important;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 10px 24px rgba(26, 26, 26, 0.28);
  height: auto !important;
  min-height: 58px;
  padding: 12px 14px !important;
}

.home-nav > * { position: relative; z-index: 2; }

.home-btn-ghost {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
}

.home-btn-solid {
  background: #fff !important;
  color: #8b0000 !important;
}

/* —— Banner: no crop —— */
.home-banner {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  clip-path: none !important;
  background: #1a1a1a !important;
  border: 1px solid rgba(220, 20, 60, 0.15);
  box-shadow: 0 8px 22px rgba(26, 26, 26, 0.12);
}

.home-banner-slide {
  aspect-ratio: 16 / 9;
  min-height: 160px;
  background: #1a1a1a;
}

.home-banner-slide img {
  width: 100% !important;
  height: 100% !important;
  min-height: 160px;
  object-fit: contain !important;
  object-position: center !important;
  background: #111;
}

.home-banner-empty {
  border-radius: 16px !important;
  border: 1px dashed rgba(220, 20, 60, 0.35) !important;
  background: #fff !important;
  color: var(--home-muted) !important;
  min-height: 120px;
  clip-path: none !important;
}

.home-banner-dot.is-on {
  background: #dc143c !important;
}

/* —— Hero wave shell (white text OK) —— */
.home-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 90% at 8% 0%, rgba(220, 20, 60, 0.35), transparent 55%),
    linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 30%, #8b0000 62%, #dc143c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.28);
  color: #fff !important;
  padding: 18px 16px !important;
}

.home-hero > *:not(.ox-waves) { position: relative; z-index: 2; }
.home-hero-ring,
.home-hero-slash { display: none !important; }

.home-kicker,
.home-hero h1,
.home-hero h1 em,
.home-hero p {
  color: #fff !important;
}

.home-hero h1 em { color: #ffc9d4 !important; }

/* —— Stats / rails / tiles / close: wave + white text —— */
.home-stat,
.home-rail,
.home-tile,
.home-close {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 90% at 8% 0%, rgba(220, 20, 60, 0.32), transparent 55%),
    linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 30%, #8b0000 62%, #dc143c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 10px 24px rgba(26, 26, 26, 0.2) !important;
  color: #fff !important;
  border-radius: 16px !important;
}

.home-stat > *:not(.ox-waves),
.home-rail > *:not(.ox-waves),
.home-tile > *:not(.ox-waves),
.home-close > *:not(.ox-waves) {
  position: relative;
  z-index: 2;
}

.home-stat strong,
.home-stat span,
.home-rail h3,
.home-rail p,
.home-tile h4,
.home-tile p,
.home-close h2,
.home-close h2 em,
.home-close p {
  color: #fff !important;
}

.home-rail p,
.home-tile p,
.home-close p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.home-rail-ico,
.home-sec-mark,
.home-tl-dot,
.home-road-num {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* —— Panels: wave shell, but INNER rows are white readable cards —— */
.home-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 90% at 8% 0%, rgba(220, 20, 60, 0.32), transparent 55%),
    linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 30%, #8b0000 62%, #dc143c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 10px 24px rgba(26, 26, 26, 0.22) !important;
  border-radius: 18px !important;
  color: #fff !important;
}

.home-panel > *:not(.ox-waves) {
  position: relative;
  z-index: 2;
}

.home-panel > h2,
.home-panel > h2 em,
.home-panel > p,
.home-panel > .home-tag {
  color: #fff !important;
}

.home-panel > p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.home-tag {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* Nested list rows — white cards, dark ink (fixes invisible text) */
.home-list-row {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-left: 3px solid #dc143c !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
}

.home-list-ico {
  background: linear-gradient(145deg, #e53955, #dc143c) !important;
  color: #fff !important;
  border: 0 !important;
}

.home-list-body strong,
.home-list-meta strong {
  color: #1a1a1a !important;
}

.home-list-body span,
.home-list-meta small {
  color: #6b5c60 !important;
}

.home-unlock {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

.home-unlock span,
.home-unlock strong {
  color: #fff !important;
}

/* Commission / roadmap nested cells */
.home-comm-cell,
.home-road-item {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.home-comm-cell strong,
.home-comm-cell span,
.home-road-item strong,
.home-road-item p,
.home-road-item .st {
  color: #1a1a1a !important;
}

.home-road-item p {
  color: #6b5c60 !important;
}

.home-road-num {
  background: linear-gradient(145deg, #e53955, #dc143c) !important;
}

.home-tl-item {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid var(--home-line) !important;
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.06) !important;
}

.home-tl-item h4 {
  color: #1a1a1a !important;
}

.home-tl-item p {
  color: #6b5c60 !important;
}

.home-tl-dot {
  background: linear-gradient(145deg, #e53955, #dc143c) !important;
}

/* —— Section titles —— */
.home-sec-title,
.home-sec-hint {
  color: var(--home-ink) !important;
}

.home-sec-title em {
  color: #8b0000 !important;
}

/* —— CTAs —— */
.home-cta-primary,
.home-invest,
.home-join,
.home-unlock a {
  background: linear-gradient(105deg, #e53955, #dc143c) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(220, 20, 60, 0.35) !important;
}

.home-cta-secondary {
  background: #fff !important;
  color: #8b0000 !important;
  border: 1px solid rgba(220, 20, 60, 0.25) !important;
}

/* —— Plans: vertical stack like shop (no L/R scroll) —— */
body.home-shell .home-plans,
.home-plans {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  padding: 0 0 8px !important;
}

body.home-shell .home-plans .plan,
.home-plans .plan {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  scroll-snap-align: unset !important;
  background:
    radial-gradient(ellipse 80% 90% at 8% 0%, rgba(220, 20, 60, 0.3), transparent 55%),
    linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 30%, #8b0000 62%, #dc143c 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(26, 26, 26, 0.22) !important;
}

body.home-shell .home-plans .plan::after {
  display: none !important;
}

.home-plans .plan > *:not(.ox-waves) {
  position: relative;
  z-index: 2;
}

.home-plans .plan,
.home-plans .plan * {
  color: #fff;
}

.home-plan-box {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
}

.home-plan-box label,
.home-plan-box strong,
.home-plan-box strong small,
.home-plan-tag {
  color: #fff !important;
}

.home-plan-box.earn {
  background: rgba(255, 255, 255, 0.2) !important;
  border-bottom-color: rgba(255, 255, 255, 0.45) !important;
}

.home-plans .plan [style*="color:#6b8f8a"],
.home-plans .plan [style*="color: #6b8f8a"] {
  color: rgba(255, 255, 255, 0.75) !important;
}

.home-plans .plan [style*="border:1px solid #e2ece9"],
.home-plans .plan [style*="border: 1px solid #e2ece9"] {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.home-invest {
  border-radius: 999px !important;
  padding: 0 14px !important;
  height: 36px !important;
}

.home-foot {
  color: var(--home-muted) !important;
}

.home-foot strong {
  color: #8b0000 !important;
}

/* Hide plan slider dots if present */
.home-plans + .home-plan-dots,
[data-plan-dots] {
  display: none !important;
}