/* ════════════════════════════════════════════════════════════
   FINOVATIVES — 3D Stories CSS
   Used on the homepage for the Trade Story + Pricing Story
   ════════════════════════════════════════════════════════════ */

/* ─── STORY (sticky scroll, replacing Live Preview) ─── */
.trade-story {
	position: relative;
	min-height: 500vh;
	background: #0a0e1a;
	color: #e2e8f0;
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
.trade-story-intro {
	position: relative;
	height: 60vh; display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 60px 20px 40px;
	background: radial-gradient(ellipse at center top, #1e1b4b 0%, #0a0e1a 60%);
	overflow: hidden;
}
.trade-story-intro::before {
	content: ""; position: absolute; inset: 0;
	background-image:
		radial-gradient(2px 2px at 20% 30%, rgba(99,102,241,0.4), transparent),
		radial-gradient(1px 1px at 50% 70%, rgba(168,85,247,0.3), transparent),
		radial-gradient(1.5px 1.5px at 80% 20%, rgba(99,102,241,0.4), transparent);
	background-size: 300px 300px;
	animation: drift 60s linear infinite;
}
@keyframes drift {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-300px, -300px); }
}
.trade-story-intro__content { position: relative; z-index: 2; max-width: 800px; }
.trade-story-intro__eyebrow {
	display: inline-block; padding: 6px 16px; border-radius: 20px;
	background: rgba(99,102,241,0.2); color: #a5b4fc;
	font-size: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 16px;
}
.trade-story-intro__title {
	font-size: clamp(32px, 5vw, 52px); margin: 0 0 12px; line-height: 1.1;
	background: linear-gradient(135deg, #fff 30%, #818cf8 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.trade-story-intro__subtitle { font-size: 17px; color: #94a3b8; max-width: 600px; margin: 0 auto; line-height: 1.6; }
.trade-story-intro__hint {
	margin-top: 30px; color: #64748b; font-size: 13px;
	animation: bounce-hint 2s infinite;
}
@keyframes bounce-hint {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50% { transform: translateY(8px); opacity: 1; }
}

.trade-stage {
	position: sticky; top: 0; height: 100vh;
	display: flex; align-items: center; justify-content: center;
	padding: 120px 20px 40px; /* top padding clears the sticky site header + demo banner */
	box-sizing: border-box;
}
.trade-stage__inner {
	display: grid; grid-template-columns: 380px 1fr; gap: 40px;
	max-width: 1200px; width: 100%; align-items: center;
}
@media (max-width: 1000px) {
	.trade-stage__inner { grid-template-columns: 1fr; gap: 24px; max-width: 700px; }
}

.trade-narrative { position: relative; min-height: 240px; }
.trade-stage-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px; border-radius: 20px;
	background: rgba(99,102,241,0.15); color: #a5b4fc;
	font-size: 12px; font-weight: 700; letter-spacing: 1px; margin-bottom: 18px;
}
.trade-stage-pill__dot {
	width: 8px; height: 8px; border-radius: 50%; background: #818cf8;
	animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
	0%, 100% { opacity: 0.4; transform: scale(0.8); }
	50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 12px #818cf8; }
}
.trade-narrative__title {
	font-size: clamp(26px, 2.5vw, 34px); line-height: 1.2; color: #fff;
	margin: 0 0 14px; min-height: 80px;
}
.trade-narrative__desc {
	font-size: 15px; line-height: 1.7; color: #94a3b8;
	margin: 0; min-height: 80px;
}

.trade-progress { display: flex; gap: 10px; margin-top: 30px; }
.trade-progress__dot {
	flex: 1; height: 4px; border-radius: 2px;
	background: rgba(255,255,255,0.1); position: relative; overflow: hidden;
}
.trade-progress__dot::before {
	content: ""; position: absolute; inset: 0; background: #6366f1;
	transform: translateX(-100%); transition: transform 0.4s;
}
.trade-progress__dot.is-done::before { transform: translateX(0); }
.trade-progress__dot.is-active::before { transform: translateX(0); background: linear-gradient(90deg, #6366f1, #a855f7); }

.trade-chart {
	position: relative;
	background: linear-gradient(180deg, #131827 0%, #0f1420 100%);
	border-radius: 18px; padding: 24px;
	box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
	overflow: hidden;
}
.trade-chart__header {
	display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
	padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.trade-chart__symbol { font-weight: 700; font-size: 16px; color: #fff; }
.trade-chart__tf {
	padding: 3px 8px; border-radius: 4px; background: rgba(99,102,241,0.15);
	color: #a5b4fc; font-size: 11px; font-weight: 600;
}
.trade-chart__time {
	margin-left: auto; font-family: monospace; color: #64748b; font-size: 13px;
}
.trade-chart__price {
	font-size: 28px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
	line-height: 1;
}
.trade-chart__change {
	margin-top: 4px; font-size: 14px; font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.trade-chart__change--green { color: #22c55e; }
.trade-chart__change--red { color: #ef4444; }

.trade-chart__svg { width: 100%; height: 280px; display: block; }
.trade-candle { will-change: opacity; }
.trade-indicator-line { stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 0.3s linear; }
.trade-buy-arrow {
	opacity: 0; transform: translateY(20px); transform-origin: center;
	transition: opacity 0.4s, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.trade-buy-arrow.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.trade-sl-line, .trade-tp-line {
	stroke-dasharray: 6 4; stroke-width: 1.5;
	opacity: 0; transition: opacity 0.4s;
}
.trade-sl-line.is-visible, .trade-tp-line.is-visible { opacity: 1; }

.trade-badge {
	position: absolute; padding: 8px 14px; border-radius: 10px;
	font-size: 12px; font-weight: 700; backdrop-filter: blur(8px);
	opacity: 0; transform: translateY(-10px) scale(0.8);
	transition: opacity 0.5s, transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
	z-index: 5; pointer-events: none;
}
.trade-badge.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.trade-badge--buy {
	background: rgba(34,197,94,0.95); color: #fff;
	box-shadow: 0 8px 24px rgba(34,197,94,0.4);
}
.trade-badge--sl { background: rgba(239,68,68,0.9); color: #fff; font-size: 11px; padding: 4px 10px; }
.trade-badge--tp { background: rgba(34,197,94,0.9); color: #fff; font-size: 11px; padding: 4px 10px; }

.trade-pnl {
	position: absolute; top: 20px; right: 20px;
	background: rgba(15,23,42,0.9); backdrop-filter: blur(10px);
	border-radius: 12px; padding: 10px 14px; min-width: 140px;
	border: 1px solid rgba(34,197,94,0.3);
	opacity: 0; transform: translateX(20px);
	transition: opacity 0.5s, transform 0.5s; z-index: 6;
}
.trade-pnl.is-visible { opacity: 1; transform: translateX(0); }
.trade-pnl__label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
.trade-pnl__value { font-size: 22px; font-weight: 800; color: #22c55e; font-variant-numeric: tabular-nums; line-height: 1.2; }
.trade-pnl__pct { font-size: 12px; color: #22c55e; font-weight: 600; }

.trade-celebration {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(ellipse at center, rgba(34,197,94,0.2) 0%, transparent 70%);
	opacity: 0; transition: opacity 0.6s;
	pointer-events: none; z-index: 7;
}
.trade-celebration.is-visible { opacity: 1; }
.trade-celebration__inner {
	background: linear-gradient(135deg, #22c55e, #16a34a);
	color: #fff; padding: 24px 40px; border-radius: 16px;
	font-size: 22px; font-weight: 800; text-align: center;
	box-shadow: 0 20px 60px rgba(34,197,94,0.5);
	transform: scale(0.6); transition: transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.trade-celebration.is-visible .trade-celebration__inner { transform: scale(1); }
.trade-celebration__icon { font-size: 44px; display: block; margin-bottom: 8px; }
.trade-celebration__sub { display: block; font-size: 13px; font-weight: 500; opacity: 0.95; margin-top: 6px; }

.trade-volume {
	display: flex; align-items: flex-end; height: 36px; gap: 2px;
	margin-top: 12px; padding-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.05);
}
.trade-volume__bar {
	flex: 1; background: rgba(99,102,241,0.4);
	border-radius: 1px; transform-origin: bottom;
	transform: scaleY(0); transition: transform 0.5s;
}

@media (prefers-reduced-motion: reduce) {
	.trade-stage { position: relative; height: auto; padding: 60px 20px; }
	.trade-story { min-height: auto; }
	.trade-candle, .trade-indicator-line, .trade-buy-arrow, .trade-pnl, .trade-celebration { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 768px) {
	.trade-story { min-height: 400vh; }
	.trade-chart__svg { height: 220px; }
	.trade-pnl { top: 12px; right: 12px; padding: 8px 12px; min-width: 100px; }
	.trade-pnl__value { font-size: 18px; }
}
/* ════════════════════════════════════════════════════════════
   PRICING STORY — "Three Paths" sticky scroll
   ════════════════════════════════════════════════════════════ */
.pricing-story {
	position: relative;
	min-height: 500vh; /* 5 viewport heights of scroll inside the sticky pin */
	background: linear-gradient(180deg, #0a0e1a 0%, #1e1b4b 50%, #0a0e1a 100%);
	color: #e2e8f0;
	/* NO overflow:hidden — it breaks sticky pinning in some browsers */
}
/* Background gradient on the sticky stage so it's always visible while pinned */
.pricing-story__stage::before {
	content: ""; position: absolute; inset: 0;
	background-image:
		radial-gradient(circle at 20% 20%, rgba(168,85,247,0.15), transparent 40%),
		radial-gradient(circle at 80% 80%, rgba(99,102,241,0.15), transparent 40%);
	pointer-events: none; z-index: 0;
}
.pricing-story__center { z-index: 1; }

.pricing-story__stage {
	position: sticky; top: 0; height: 100vh;
	display: flex; align-items: center; justify-content: center;
	padding: 150px 20px 30px; /* generous top padding clears site header + demo banner */
	box-sizing: border-box;
	overflow: hidden; /* clip cards to the stage's bounds */
}
.pricing-story__center {
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	max-width: 1200px; width: 100%; position: relative;
}

/* Section heading at top */
.pricing-story__header {
	text-align: center; max-width: 700px;
	transition: opacity 0.6s, transform 0.6s;
}
.pricing-story__header.is-hidden {
	opacity: 0; transform: translateY(-20px); pointer-events: none;
}
.pricing-story__eyebrow {
	display: inline-block; padding: 6px 16px; border-radius: 20px;
	background: rgba(168,85,247,0.2); color: #c084fc;
	font-size: 11px; font-weight: 700; letter-spacing: 2px; margin-bottom: 12px;
}
.pricing-story__title {
	font-size: clamp(24px, 3vw, 36px); margin: 0; color: #fff;
	background: linear-gradient(135deg, #fff 30%, #c084fc 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Narrative pill at top — fades out at finale stage */
.pricing-narrative-top {
	text-align: center; max-width: 700px;
	transition: opacity 0.6s, transform 0.6s;
}
.pricing-narrative-top.is-hidden {
	opacity: 0; transform: translateY(-20px); pointer-events: none;
}
.pricing-stage-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px; border-radius: 20px;
	background: rgba(168,85,247,0.15); color: #c084fc;
	font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-bottom: 14px;
}
.pricing-stage-pill__dot {
	width: 8px; height: 8px; border-radius: 50%; background: #c084fc;
	animation: pulse-dot 1.5s ease-in-out infinite;
}
.pricing-narrative__title {
	font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; color: #fff;
	margin: 0 0 10px; min-height: 40px;
}
.pricing-narrative__desc {
	font-size: 15px; line-height: 1.6; color: #94a3b8;
	margin: 0; min-height: 50px;
}

/* Big finale title — hidden until last stage */
.pricing-finale {
	position: absolute; top: 0; left: 0; right: 0;
	text-align: center; pointer-events: none;
	opacity: 0; transform: scale(0.85) translateY(40px);
	transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pricing-finale.is-visible {
	opacity: 1; transform: scale(1) translateY(0); pointer-events: auto;
}
.pricing-finale__eyebrow {
	display: inline-block; padding: 5px 14px; border-radius: 20px;
	background: rgba(251,191,36,0.2); color: #fbbf24;
	font-size: 11px; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px;
}
.pricing-finale__title {
	font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 8px;
	color: #fff; font-weight: 800;
	background: linear-gradient(135deg, #fff 30%, #c084fc 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pricing-finale__title span {
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pricing-finale__sub { font-size: 14px; color: #94a3b8; margin: 0; }

.pricing-progress { display: flex; gap: 8px; max-width: 400px; width: 100%; margin-top: 10px; }
.pricing-progress__dot {
	flex: 1; height: 4px; border-radius: 2px;
	background: rgba(255,255,255,0.1); position: relative; overflow: hidden;
}
.pricing-progress__dot::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, #6366f1, #a855f7);
	transform: translateX(-100%); transition: transform 0.4s;
}
.pricing-progress__dot.is-done::before, .pricing-progress__dot.is-active::before { transform: translateX(0); }

/* ─── Cards container ─── */
.pricing-cards-3d {
	position: relative; perspective: 1500px;
	height: 470px; width: 100%; max-width: 800px;
	margin: 0 auto;
}
@media (max-width: 1000px) { .pricing-cards-3d { height: 490px; } }

.ps-card {
	position: absolute;
	left: 50%; top: 20px;
	width: 240px;
	margin-left: -120px; /* center horizontally */
	background: linear-gradient(180deg, #1e1b4b 0%, #131827 100%);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 16px; padding: 22px 18px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
	transform-style: preserve-3d; will-change: transform, opacity;
	transition: box-shadow 0.5s;
	transform: translate3d(0, 0, 0);
}
.ps-card--featured {
	background: linear-gradient(180deg, #4c1d95 0%, #1e1b4b 100%);
	border-color: rgba(168,85,247,0.4);
}
.ps-card--lifetime {
	background: linear-gradient(180deg, #78350f 0%, #1e1b4b 100%);
	border-color: rgba(251,191,36,0.4);
}
.ps-card.is-focused {
	box-shadow: 0 30px 80px rgba(99,102,241,0.4), 0 0 0 2px rgba(168,85,247,0.4);
}
.ps-card--featured.is-focused {
	box-shadow: 0 30px 80px rgba(168,85,247,0.5), 0 0 0 2px #a855f7;
}
.ps-card--lifetime.is-focused {
	box-shadow: 0 30px 80px rgba(251,191,36,0.4), 0 0 0 2px #fbbf24;
}

.ps-card__badge {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	padding: 4px 14px; border-radius: 20px;
	background: linear-gradient(90deg, #6366f1, #a855f7); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: 1px;
	box-shadow: 0 6px 20px rgba(168,85,247,0.4);
	opacity: 0; transition: opacity 0.4s;
}
.ps-card__badge--gold {
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
	box-shadow: 0 6px 20px rgba(251,191,36,0.4);
}
/* Badge appears when card has arrived (and stays visible) */
.ps-card.is-arrived .ps-card__badge { opacity: 1; }

.ps-card__head { text-align: center; margin-bottom: 14px; }
.ps-card__icon { font-size: 28px; display: block; margin-bottom: 6px; }
.ps-card__head h4 { font-size: 18px; color: #fff; margin: 0 0 4px; }
.ps-card__sub { font-size: 12px; color: #94a3b8; margin: 0; }
.ps-card__price {
	font-size: 28px; font-weight: 800; color: #fff;
	text-align: center; margin: 10px 0; font-variant-numeric: tabular-nums;
}
.ps-card__price small { font-size: 12px; font-weight: 500; color: #94a3b8; margin-left: 4px; }
.ps-card__savings {
	background: rgba(34,197,94,0.15); color: #4ade80;
	padding: 6px 10px; border-radius: 6px; font-size: 11px; text-align: center;
	margin-bottom: 12px;
	opacity: 0; transition: opacity 0.5s;
}
/* Savings stays visible after card arrives */
.ps-card.is-arrived .ps-card__savings { opacity: 1; }
.ps-card--lifetime .ps-card__savings { background: rgba(251,191,36,0.15); color: #fbbf24; }

.ps-card__features { list-style: none; padding: 0; margin: 0 0 14px; }
.ps-card__features li {
	padding: 5px 0; font-size: 12px; color: #cbd5e1;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	opacity: 0; transform: translateX(-10px);
	transition: opacity 0.5s, transform 0.5s;
}
/* Features stay visible after card arrives — staggered reveal */
.ps-card.is-arrived .ps-card__features li { opacity: 1; transform: translateX(0); }
.ps-card.is-arrived .ps-card__features li:nth-child(1) { transition-delay: 0.1s; }
.ps-card.is-arrived .ps-card__features li:nth-child(2) { transition-delay: 0.18s; }
.ps-card.is-arrived .ps-card__features li:nth-child(3) { transition-delay: 0.26s; }
.ps-card.is-arrived .ps-card__features li:nth-child(4) { transition-delay: 0.34s; }
.ps-card.is-arrived .ps-card__features li:nth-child(5) { transition-delay: 0.42s; }
.ps-card__features li:last-child { border-bottom: 0; }

.ps-card__cta {
	display: block; padding: 10px; text-align: center;
	background: rgba(99,102,241,0.2); color: #fff;
	border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 13px;
	transition: background 0.3s, transform 0.3s;
}
.ps-card__cta:hover { background: rgba(99,102,241,0.4); transform: translateY(-2px); }
.ps-card__cta--featured { background: linear-gradient(90deg, #6366f1, #a855f7); }
.ps-card__cta--lifetime { background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #18181b; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pricing-story__stage { position: relative; height: auto; }
	.pricing-story { min-height: auto; }
	.ps-card { position: relative !important; transform: none !important; opacity: 1 !important; }
	.pricing-cards-3d { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; height: auto; }
}

/* Mobile / tablet adjustments */
@media (max-width: 1000px) {
	.pricing-cards-3d { height: 600px; max-width: 700px; }
}

@media (max-width: 600px) {
	.pricing-story { min-height: 500vh; }
	.pricing-cards-3d { height: 540px; }
	.ps-card { width: 240px; margin-left: -120px; padding: 22px 18px; }
	.ps-card__price { font-size: 30px; }
}