/* Veloq home — focused 3D enhancement layer.
   It keeps the existing homepage and calculator logic intact. */

:root {
    --vq3d-ink: #261a1f;
    --vq3d-muted: #80666f;
    --vq3d-paper: #fffafb;
    --vq3d-panel: rgba(255, 255, 255, .82);
    --vq3d-rose: #a65372;
    --vq3d-rose-soft: #f5afc5;
    --vq3d-line: rgba(147, 77, 101, .16);
    --vq3d-shadow: rgba(126, 60, 82, .18);
}

html.dark {
    --vq3d-ink: #fff5f8;
    --vq3d-muted: #ccb2bc;
    --vq3d-paper: #150e12;
    --vq3d-panel: rgba(43, 27, 35, .82);
    --vq3d-rose: #ef8db1;
    --vq3d-rose-soft: #b94d76;
    --vq3d-line: rgba(255, 210, 225, .15);
    --vq3d-shadow: rgba(0, 0, 0, .43);
}

/* The original calculator becomes a tangible floating instrument. */
.hero-v2 .vq-tax-stage {
    perspective: 1500px;
    perspective-origin: 48% 45%;
}

.hero-v2 #taxSplitCalculator {
    --vq-tax-rx: -1.5deg;
    --vq-tax-ry: 2.5deg;
    --vq-tax-shine: -75%;
    isolation: isolate;
    cursor: grab;
    touch-action: pan-y;
    transform-style: preserve-3d;
    transform: rotateX(var(--vq-tax-rx)) rotateY(var(--vq-tax-ry)) translateZ(0);
    transform-origin: 50% 50%;
    will-change: transform;
    transition: transform 260ms cubic-bezier(.2, .75, .25, 1), box-shadow 350ms ease;
    box-shadow:
        0 54px 92px rgba(126, 60, 82, .22),
        0 16px 30px rgba(126, 60, 82, .13),
        inset 0 1px 0 rgba(255, 255, 255, .98) !important;
}

.hero-v2 #taxSplitCalculator::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: -1px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .72);
    background: linear-gradient(112deg, transparent 25%, rgba(255,255,255,.7) 46%, rgba(255,255,255,.12) 55%, transparent 72%);
    background-size: 235% 100%;
    background-position: var(--vq-tax-shine) center;
    mix-blend-mode: soft-light;
    transition: background-position 160ms ease-out;
}

.hero-v2 #taxSplitCalculator::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 2.4%;
    right: 2.4%;
    bottom: -18px;
    height: 28px;
    background: linear-gradient(180deg, rgba(138, 68, 93, .24), rgba(92, 40, 59, .06));
    filter: blur(12px);
    transform: translateZ(-38px) rotateX(72deg);
    transform-origin: top;
}

.hero-v2 #taxSplitCalculator > * {
    position: relative;
    z-index: 2;
    transform: translateZ(22px);
}

.hero-v2 #taxSplitCalculator .tax-result {
    transform: translateZ(34px);
    transition: transform 260ms ease, background-color 260ms ease;
}

.hero-v2 #taxSplitCalculator .tax-result:hover {
    transform: translateZ(43px);
}

.hero-v2 #taxSplitCalculator.vq-tax-dragging {
    cursor: grabbing;
    user-select: none;
    transition: box-shadow 200ms ease;
    box-shadow:
        0 68px 110px rgba(126, 60, 82, .29),
        0 18px 34px rgba(126, 60, 82, .16),
        inset 0 1px 0 rgba(255, 255, 255, .98) !important;
}

html.dark .hero-v2 #taxSplitCalculator {
    box-shadow:
        0 58px 100px rgba(0, 0, 0, .52),
        0 16px 30px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

html.dark .hero-v2 #taxSplitCalculator::before {
    border-color: rgba(255, 225, 235, .13);
    background-image: linear-gradient(112deg, transparent 28%, rgba(255,198,218,.26) 47%, rgba(255,255,255,.04) 56%, transparent 72%);
}

html.dark .hero-v2 #taxSplitCalculator::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent);
}

/* New 3D split visual, distilled from the 3D concept page. */
.vq-flow3d-section {
    position: relative;
    overflow: hidden;
    padding: clamp(7rem, 11vw, 11rem) 3rem clamp(7rem, 10vw, 9rem);
    background:
        radial-gradient(circle at 50% 54%, rgba(255, 198, 218, .48), transparent 29rem),
        linear-gradient(145deg, #fff, #fff7f9 58%, #ffedf3);
    border-top: 1px solid var(--vq3d-line);
    border-bottom: 1px solid var(--vq3d-line);
    color: var(--vq3d-ink);
    transition: background .35s ease, color .35s ease;
}

html.dark .vq-flow3d-section {
    background:
        radial-gradient(circle at 50% 54%, rgba(178, 56, 102, .24), transparent 29rem),
        linear-gradient(145deg, #100b0e, #1d1117 56%, #28131c);
}

.vq-flow3d-heading,
.vq-flow3d-stage,
.vq-flow3d-note {
    width: min(100%, 1280px);
    margin-left: auto;
    margin-right: auto;
}

.vq-flow3d-heading {
    margin-bottom: 4rem;
}

.vq-flow3d-kicker {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.5rem;
    color: var(--vq3d-rose);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.vq-flow3d-kicker > span {
    width: 2.4rem;
    height: 1px;
    margin-right: .25rem;
    background: currentColor;
}

.vq-flow3d-heading h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(3.3rem, 7vw, 7rem);
    font-weight: 800;
    letter-spacing: -.07em;
    line-height: .93;
}

.vq-flow3d-heading > p:last-child {
    margin: 1.6rem 0 0;
    color: var(--vq3d-muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.vq-flow3d-stage {
    --vq-disc-rx: 59deg;
    --vq-disc-rz: -14deg;
    --vq-disc-tx: -50%;
    --vq-disc-ty: -50%;
    --vq-split: 45%;
    position: relative;
    min-height: 680px;
    overflow: hidden;
    border: 1px solid var(--vq3d-line);
    background: rgba(255, 255, 255, .34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 38px 80px rgba(111, 48, 73, .1);
    perspective: 1350px;
    transform-style: preserve-3d;
    touch-action: pan-y;
}

html.dark .vq-flow3d-stage {
    background: rgba(23, 15, 20, .42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 38px 80px rgba(0,0,0,.25);
}

.vq-flow3d-grid {
    position: absolute;
    inset: 0;
    opacity: .64;
    background-image:
        linear-gradient(var(--vq3d-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--vq3d-line) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 0%, transparent 82%);
    mask-image: radial-gradient(circle at 50% 52%, #000 0%, transparent 82%);
}

.vq-flow3d-axis {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vq3d-rose-soft) 15%, var(--vq3d-rose), var(--vq3d-rose-soft) 85%, transparent);
    box-shadow: 0 0 22px rgba(166, 83, 114, .38);
}

.vq-flow3d-node {
    position: absolute;
    z-index: 4;
    width: 220px;
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(255,255,255,.72);
    background: var(--vq3d-panel);
    box-shadow: 0 24px 50px var(--vq3d-shadow), inset 0 1px 0 rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform-style: preserve-3d;
    transition: transform 240ms ease;
}

html.dark .vq-flow3d-node {
    border-color: rgba(255, 216, 229, .13);
    box-shadow: 0 25px 54px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}

.vq-flow3d-node:hover {
    transform: translateY(-6px) translateZ(45px) !important;
}

.vq-flow3d-node p {
    margin: .8rem 0 .3rem;
    color: var(--vq3d-muted);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.vq-flow3d-node strong {
    display: block;
    font-size: 1.45rem;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.vq-flow3d-index {
    color: var(--vq3d-rose);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.vq-flow3d-income { top: 12%; left: 7%; transform: rotateY(7deg) translateZ(18px); }
.vq-flow3d-reserve { top: 10%; right: 7%; transform: rotateY(-7deg) translateZ(22px); }
.vq-flow3d-available { right: 10%; bottom: 9%; transform: rotateY(-5deg) translateZ(16px); }

.vq-flow3d-disc-wrap {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 53%;
    width: min(35vw, 390px);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform: translate(var(--vq-disc-tx), var(--vq-disc-ty)) rotateX(var(--vq-disc-rx)) rotateZ(var(--vq-disc-rz));
    will-change: transform;
    transition: transform 220ms cubic-bezier(.2,.75,.25,1);
}

.vq-flow3d-stage.vq-flow-dragging .vq-flow3d-disc-wrap {
    transition: none;
}

.vq-flow3d-disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(from 32deg,
            var(--vq3d-rose) 0 var(--vq-split),
            var(--vq3d-rose-soft) var(--vq-split) 100%);
    box-shadow:
        0 56px 88px var(--vq3d-shadow),
        inset 0 0 0 1px rgba(255,255,255,.74),
        inset 0 -22px 40px rgba(103, 40, 64, .11);
}

html.dark .vq-flow3d-disc {
    background:
        conic-gradient(from 32deg,
            #d96e96 0 var(--vq-split),
            #76324d var(--vq-split) 100%);
    box-shadow: 0 60px 92px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -22px 40px rgba(0,0,0,.22);
}

.vq-flow3d-disc::after {
    content: "";
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background: var(--vq3d-paper);
    box-shadow: inset 0 12px 25px var(--vq3d-shadow), 0 0 0 1px var(--vq3d-line);
}

.vq-flow3d-disc-rings {
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 50%;
    box-shadow: inset 0 0 0 18px rgba(255,255,255,.06), inset 0 0 0 44px rgba(255,255,255,.05);
}

.vq-flow3d-disc-core {
    position: absolute;
    z-index: 2;
    inset: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--vq3d-ink);
    transform: rotateZ(calc(var(--vq-disc-rz) * -1));
}

.vq-flow3d-disc-core span {
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: -.09em;
}

.vq-flow3d-disc-core small {
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.vq-flow3d-interaction-hint {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    margin: 0;
    color: var(--vq3d-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.vq-flow3d-note {
    margin-top: 1rem;
    color: var(--vq3d-muted);
    font-size: .64rem;
    letter-spacing: .04em;
}

@media (max-width: 900px) {
    .vq-flow3d-section { padding-left: 1.5rem; padding-right: 1.5rem; }
    .vq-flow3d-stage { min-height: 720px; }
    .vq-flow3d-disc-wrap { width: min(56vw, 330px); top: 53%; }
    .vq-flow3d-node { width: 190px; }
}

@media (max-width: 620px) {
    .vq-flow3d-section { padding-left: 1.1rem; padding-right: 1.1rem; }
    .vq-flow3d-stage { min-height: 720px; }
    .vq-flow3d-node { width: 154px; padding: .95rem; }
    .vq-flow3d-node strong { font-size: 1.03rem; }
    .vq-flow3d-income { left: 3%; top: 5%; }
    .vq-flow3d-reserve { right: 3%; top: 9%; }
    .vq-flow3d-available { right: 5%; bottom: 6%; }
    .vq-flow3d-disc-wrap { width: min(68vw, 280px); top: 52%; }
    .vq-flow3d-axis { display: none; }

    .hero-v2 #taxSplitCalculator {
        transform: none;
    }

    .hero-v2 #taxSplitCalculator::after {
        display: none;
    }

    .hero-v2 #taxSplitCalculator > *,
    .hero-v2 #taxSplitCalculator .tax-result,
    .hero-v2 #taxSplitCalculator .tax-result:hover {
        transform: none;
    }

    .hero-v2 #taxSplitCalculator .tax-income-row {
        flex-direction: column;
        gap: 1.25rem;
    }

    .hero-v2 #taxSplitCalculator .tax-country-control,
    .hero-v2 #taxSplitCalculator .tax-country-control select {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vq-flow3d-stage { min-height: 760px; }
    .vq-flow3d-income { left: 4%; top: 4%; }
    .vq-flow3d-reserve { right: 4%; top: 23%; }
    .vq-flow3d-available { right: 4%; bottom: 4%; }
    .vq-flow3d-disc-wrap { width: min(72vw, 245px); top: 58%; }
}

@media (hover: none), (pointer: coarse) {
    .hero-v2 #taxSplitCalculator { --vq-tax-rx: -1deg; --vq-tax-ry: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-v2 #taxSplitCalculator,
    .vq-flow3d-disc-wrap,
    .vq-flow3d-node { transition: none !important; }
}