.wealthcurve-page {
--bg: #faf9ff;
--card: #ffffff;
--text: #171321;
--muted: #625b72;
--purple: #6d3df2;
--purple-dark: #32146f;
--blue: #315eea;
--green: #0f8b5f;
--orange: #b76412;
--border: rgba(90, 65, 170, 0.18);
--shadow: 0 18px 55px rgba(33, 19, 86, 0.12);
--radius: 28px;
font-family: inherit;
color: var(--text);
scroll-behavior: smooth;
}

.wealthcurve-page * {
box-sizing: border-box;
}

.wc-container {
max-width: 1180px;
margin: 0 auto;
padding: 36px 18px 78px;
}

.wc-hero {
position: relative;
overflow: hidden;
border-radius: 36px;
padding: 56px 34px;
background:
radial-gradient(circle at 18% 12%, rgba(109, 61, 242, 0.25), transparent 30%),
radial-gradient(circle at 84% 20%, rgba(49, 94, 234, 0.18), transparent 30%),
linear-gradient(135deg, #ffffff, #f2efff 55%, #ffffff);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}

.wc-hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 34px;
align-items: center;
}

.wc-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
margin-bottom: 18px;
border-radius: 999px;
background: rgba(109, 61, 242, 0.11);
color: var(--purple-dark);
font-size: 0.92rem;
font-weight: 800;
}

.wc-hero h1 {
margin: 0;
font-size: clamp(3rem, 7vw, 6rem);
line-height: 0.92;
letter-spacing: -0.07em;
}

.wc-hero h1 span {
color: var(--purple);
}

.wc-hero p {
margin: 24px 0 0;
max-width: 720px;
color: var(--muted);
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.7;
}

.wc-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 32px;
}

.wc-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 800;
text-decoration: none !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wc-button:hover {
transform: translateY(-2px);
}

.wc-button:focus-visible {
outline: 3px solid rgba(109, 61, 242, 0.38);
outline-offset: 4px;
}

.wc-button-primary {
color: #ffffff !important;
background: linear-gradient(135deg, var(--purple), var(--blue));
box-shadow: 0 14px 34px rgba(109, 61, 242, 0.28);
}

.wc-button-primary:hover {
box-shadow: 0 18px 44px rgba(109, 61, 242, 0.38);
}

.wc-button-secondary {
color: var(--purple-dark) !important;
background: #ffffff;
border: 1px solid var(--border);
}

.wc-button-webapp {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0f8b5f, #16a34a);
  border: 1px solid rgba(15, 139, 95, 0.28);
  box-shadow: 0 14px 34px rgba(15, 139, 95, 0.24);
}

.wc-button-webapp:hover {
  box-shadow: 0 18px 44px rgba(15, 139, 95, 0.32);
}

.wc-button-secondary:hover {
box-shadow: 0 14px 34px rgba(33, 19, 86, 0.12);
border-color: rgba(109, 61, 242, 0.34);
}

.wc-visual {
min-height: 370px;
position: relative;
overflow: hidden;
border-radius: 30px;
background: linear-gradient(135deg, #21125c, #6d3df2);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 20px 44px rgba(109, 61, 242, 0.28);
isolation: isolate;
}

.wc-visual::before {
content: "";
position: absolute;
inset: 34px;
background:
linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 44px 44px;
opacity: 0.65;
}

.wc-visual::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
right: -115px;
bottom: -125px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
filter: blur(2px);
z-index: 1;
}

.wc-visual-card {
position: absolute;
inset: 28px;
border-radius: 26px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
z-index: 1;
}

.wc-visual-top {
position: absolute;
top: 24px;
left: 24px;
right: 24px;
display: flex;
justify-content: space-between;
gap: 12px;
color: #ffffff;
z-index: 3;
}

.wc-visual-top strong {
display: block;
font-size: 1.35rem;
}

.wc-visual-top span {
opacity: 0.75;
font-size: 0.85rem;
}

.wc-visual svg {
position: absolute;
left: 28px;
right: 28px;
bottom: 34px;
width: calc(100% - 56px);
height: 205px;
overflow: visible;
z-index: 3;
}

.wc-visual path:first-of-type {
stroke-dasharray: 760;
stroke-dashoffset: 760;
}

.wealthcurve-page.wc-animate-ready .wc-visual path:first-of-type {
animation: wcDrawLine 1.35s ease forwards;
}

.wealthcurve-page.wc-animate-ready .wc-visual circle {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: wcPopDot 0.45s ease forwards;
}

.wealthcurve-page.wc-animate-ready .wc-visual circle:nth-of-type(1) {
animation-delay: 0.25s;
}

.wealthcurve-page.wc-animate-ready .wc-visual circle:nth-of-type(2) {
animation-delay: 0.55s;
}

.wealthcurve-page.wc-animate-ready .wc-visual circle:nth-of-type(3) {
animation-delay: 0.85s;
}

.wealthcurve-page.wc-animate-ready .wc-visual circle:nth-of-type(4) {
animation-delay: 1.1s;
}

@keyframes wcDrawLine {
to {
stroke-dashoffset: 0;
}
}

@keyframes wcPopDot {
from {
opacity: 0;
transform: scale(0.55);
}

to {
opacity: 1;
transform: scale(1);
}
}

.wc-trust-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 20px;
}

.wc-trust-item {
border-radius: 20px;
padding: 16px;
background: #ffffff;
border: 1px solid var(--border);
color: var(--muted);
font-weight: 800;
text-align: center;
}

.wc-webapp-launch {
--wcwl-bg: #faf9ff;
--wcwl-card: #ffffff;
--wcwl-text: #171321;
--wcwl-muted: #625b72;
--wcwl-purple: #6d3df2;
--wcwl-purple-2: #7c3aed;
--wcwl-purple-dark: #32146f;
--wcwl-blue: #315eea;
--wcwl-border: rgba(90, 65, 170, 0.18);
--wcwl-shadow: 0 22px 70px rgba(33, 19, 86, 0.13);
position: relative;
overflow: hidden;
margin: 54px auto 0;
color: var(--wcwl-text);
font-family: inherit;
}

.wc-webapp-launch * {
box-sizing: border-box;
}

.wcwl-container {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.02fr 0.98fr;
gap: 28px;
align-items: stretch;
}

.wcwl-copy,
.wcwl-preview {
position: relative;
overflow: hidden;
border-radius: 34px;
background:
radial-gradient(circle at 15% 10%, rgba(109, 61, 242, 0.14), transparent 32%),
linear-gradient(135deg, #ffffff, #f5f2ff);
border: 1px solid var(--wcwl-border);
box-shadow: var(--wcwl-shadow);
}

.wcwl-copy {
padding: 42px 34px;
}

.wcwl-label {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(109, 61, 242, 0.12);
color: var(--wcwl-purple-dark);
font-size: 0.92rem;
font-weight: 800;
}

.wcwl-copy h2 {
margin: 0;
max-width: 760px;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1;
letter-spacing: -0.055em;
color: var(--wcwl-text);
}

.wcwl-copy p {
max-width: 760px;
margin: 18px 0 0;
color: var(--wcwl-muted);
font-size: 1.05rem;
line-height: 1.72;
}

.wcwl-trust-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}

.wcwl-trust-row span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 8px 12px;
border-radius: 999px;
background: #ffffff;
border: 1px solid var(--wcwl-border);
color: var(--wcwl-purple-dark);
font-size: 0.9rem;
font-weight: 800;
}

.wcwl-trust-row span::before {
content: "✓";
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 7px;
border-radius: 50%;
background: rgba(109, 61, 242, 0.12);
color: var(--wcwl-purple);
font-size: 0.72rem;
font-weight: 950;
}

.wcwl-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}

.wcwl-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 20px;
border-radius: 999px;
border: 0;
font: inherit;
font-weight: 850;
line-height: 1;
cursor: pointer;
text-decoration: none !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wcwl-button:hover {
transform: translateY(-2px);
}

.wcwl-button:focus-visible {
outline: 3px solid rgba(109, 61, 242, 0.38);
outline-offset: 4px;
}

.wcwl-button-primary {
color: #ffffff !important;
background: linear-gradient(135deg, var(--wcwl-purple), var(--wcwl-blue));
box-shadow: 0 16px 35px rgba(109, 61, 242, 0.28);
}

.wcwl-button-secondary {
color: var(--wcwl-purple-dark) !important;
background: #ffffff;
border: 1px solid var(--wcwl-border);
}

.wcwl-button-ghost {
color: var(--wcwl-purple-dark);
background: rgba(109, 61, 242, 0.1);
border: 1px solid rgba(109, 61, 242, 0.18);
}

.wcwl-note {
margin-top: 22px !important;
font-size: 0.92rem !important;
color: var(--wcwl-muted) !important;
}

.wcwl-preview {
min-height: 390px;
padding: 22px;
background:
radial-gradient(circle at 82% 16%, rgba(49, 94, 234, 0.16), transparent 34%),
linear-gradient(135deg, #ffffff, #f1edff);
}

.wcwl-preview-window {
height: 100%;
min-height: 346px;
display: grid;
grid-template-columns: 130px 1fr;
overflow: hidden;
border-radius: 26px;
background: #ffffff;
border: 1px solid var(--wcwl-border);
box-shadow: 0 20px 48px rgba(33, 19, 86, 0.12);
}

.wcwl-preview-sidebar {
padding: 22px 14px;
background: linear-gradient(180deg, #21125c, #32146f);
}

.wcwl-preview-logo {
margin-bottom: 28px;
color: #ffffff;
font-size: 1rem;
font-weight: 950;
letter-spacing: -0.04em;
}

.wcwl-preview-nav {
height: 18px;
margin-top: 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
}

.wcwl-preview-nav.active {
background: linear-gradient(135deg, #7c3aed, #315eea);
}

.wcwl-preview-nav.short {
width: 72%;
}

.wcwl-preview-main {
position: relative;
padding: 24px;
background: linear-gradient(135deg, #ffffff, #faf9ff);
}

.wcwl-preview-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
color: var(--wcwl-text);
}

.wcwl-preview-top span {
font-weight: 950;
letter-spacing: -0.04em;
}

.wcwl-preview-top strong {
padding: 6px 10px;
border-radius: 999px;
background: rgba(15, 139, 95, 0.1);
color: #0f8b5f;
font-size: 0.76rem;
}

.wcwl-preview-card {
width: min(265px, 100%);
margin-top: 26px;
padding: 20px;
border-radius: 22px;
background: #ffffff;
border: 1px solid var(--wcwl-border);
box-shadow: 0 16px 34px rgba(33, 19, 86, 0.1);
}

.wcwl-preview-card small,
.wcwl-preview-card span {
display: block;
color: var(--wcwl-muted);
}

.wcwl-preview-card strong {
display: block;
margin-top: 6px;
color: #0f8b5f;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
letter-spacing: -0.06em;
}

.wcwl-preview-card span {
margin-top: 8px;
font-size: 0.9rem;
}

.wcwl-preview-chart {
position: absolute;
left: 22px;
right: 22px;
bottom: 20px;
width: calc(100% - 44px);
height: 150px;
}

.wcwl-copy-toast {
position: fixed;
z-index: 99999;
right: 22px;
bottom: 22px;
padding: 12px 16px;
border-radius: 999px;
color: #ffffff;
background: linear-gradient(135deg, var(--wcwl-purple), var(--wcwl-blue));
box-shadow: 0 18px 40px rgba(33, 19, 86, 0.22);
font-weight: 850;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}

.wcwl-copy-toast.is-visible {
opacity: 1;
transform: translateY(0);
}

.wc-section {
margin-top: 64px;
}

.wc-section-title {
max-width: 850px;
margin-bottom: 24px;
}

.wc-section-title h2 {
margin: 0;
font-size: clamp(1.9rem, 3.5vw, 3rem);
letter-spacing: -0.05em;
}

.wc-section-title p {
margin: 10px 0 0;
color: var(--muted);
line-height: 1.7;
}

.wc-grid {
display: grid;
gap: 22px;
}

.wc-grid-two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wc-grid-three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wc-card {
border-radius: var(--radius);
padding: 28px;
background: var(--card);
border: 1px solid var(--border);
box-shadow: 0 14px 40px rgba(33, 19, 86, 0.08);
}

.wc-card h3 {
margin: 0;
font-size: 1.45rem;
letter-spacing: -0.03em;
}

.wc-card p {
margin: 14px 0 0;
color: var(--muted);
line-height: 1.65;
}

.wc-card,
.wc-trust-item,
.wc-example,
.wc-local,
.wc-disclaimer {
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
}

.wc-card:hover,
.wc-trust-item:hover {
transform: translateY(-5px);
box-shadow: 0 22px 56px rgba(33, 19, 86, 0.13);
border-color: rgba(109, 61, 242, 0.34);
}

.wc-icon {
width: 48px;
height: 48px;
margin-bottom: 18px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(109, 61, 242, 0.14), rgba(49, 94, 234, 0.12));
color: var(--purple);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.2rem;
transition:
transform 0.28s ease,
background 0.28s ease,
color 0.28s ease;
}

.wc-card:hover .wc-icon {
transform: scale(1.08) rotate(-2deg);
background: linear-gradient(135deg, rgba(109, 61, 242, 0.2), rgba(49, 94, 234, 0.18));
}

.wc-list {
list-style: none;
padding: 0;
margin: 18px 0 0;
display: grid;
gap: 10px;
}

.wc-list li {
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.45;
}

.wc-list li::before {
content: "✓";
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 50%;
background: rgba(109, 61, 242, 0.12);
color: var(--purple);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 900;
}

.wc-highlight {
background:
radial-gradient(circle at 82% 18%, rgba(109, 61, 242, 0.16), transparent 34%),
linear-gradient(135deg, #ffffff, #f5f1ff);
}

.wc-split {
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: 24px;
align-items: stretch;
}

.wc-example {
position: relative;
overflow: hidden;
border-radius: 30px;
padding: 30px;
background: linear-gradient(135deg, #21125c, #6d3df2);
color: #ffffff;
}

.wc-example::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
right: -120px;
top: -120px;
border-radius: 50%;
background: rgba(255,255,255,0.14);
}

.wc-example h3,
.wc-example p,
.wc-example-number,
.wc-example-caption {
position: relative;
z-index: 2;
}

.wc-example h3 {
margin: 0;
font-size: 1.55rem;
color: #ffffff !important;
}

.wc-example p {
color: rgba(255,255,255,0.82) !important;
line-height: 1.65;
}

.wc-example-number {
margin-top: 26px;
font-size: clamp(2.2rem, 5vw, 4.1rem);
line-height: 1;
letter-spacing: -0.06em;
font-weight: 950;
color: #ffffff !important;
}

.wc-example-caption {
margin-top: 10px;
color: rgba(255,255,255,0.82) !important;
}

.wc-local {
border-radius: 34px;
padding: 36px;
background: linear-gradient(135deg, #101828, #21125c);
color: #ffffff !important;
}

.wc-local h2 {
margin: 0;
font-size: clamp(1.9rem, 3.5vw, 3rem);
letter-spacing: -0.05em;
color: #ffffff !important;
}

.wc-local p {
max-width: 820px;
color: rgba(255,255,255,0.82) !important;
line-height: 1.7;
}

.wc-local .wc-list li {
color: #ffffff !important;
}

.wc-local .wc-list li::before {
background: rgba(255,255,255,0.16) !important;
color: #ffffff !important;
}

.wc-disclaimer {
border-radius: 28px;
padding: 30px;
background: #fffaf0;
border: 1px solid rgba(183, 100, 18, 0.22);
color: #5b3908;
line-height: 1.75;
}

.wc-disclaimer strong {
color: #3e2604;
}

.wc-reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.65s ease,
transform 0.65s ease;
}

.wc-reveal.wc-visible {
opacity: 1;
transform: translateY(0);
}

.wc-grid .wc-card:nth-child(2).wc-reveal {
transition-delay: 0.06s;
}

.wc-grid .wc-card:nth-child(3).wc-reveal {
transition-delay: 0.12s;
}

.wc-store-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
padding: 9px 13px;
border-radius: 999px;
background: rgba(15, 139, 95, 0.1);
color: #0b6b49;
font-weight: 800;
font-size: 0.9rem;
}

.wc-store-badge::before {
content: "✓";
width: 20px;
height: 20px;
border-radius: 999px;
background: rgba(15, 139, 95, 0.14);
display: inline-flex;
align-items: center;
justify-content: center;
}

#wcScrollProgress {
position: fixed;
top: 0;
left: 0;
height: 4px;
width: 0%;
z-index: 99999;
background: linear-gradient(90deg, #6d3df2, #315eea);
box-shadow: 0 2px 12px rgba(109, 61, 242, 0.35);
pointer-events: none;
}

#wcBackToTop {
position: fixed;
right: 22px;
bottom: 22px;
width: 48px;
height: 48px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #6d3df2, #315eea);
color: #ffffff;
font-size: 1.25rem;
font-weight: 900;
line-height: 1;
cursor: pointer;
box-shadow: 0 14px 36px rgba(33, 19, 86, 0.24);
z-index: 99998;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition:
opacity 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}

#wcBackToTop.wc-show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

#wcBackToTop:hover {
box-shadow: 0 18px 44px rgba(33, 19, 86, 0.32);
}

@media (max-width: 930px) {
.wc-hero-grid,
.wc-trust-grid,
.wc-grid-two,
.wc-grid-three,
.wc-split,
.wcwl-container {
grid-template-columns: 1fr;
}

.wc-hero {
padding: 46px 22px;
}

.wcwl-copy {
padding: 36px 24px;
}
}

@media (max-width: 560px) {
.wc-container {
padding-left: 12px;
padding-right: 12px;
}

.wc-card,
.wc-local,
.wc-disclaimer,
.wc-example {
padding: 22px;
border-radius: 22px;
}

.wc-buttons,
.wcwl-actions {
flex-direction: column;
}

.wc-button,
.wcwl-button {
width: 100%;
}

.wc-visual {
min-height: 310px;
}

.wc-webapp-launch {
margin-top: 38px;
}

.wcwl-copy,
.wcwl-preview {
border-radius: 24px;
}

.wcwl-copy {
padding: 28px 20px;
}

.wcwl-preview-window {
grid-template-columns: 1fr;
}

.wcwl-preview-sidebar {
display: none;
}

.wcwl-preview {
min-height: 330px;
}

#wcBackToTop {
right: 14px;
bottom: 14px;
width: 44px;
height: 44px;
}
}

@media (prefers-reduced-motion: reduce) {
.wealthcurve-page *,
.wealthcurve-page *::before,
.wealthcurve-page *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}

.wc-reveal {
opacity: 1;
transform: none;
}

#wcScrollProgress,
#wcBackToTop {
display: none;
}
}