/* Homepage launch art: compact app cards revolve around a sculpted, translucent version number.
   All animated elements sit inside V4Motion, sharing pause, visibility, and reduced-motion handling. */
.v4-home-refresh { position: relative; isolation: isolate; padding: 7.2rem 0 2rem; background:
    radial-gradient(ellipse at 65% 25%, #bcb5fb2e, transparent 56%),
    radial-gradient(ellipse at 0% 88%, #83d6b524, transparent 34%),
    radial-gradient(ellipse at 94% 52%, #b9caff35, transparent 37%),
    linear-gradient(180deg, #eff0ff 0%, #f3f7ff 60%, #fafbfd 100%); }
[data-bs-theme="dark"] .v4-home-refresh { background:
    radial-gradient(ellipse at 65% 25%, #7961d82b, transparent 56%),
    radial-gradient(ellipse at 0% 88%, #28786125, transparent 34%),
    radial-gradient(ellipse at 94% 52%, #4e69b22b, transparent 37%),
    linear-gradient(180deg, #101428 0%, #101828 60%, #0b0f19 100%); }
.v4-home-refresh .v4-home-grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 2rem; }
.v4-home-refresh .v4-home-copy { max-width: 31rem; }
.v4-home-refresh h1 { font-size: clamp(2.25rem, 3.65vw, 3.45rem); font-weight: 750; line-height: 1.07; letter-spacing: -.055em; margin-bottom: 1.25rem; }
.v4-title-gradient { position: relative; display: inline-block; color: transparent; background: linear-gradient(105deg, var(--cp-accent) 0%, #8a6be8 58%, #42ae92 100%); background-clip: text; -webkit-background-clip: text; }
.v4-title-gradient::after { content: ""; position: absolute; bottom: -.035em; height: .085em; left: .02em; right: .02em; border-radius: 99px; background: linear-gradient(90deg, var(--cp-accent), #42ae92); opacity: .25; }
.v4-home-refresh .v4-home-copy > .fs-lg { font-size: 1.05rem !important; line-height: 1.7; max-width: 28rem; }
.v4-home-release-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35em; color: var(--cp-accent) !important; font-size: .95rem; font-weight: 700; margin-bottom: 1rem; }
.v4-home-release-count strong { font-size: 2rem; font-weight: 800; letter-spacing: -.06em; line-height: 1.1; }
.v4-home-promise { display: flex; align-items: flex-start; gap: .8rem; margin: 1.25rem 0 1.5rem; }
.v4-home-promise > i { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: .7rem; color: var(--cp-accent); background: var(--cp-accent-soft); font-size: 1.25rem; }
.v4-home-promise p, .v4-home-feedback p { margin: 0; font-size: .8rem; line-height: 1.6; text-align: left; }
.v4-home-promise strong, .v4-home-feedback strong { display: block; color: var(--cp-text); font-weight: 750; }
.v4-home-promise p > span, .v4-home-feedback p > span { display: block; color: var(--cp-text-muted); margin-top: .2rem; }
.v4-home-feedback { display: flex; gap: .8rem; align-items: flex-start; border-top: 1px solid var(--cp-border); padding-top: 1.15rem; margin-top: 1.5rem; }
.v4-feedback-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid color-mix(in srgb, var(--cp-accent) 20%, var(--cp-border)); border-radius: 50%; background: var(--cp-surface); color: var(--cp-accent); font-size: 1.15rem; box-shadow: 0 .3rem 1rem color-mix(in srgb, var(--cp-accent) 8%, transparent); }
.v4-home-feedback p { font-size: .75rem; }
.v4-home-feedback a { display: inline-block; color: var(--cp-accent); font-weight: 700; text-underline-offset: .2em; }
.v4-home-feedback a:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 3px; border-radius: .2rem; }
.v4-home-refresh .nf-eyebrow { font-size: .65rem; letter-spacing: .14em; margin-bottom: 1.1rem; }
.v4-home-refresh .nf-eyebrow > i { font-size: 1rem; }
.v4-home-refresh .v4-home-points { gap: .6rem 1.1rem; font-size: .74rem; margin: 1.4rem 0 1.75rem; }
.v4-home-refresh .v4-home-points i { font-size: 1rem; }
.v4-home-refresh .btn { border-radius: .8rem; font-size: .875rem; padding: .85rem 1.15rem; }
.v4-home-refresh .v4-home-note { border-top: 1px solid var(--cp-border); padding-top: 1rem; margin-top: 1.4rem; font-size: .75rem; }
.v4-home-orbit { width: 100%; min-width: 0; }
.v4-orbit-stage { --orbit-radius: 30cqw; --orbit-duration: 24s; --orbit-card-width: 27cqw; position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 1 / .87; }
.v4-orbit-aura { position: absolute; inset: 4% 7%; border-radius: 50%; background: radial-gradient(ellipse at 45% 42%, color-mix(in srgb, var(--cp-accent) 22%, transparent), transparent 65%), radial-gradient(ellipse at 64% 68%, #65caae20, transparent 58%); filter: blur(2cqw); animation: v4-orbit-breathe 12s ease-in-out infinite; }
.v4-orbit-ground { position: absolute; left: 27%; right: 24%; bottom: 14%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse, #65589926, #6558990a 48%, transparent 72%); transform: rotate(-5deg); }
/* Every intermediary preserves the same 3D space. Grouping effects such as opacity,
   filters or paint containment on these wrappers would flatten the numeral's occlusion. */
.v4-orbit-camera { position: absolute; inset: 0; perspective: 140cqw; perspective-origin: 50% 48%; transform-style: preserve-3d; }
.v4-orbit-world { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-20deg) rotateZ(-5deg); }
.v4-monument { position: absolute; left: 50%; top: 43%; width: 48cqw; height: 68cqw; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateY(-12deg); }
.v4-four-face, .v4-four-edge { position: absolute; inset: 0; display: block; text-align: center; font-size: 68cqw; font-weight: 800; line-height: 1; letter-spacing: -.085em; padding-right: .075em; }
.v4-four-edge { color: #8c7cbc42; -webkit-text-stroke: 1px #a797d838; transform: translateZ(calc(var(--layer) * -.35cqw)); }
.v4-four-face { color: transparent; background: linear-gradient(145deg, #d1e2ffcc 8%, #b4a6ecc9 32%, #9781d8b8 56%, #9bdbc6d9 84%); background-size: 120% 120%; background-position: 35% 30%; background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 1px #f5f0ff80; animation: v4-four-iridescence 12s ease-in-out infinite; }
[data-bs-theme="dark"] .v4-four-face { background-image: linear-gradient(145deg, #c7d9ffab 8%, #ac95eeb5 32%, #8d6fca9e 56%, #85cbb6c4 84%); -webkit-text-stroke-color: #e5d9ff45; }
[data-bs-theme="dark"] .v4-four-edge { color: #67558958; -webkit-text-stroke-color: #bda4ff24; }
[data-bs-theme="dark"] .v4-orbit-ground { background: radial-gradient(ellipse, #00000050, #00000012 48%, transparent 72%); }
.v4-four-caption { position: absolute; bottom: 1%; left: 0; right: 0; text-align: center; font-size: 1.55cqw; font-weight: 800; letter-spacing: .24em; color: var(--cp-accent); white-space: nowrap; }
/* A complete Y-axis revolution changes distance, scale and paint order naturally.
   Counter-rotation keeps the app cards facing the camera as they travel front to back. */
.v4-card-orbit { position: absolute; inset: 0; transform-style: preserve-3d; }
.v4-orbit-satellite { --orbit-angle: -50deg; --card-tone: var(--cp-accent); position: absolute; left: 50%; top: 55%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateY(var(--orbit-angle)); animation: v4-card-revolve var(--orbit-duration) linear infinite; }
.v4-orbit-satellite.is-review { --orbit-angle: -140deg; --card-tone: var(--v4-blue); }
.v4-orbit-satellite.is-investments { --orbit-angle: -230deg; --card-tone: var(--v4-green); }
.v4-orbit-satellite.is-people { --orbit-angle: -320deg; --card-tone: var(--v4-gold); }
.v4-orbit-position { width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(var(--orbit-radius)); }
.v4-orbit-card { width: var(--orbit-card-width); min-height: 20cqw; padding: 1.8cqw; border: 1px solid color-mix(in srgb, var(--card-tone) 23%, var(--cp-border)); border-radius: 2cqw; background: linear-gradient(155deg, color-mix(in srgb, var(--card-tone) 8%, var(--cp-surface)), var(--cp-surface) 78%); box-shadow: 0 .4cqw .2cqw -.2cqw color-mix(in srgb, var(--card-tone) 28%, var(--cp-surface)), 0 2cqw 3cqw -1.3cqw #26234633, inset 0 1px 0 #ffffff50; transform-origin: 0 0; transform: rotateY(calc(-1 * var(--orbit-angle))) translate(-50%, -50%); animation: v4-card-stay-upright var(--orbit-duration) linear infinite; }
.v4-orbit-card-heading { display: flex; align-items: center; gap: .8cqw; margin-bottom: 1.2cqw; color: var(--card-tone); }
.v4-orbit-card-heading > i { flex: none; display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; border-radius: 1.1cqw; background: color-mix(in srgb, var(--card-tone) 11%, var(--cp-surface)); font-size: 2.3cqw; }
.v4-orbit-card-heading > span { font-size: clamp(.44rem, 1.12cqw, .55rem); font-weight: 800; letter-spacing: .065em; line-height: 1.4; }
.v4-orbit-card > b { display: block; color: var(--cp-text); font-size: clamp(.65rem, 1.95cqw, .92rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.3; }
.v4-orbit-category { display: flex; align-items: center; gap: .75cqw; font-size: clamp(.56rem, 1.65cqw, .77rem); margin: 1.6cqw 0; padding: .9cqw; border-radius: 1cqw; background: var(--cp-accent-soft); }
.v4-orbit-category > span { color: var(--cp-text-muted); text-decoration: line-through; }.v4-orbit-category > i, .v4-orbit-category > strong { color: var(--cp-accent); }
.v4-orbit-status { display: grid; font-size: clamp(.56rem, 1.5cqw, .7rem); line-height: 1.5; }
.v4-orbit-status > span { grid-area: 1/1; display: flex; align-items: center; gap: .45cqw; }
.v4-orbit-suggested { color: var(--cp-accent); animation: v4-orbit-suggestion 10s infinite; }
.v4-orbit-applied { color: var(--v4-green); opacity: 0; animation: v4-orbit-corrected 10s infinite; }
.v4-orbit-check { display: flex; gap: .7cqw; align-items: center; margin-top: 1.2cqw; font-size: clamp(.57rem, 1.7cqw, .8rem); color: var(--cp-text); }
.v4-orbit-check > i { display: grid; place-items: center; width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: color-mix(in srgb, var(--card-tone) 12%, var(--cp-surface)); color: var(--card-tone); animation: v4-orbit-check-in 10s infinite; }
.v4-orbit-check.is-second > i { animation-delay: 1s; }
.v4-orbit-chart { display: block; width: 100%; height: auto; margin: 1.2cqw 0 .7cqw; overflow: visible; }
.v4-orbit-chart-grid { stroke: var(--cp-border); stroke-width: 1; }.v4-orbit-chart-line { stroke: var(--card-tone); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: v4-orbit-chart-draw 10s infinite; }
.v4-orbit-card-detail { display: block; color: var(--cp-text-muted); font-size: clamp(.5rem, 1.35cqw, .66rem); line-height: 1.4; }
.v4-orbit-message { display: flex; justify-content: space-between; align-items: center; gap: .5cqw; background: var(--cp-accent-soft); padding: .9cqw 1.1cqw; border-radius: 1.2cqw 1.2cqw 1.2cqw .2cqw; margin: 1.3cqw 1.5cqw .8cqw 0; font-size: clamp(.55rem, 1.6cqw, .76rem); color: var(--cp-text); }
.v4-orbit-message > i { color: var(--cp-accent); }.v4-orbit-reply { position: relative; display: flex; align-items: center; gap: .7cqw; margin-left: 2cqw; padding: .8cqw 1.1cqw; border-radius: 1.2cqw 1.2cqw .2cqw 1.2cqw; color: var(--card-tone); background: color-mix(in srgb, var(--card-tone) 9%, var(--cp-surface)); font-size: clamp(.55rem, 1.6cqw, .76rem); }
.v4-orbit-reply > i, .v4-orbit-reply > span:not(.v4-orbit-typing) { animation: v4-orbit-reply-in 10s infinite; }
.v4-orbit-typing { position: absolute; left: 1.4cqw; display: flex; gap: .5cqw; opacity: 0; animation: v4-orbit-typing-in 10s infinite; }.v4-orbit-typing i { width: .6cqw; height: .6cqw; border-radius: 50%; background: currentColor; animation: v4-orbit-typing-dot 1s infinite alternate; }.v4-orbit-typing i:nth-child(2) { animation-delay: .2s; }.v4-orbit-typing i:nth-child(3) { animation-delay: .4s; }
.v4-home-orbit .v4-motion-controls { position: relative; z-index: 9; padding: 1rem 1rem 0; font-size: .62rem; }
.v4-home-orbit .v4-motion-controls button { min-height: 44px; font-size: .7rem; background: color-mix(in srgb, var(--cp-surface) 65%, transparent); }
@keyframes v4-four-iridescence { 0%,100% { background-position: 35% 30%; } 50% { background-position: 70% 65%; } }
@keyframes v4-orbit-breathe { 0%,100% { opacity: .7; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes v4-card-revolve { from { transform: rotateY(var(--orbit-angle)); } to { transform: rotateY(calc(var(--orbit-angle) + 360deg)); } }
@keyframes v4-card-stay-upright { from { transform: rotateY(calc(-1 * var(--orbit-angle))) translate(-50%, -50%); } to { transform: rotateY(calc(-1 * var(--orbit-angle) - 360deg)) translate(-50%, -50%); } }
@keyframes v4-orbit-suggestion { 0%,35%,95%,100% { opacity: 1; } 42%,88% { opacity: 0; } }
@keyframes v4-orbit-corrected { 0%,35%,95%,100% { opacity: 0; } 42%,88% { opacity: 1; } }
@keyframes v4-orbit-check-in { 0%,12%,100% { opacity: .35; transform: scale(.8); } 24%,88% { opacity: 1; transform: scale(1); } }
@keyframes v4-orbit-chart-draw { 0%,5% { stroke-dashoffset: 1; } 45%,90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes v4-orbit-reply-in { 0%,30%,100% { opacity: 0; } 38%,90% { opacity: 1; } }
@keyframes v4-orbit-typing-in { 0%,24%,100% { opacity: 1; } 32%,92% { opacity: 0; } }
@keyframes v4-orbit-typing-dot { from { transform: translateY(.3cqw); opacity: .4; } to { transform: translateY(-.3cqw); opacity: 1; } }
@media (max-width: 1199.98px) { .v4-home-refresh .v4-home-grid { gap: 1rem; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }.v4-home-refresh h1 { font-size: 2.9rem; }.v4-home-refresh .v4-home-copy > .fs-lg { font-size: .98rem !important; } }
@media (max-width: 991.98px) { .v4-home-refresh { padding-top: 7rem; }.v4-home-refresh .v4-home-grid { grid-template-columns: 1fr; gap: 1.5rem; }.v4-home-refresh .v4-home-copy { margin-inline: auto; max-width: 33rem; }.v4-home-refresh .v4-home-copy > .fs-lg { max-width: 32rem; }.v4-home-orbit { max-width: 38rem; margin-inline: auto; }.v4-home-refresh h1 { font-size: clamp(2.35rem,6vw,3.2rem); }.v4-home-refresh .v4-home-note { margin-bottom: 0; } }
@media (max-width: 991.98px) { .v4-home-release-count { justify-content: center; } }
/* Small screens keep the orbit readable; the adjacent copy carries the full release story. */
@media (max-width: 575.98px) {
    .v4-home-refresh { padding: 6.5rem 0 1.5rem; }
    .v4-home-refresh .v4-home-grid { gap: 1rem; }
    .v4-home-refresh .v4-home-copy > .fs-lg { font-size: .96rem !important; }
    .v4-home-refresh .btn { padding: .8rem .9rem; font-size: .8rem; }
    .v4-home-refresh .v4-home-copy > .d-flex { gap: .65rem !important; }
    .v4-home-orbit .v4-motion-controls { padding: 1rem 0 0; font-size: .58rem; }
    .v4-four-caption { font-size: 1.8cqw; }
    .v4-home-release-count { font-size: .8rem; }
    .v4-home-release-count strong { font-size: 1.8rem; }
    .v4-home-promise { margin-block: 1rem 1.25rem; }
    .v4-orbit-stage { --orbit-card-width: 28cqw; }
    .v4-orbit-card { min-height: 22cqw; padding: 2cqw; border-radius: 2.5cqw; }
    .v4-orbit-card-heading > span { display: none; }
    .v4-orbit-card-heading > i { width: 6cqw; height: 6cqw; font-size: 3.8cqw; border-radius: 1.6cqw; }
    .v4-orbit-card > b { font-size: clamp(.65rem, 2.7cqw, .85rem); }
    .v4-orbit-card > :not(.v4-orbit-card-heading, b) { display: none; }
}
