/* =====================================================================
   WePicks — campaign / sign-up landing page (ship-with-us.html)
   Loaded AFTER wepicks-modern.css and wepicks-landing.css, and reuses
   their primitives: .wp-b cuboids and .wp-cube parcels for the 3D, the
   hero, tilt cards, reveals and the truck rig exactly as the home page.

   New 3D scenes on this page, all CSS (no WebGL, no images):
     .cp-scan   parcels ride a belt through a scanning gate (RTO control)
     .cp-map    India as a tilted board with a tower per served city
     .cp-help   a support cube turning through its channels, parcels orbit
     .cp-coins  coin stacks rise for each day of the COD week
   Each scene is a .cp-screen with a .cp-stage (perspective) and one
   rig/board marked [data-fit-rig]; wepicks-campaign.js scales it to the
   screen with --k and pauses the animation while it is off-screen.
   ===================================================================== */

:root {
    --amber-1: #ffd28a;
    --amber-2: #f0a33c;
    --amber-3: #c47a14;
    --coin-1: #ffe29a;
    --coin-2: #f2bf3d;
    --coin-3: #b9831a;
}

.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-muted { color: var(--muted); }
.cp-grad {
    background: var(--grad-accent-dark);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* ---------------------------------------------------------------------
   Nav
   --------------------------------------------------------------------- */
.cp-navcall {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-head); font-weight: 600; font-size: 14px;
    color: var(--navy);
    white-space: nowrap;
}
.cp-navcall i { color: var(--mint-2); }
.cp-navcall:hover { color: var(--text-mint); }
@media (max-width: 1100px) { .cp-navcall span { display: none; } }
@media (max-width: 991px) { .cp-page .wp-nav__right > .wp-btn--primary { display: none; } }

/* ---------------------------------------------------------------------
   Hero: copy + scene on the left, the form on the right
   --------------------------------------------------------------------- */
.cp-hero { padding: 56px 0 96px; }
.cp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "copy form" "scene form";
    grid-template-rows: auto 1fr;
    gap: 6px 44px;
    align-items: start;
}
.cp-hero__copy { grid-area: copy; }
.cp-hero__scene { grid-area: scene; margin-top: 22px; }
.cp-formwrap { grid-area: form; scroll-margin-top: 90px; min-width: 0; }
.cp-hero h1 { font-size: clamp(34px, 4.6vw, 58px); }

.cp-proof {
    list-style: none; margin: 4px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.cp-proof li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px;
    border-radius: var(--r-pill);
    background: var(--glass);
    border: 1px solid var(--glass-line);
    color: #e6fbfc;
    font-family: var(--font-head); font-weight: 600; font-size: 13px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cp-proof i { color: #8fe6ea; }

/* ---- Form card ---- */
.cp-formcard {
    position: relative;
    background: #fff;
    border-radius: var(--r-lg);
    padding: 28px 28px 22px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .38), 0 0 0 1px rgba(143, 230, 234, .25);
    transform-style: preserve-3d;
    animation: cpCardIn 1s .15s var(--ease-out) both;
}
@keyframes cpCardIn {
    from { opacity: 0; transform: perspective(1000px) rotateY(-14deg) rotateX(6deg) translateY(30px); }
    to { opacity: 1; transform: none; }
}
/* Lit gradient rim, same as the home page track box. */
.cp-formcard::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(120deg, rgba(143, 230, 234, .95), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(31, 176, 180, .8));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.cp-formhead h2 { font-size: 23px; margin: 10px 0 6px; }
.cp-formhead p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.cp-formhead__tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: rgba(31, 176, 180, .12);
    color: var(--text-mint);
    font-family: var(--font-head); font-weight: 700; font-size: 12px;
}

/* ---- Live 3D preview: parcel on a belt + the shipping label ----
   --p (0..1) is set by wepicks-campaign.js from how much of the form is
   filled; the parcel rides the belt toward the dock in step with it. */
.cp-prev {
    --p: 0;
    position: relative;
    height: 156px;
    margin: 0 0 12px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(70% 90% at 20% 120%, rgba(31, 176, 180, .35), transparent 60%),
        linear-gradient(160deg, #061a50 0%, #071f66 55%, #0b3a63 100%);
    box-shadow: inset 0 0 0 1px rgba(143, 230, 234, .18), 0 14px 30px rgba(7, 31, 102, .22);
    isolation: isolate;
}
.cp-prev::before {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(rgba(143, 230, 234, .08) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, rgba(143, 230, 234, .08) 1px, transparent 1px) 0 0 / 26px 26px;
    -webkit-mask-image: linear-gradient(transparent, #000 60%);
    mask-image: linear-gradient(transparent, #000 60%);
}
.cp-prev__stage { position: absolute; inset: 0; perspective: 800px; }
.cp-prev__rig {
    position: absolute;
    left: 22%; top: 80%;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: rotateX(-24deg) rotateY(30deg) scale3d(.6, .6, .6);
}
.cp-prev__belt > .fz { background: linear-gradient(#2f4a82, #16294f); box-shadow: inset 0 1.5px 0 #8fe6ea; }
.cp-prev__belt > .bz, .cp-prev__belt > .px, .cp-prev__belt > .nx { background: #16294f; }
.cp-prev__belt > .ny {
    background: repeating-linear-gradient(90deg, #3b5590 0 12px, #22366a 12px 24px);
    box-shadow: inset 0 0 0 1.5px rgba(143, 230, 234, .45);
}
.cp-prev.is-moving .cp-prev__belt > .ny { animation: cpBelt .35s linear infinite; }
.cp-prev__dock > i { background: linear-gradient(180deg, #1fb0b4, #0f5f73); box-shadow: inset 0 0 0 1px rgba(143, 230, 234, .5); }
.cp-prev__dock > .nx { background: linear-gradient(180deg, #0b1633, #13254d); box-shadow: inset 0 0 0 3px #1fb0b4, inset 0 0 26px rgba(143, 230, 234, .35); }
.cp-prev__dock > .ny { background: #8fe6ea; }
.cp-prev__pk {
    position: absolute; left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: translate3d(calc(-100px + var(--p) * 240px), -47px, 0);
    transition: transform .9s cubic-bezier(.34, 1.3, .64, 1);
}
.cp-prev__pk .wp-cube { --s: 70px; left: -35px; top: -35px; transform: none; will-change: auto; transition: none; }
.cp-prev.is-done .cp-prev__pk { transform: translate3d(150px, -47px, 0) rotateY(-20deg); transition-duration: 1.1s; }

/* The shipping label: a paper card standing in 3D at the right. */
.cp-label {
    position: absolute;
    right: 12px; top: 12px;
    width: 54%;
    max-width: 232px;
    padding: 9px 11px 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fffdf8, #f4efe4);
    color: var(--ink);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(7, 31, 102, .08);
    transform: perspective(700px) rotateY(-16deg) rotateX(5deg);
    transform-origin: 100% 50%;
    font-size: 11.5px;
    line-height: 1.3;
    z-index: 2;
}
.cp-label__head {
    display: flex; align-items: center; gap: 5px;
    padding-bottom: 5px; margin-bottom: 4px;
    border-bottom: 1.5px dashed rgba(7, 31, 102, .2);
    font-family: var(--font-head);
}
.cp-label__head b { font-weight: 800; color: var(--blue); font-size: 12.5px; }
.cp-label__head b span { color: var(--teal); }
.cp-label__head em {
    margin-left: auto;
    font-style: normal; font-weight: 700; font-size: 9px;
    letter-spacing: .8px; text-transform: uppercase;
    color: #fff; background: var(--navy); padding: 2px 6px; border-radius: 4px;
    white-space: nowrap;
}
.cp-label__row {
    display: flex; align-items: center; gap: 6px;
    padding: 2.5px 0;
    min-width: 0;
}
.cp-label__row i { color: var(--muted-2); font-size: 11px; flex: none; transition: color .3s; }
.cp-label__row span {
    flex: 1; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    color: var(--muted-2);
    background: repeating-linear-gradient(90deg, rgba(7, 31, 102, .14) 0 4px, transparent 4px 7px) 0 100% / 100% 1px no-repeat;
    transition: color .3s;
}
.cp-label__row.is-set i { color: var(--mint-2); }
.cp-label__row.is-set span { color: var(--ink); font-weight: 700; background: none; animation: cpInk .45s var(--ease-out); }
@keyframes cpInk { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.cp-label__code {
    height: 16px; margin-top: 5px;
    background: repeating-linear-gradient(90deg, #0b1c2d 0 2px, transparent 2px 4px, #0b1c2d 4px 5px, transparent 5px 8px, #0b1c2d 8px 11px, transparent 11px 12px);
    opacity: .75;
}
.cp-label__stamp {
    position: absolute; right: 8px; bottom: 14px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    border: 2px solid var(--mint-2);
    border-radius: 6px;
    color: var(--mint-2);
    font-family: var(--font-head); font-weight: 800; font-size: 11px;
    letter-spacing: .5px; text-transform: uppercase;
    background: rgba(255, 255, 255, .85);
    transform: rotate(-12deg) scale(2.4);
    opacity: 0;
    pointer-events: none;
}
.cp-prev.is-done .cp-label__stamp { animation: cpStamp .5s .9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes cpStamp { to { opacity: 1; transform: rotate(-12deg) scale(1); } }

.cp-prev__pct {
    position: absolute; left: 12px; top: 10px; z-index: 2;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(7, 26, 80, .65);
    border: 1px solid rgba(143, 230, 234, .3);
    font-family: var(--font-head); font-weight: 600; font-size: 11.5px; color: #e6fbfc;
}
.cp-prev__pct b { color: #8fe6ea; font-variant-numeric: tabular-nums; }

/* ---- Named steps ---- */
.cp-steps3 {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.cp-steps3 li {
    position: relative;
    display: flex; align-items: center; gap: 7px;
    padding: 7px 8px;
    border-radius: 10px;
    background: var(--bg-2);
    font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    transition: background .3s, color .3s;
}
.cp-steps3 li span {
    width: 20px; height: 20px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff; border: 1.5px solid var(--line-2);
    font-size: 11px; font-weight: 700; color: var(--muted);
    transition: background .3s, color .3s, border-color .3s;
}
.cp-steps3 li.is-on { background: rgba(31, 176, 180, .14); color: var(--text-mint); }
.cp-steps3 li.is-on span { background: var(--grad-mint); border-color: transparent; color: #fff; }
.cp-steps3 li.is-past { color: var(--ink); }
.cp-steps3 li.is-past span { background: var(--navy); border-color: transparent; color: transparent; position: relative; }
.cp-steps3 li.is-past span::after {
    content: "\F26E"; /* bootstrap-icons check */
    font-family: "bootstrap-icons"; color: #8fe6ea; font-size: 12px;
    position: absolute; inset: 0; display: grid; place-items: center;
}

.cp-step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.cp-step.is-on { display: block; animation: cpStepIn .55s var(--ease-out) both; }
.cp-step.is-back { animation-name: cpStepBack; }
@keyframes cpStepIn {
    from { opacity: 0; transform: perspective(900px) rotateY(-22deg) translateX(30px); }
    to { opacity: 1; transform: none; }
}
@keyframes cpStepBack {
    from { opacity: 0; transform: perspective(900px) rotateY(22deg) translateX(-30px); }
    to { opacity: 1; transform: none; }
}

.cp-field { display: block; margin: 0 0 13px; }
.cp-field .wp-field-label small { font-weight: 500; color: var(--muted-2); }
.cp-control { position: relative; display: block; }
.cp-control > i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--muted-2); font-size: 17px; pointer-events: none; z-index: 1;
}
.cp-control .wp-input { padding: 13px 14px 13px 42px; }
.cp-control--phone .wp-input { padding-left: 80px; }
.cp-cc {
    position: absolute; left: 40px; top: 50%; transform: translateY(-50%);
    font-weight: 600; color: var(--ink); font-size: 15px;
    padding-right: 8px; border-right: 1px solid var(--line-2);
    pointer-events: none; z-index: 1;
}
.cp-field.is-bad .wp-input { border-color: #d9534f; box-shadow: 0 0 0 4px rgba(217, 83, 79, .12); }
.cp-field.is-bad .cp-chips { border-radius: 12px; box-shadow: 0 0 0 2px rgba(217, 83, 79, .5); }
.cp-pinhint { display: block; min-height: 0; font-size: 12.5px; margin-top: 6px; color: var(--muted); }
.cp-pinhint:empty { display: none; }
.cp-pinhint.ok { color: var(--text-mint); font-weight: 600; }
.cp-pinhint.no { color: #b4541a; font-weight: 600; }

.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip { position: relative; cursor: pointer; }
.cp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cp-chip span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--line-2);
    background: #fbfdff;
    font-size: 13.5px; font-weight: 600; color: var(--ink);
    transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease-spring);
    user-select: none;
}
.cp-chip span i { color: var(--muted-2); transition: color .2s; }
.cp-chip:hover span { border-color: rgba(31, 176, 180, .6); }
.cp-chip input:checked + span { background: rgba(31, 176, 180, .12); border-color: var(--mint-2); color: var(--text-mint); transform: translateY(-1px); }
.cp-chip input:checked + span i { color: var(--mint-2); }
.cp-chip input:focus-visible + span { outline: 3px solid rgba(21, 149, 153, .55); outline-offset: 2px; }

.cp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cp-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; line-height: 1.5; }
.cp-consent input { margin-top: 3px; accent-color: var(--mint-2); }
.cp-actions { display: flex; gap: 10px; }
.cp-actions .cp-submit { flex: 1; }
.cp-back { padding: 14px 18px; }
.cp-submit[disabled] { opacity: .7; cursor: progress; }
.cp-formmsg { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; background: rgba(201, 42, 42, .08); color: #8f1d1d; }
.cp-formfoot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.cp-formfoot a { font-weight: 700; color: var(--text-mint); }

.cp-hint { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cp-hint i { color: var(--mint-2); margin-top: 1px; }
.cp-pinhint i { margin-right: 3px; }

/* ---- Depth: two sheets stacked behind the card ---- */
.cp-formwrap { position: relative; }
.cp-formstack { position: absolute; left: 0; right: 0; top: 0; height: 340px; pointer-events: none; }
.cp-formstack i {
    position: absolute; inset: 0;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(143, 230, 234, .22);
    transform: perspective(1000px) translate3d(14px, 14px, -40px) rotate(2.2deg);
}
.cp-formstack i + i { background: rgba(255, 255, 255, .08); transform: perspective(1000px) translate3d(26px, 26px, -80px) rotate(4deg); }

/* ---- What happens next (on the dark hero, under the card) ---- */
.cp-after { margin-top: 18px; position: relative; }
.cp-after__title {
    display: block; margin-bottom: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: 12px;
    letter-spacing: .8px; text-transform: uppercase; color: #8fe6ea;
}
.cp-after ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cp-after li {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 10px;
    border-radius: 14px;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cp-after b { display: block; font-family: var(--font-head); font-size: 13px; color: #fff; line-height: 1.25; }
.cp-after small { display: block; font-size: 11.5px; color: rgba(230, 251, 252, .7); line-height: 1.35; margin-top: 2px; }
.cp-after__ic {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--grad-mint); color: #fff; font-size: 14px;
    box-shadow: 0 6px 14px rgba(21, 149, 153, .35);
}

/* ---- Success ---- */
.cp-done { text-align: center; padding: 8px 4px 6px; }
.cp-done:not([hidden]) { animation: cpStepIn .6s var(--ease-out) both; }
.cp-done h2 { font-size: 24px; margin: 6px 0 8px; }
.cp-done p { color: var(--muted); font-size: 14.5px; }
.cp-done__next { display: grid; gap: 10px; margin-top: 16px; }

/* ---------------------------------------------------------------------
   Shared 3D "screen": a dark rounded panel with a stage inside
   --------------------------------------------------------------------- */
.cp-screen {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background:
        radial-gradient(80% 70% at 50% 110%, rgba(31, 176, 180, .28), transparent 60%),
        radial-gradient(70% 60% at 0% 0%, rgba(15, 58, 168, .55), transparent 60%),
        linear-gradient(160deg, #061a50 0%, #071f66 50%, #0b3a63 100%);
    box-shadow: 0 30px 70px rgba(7, 31, 102, .25), inset 0 0 0 1px rgba(143, 230, 234, .16);
    isolation: isolate;
}
.cp-stage { position: absolute; inset: 0; perspective: 1100px; overflow: hidden; }
/* Off-screen scenes stop animating (wepicks-campaign.js toggles this). */
.cp-paused, .cp-paused * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------------
   Dark section (RTO)
   --------------------------------------------------------------------- */
.cp-dark {
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
    background: radial-gradient(90% 60% at 100% 0%, #0e5a80 0%, transparent 55%),
                linear-gradient(170deg, #04143f 0%, #071f66 55%, #06244f 100%);
}
.cp-dark h2, .cp-dark h3 { color: #fff; }
.cp-dark .wp-shead p { color: rgba(255, 255, 255, .72); }
.cp-dark__glow {
    position: absolute; left: 50%; top: 40%;
    width: 900px; height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(31, 176, 180, .18), transparent);
    pointer-events: none;
}
.cp-eyebrow-dark { color: #bdf3f5 !important; background: rgba(143, 230, 234, .12) !important; }
.cp-dark .wp-container { position: relative; }

/* ---------------------------------------------------------------------
   Scene 1 — RTO scanner gate
   One 6s loop per parcel, three parcels 2s apart. A parcel crosses the
   gate at the 50% mark of its own loop, which is also when its verdict
   tag lights up, so the tags stay in step with the belt by construction.
   --------------------------------------------------------------------- */
.cp-scan { aspect-ratio: 16 / 7.4; max-width: 1040px; margin: 0 auto 34px; }
.cp-scan .cp-stage {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.cp-rig {
    --k: 1;
    position: absolute;
    left: 46%; top: 70%;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: rotateX(-26deg) rotateY(32deg) scale3d(var(--k), var(--k), var(--k));
}
.cp-belt > .fz { background: linear-gradient(#2f4a82, #16294f); box-shadow: inset 0 1.5px 0 #8fe6ea; }
.cp-belt > .bz, .cp-belt > .px, .cp-belt > .nx { background: #16294f; }
.cp-belt > .ny {
    background: repeating-linear-gradient(90deg, #3b5590 0 12px, #22366a 12px 24px);
    box-shadow: inset 0 0 0 1.5px rgba(143, 230, 234, .45);
    animation: cpBelt .45s linear infinite;
}
@keyframes cpBelt { to { background-position: 24px 0; } }
.cp-leg > i { background: #0f1f45; }
.cp-pillar > i { background: linear-gradient(180deg, #2a4b8f, #142a5c); box-shadow: inset 0 0 0 1px rgba(143, 230, 234, .25); }
.cp-pillar > .fz { background: linear-gradient(180deg, #3a63b0, #1a3570); }
.cp-beam > i { background: #1a3570; box-shadow: inset 0 0 0 1px rgba(143, 230, 234, .3); }
.cp-beam > .fz { background: linear-gradient(180deg, #3a63b0, #1a3570); }
.cp-beam > .ny { background: #2a4b8f; }
.cp-beam > .py { background: #0b1633; }
.cp-beam__led {
    position: absolute; inset: 40% 10%;
    border-radius: 6px;
    background: #8fe6ea;
    box-shadow: 0 0 18px 6px rgba(143, 230, 234, .8);
}
/* The curtain: a plane across the gate, facing along the belt. */
.cp-curtain {
    position: absolute;
    left: -51px; top: -160px;
    width: 102px; height: 122px;
    transform: rotateY(90deg);
    background: linear-gradient(180deg, rgba(143, 230, 234, .45), rgba(31, 176, 180, .18));
    box-shadow: inset 0 0 26px rgba(143, 230, 234, .55), 0 0 30px rgba(143, 230, 234, .35);
    animation: cpCurtain 2s ease-in-out infinite;
    overflow: hidden;
}
@keyframes cpCurtain {
    0%, 30%, 70%, 100% { background-color: transparent; opacity: .7; }
    50% { opacity: 1; background-color: rgba(143, 230, 234, .25); }
}
.cp-curtain__line {
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px;
    background: #d3f8f9;
    box-shadow: 0 0 14px 4px rgba(143, 230, 234, .9);
    animation: cpSweep 1s ease-in-out infinite alternate;
}
@keyframes cpSweep { to { transform: translateY(119px); } }

.cp-pk {
    position: absolute; left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    animation: cpRide 6s linear infinite;
    animation-delay: var(--d, 0s);
}
@keyframes cpRide {
    from { transform: translate3d(-380px, -61px, 0); }
    to { transform: translate3d(380px, -61px, 0); }
}
.cp-pk .wp-cube { --s: 46px; left: -23px; top: -23px; transform: none; will-change: auto; }
.cp-pk__in { animation: cpIn 6s step-end infinite; animation-delay: var(--d, 0s); }
.cp-pk__out { animation: cpOut 6s step-end infinite; animation-delay: var(--d, 0s); }
@keyframes cpIn { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes cpOut { 0% { visibility: hidden; } 50% { visibility: visible; } }
.cp-cube--amber .f, .cp-cube--amber .l { background: var(--amber-2); }
.cp-cube--amber .r, .cp-cube--amber .b { background: var(--amber-3); }
.cp-cube--amber .t { background: var(--amber-1); }
.cp-cube--amber .t::after, .cp-cube--amber .f::after { background: #fff; }

.cp-hud {
    position: absolute; left: 20px; top: 18px; z-index: 3;
    display: flex; flex-direction: column; gap: 3px;
}
.cp-hud__live {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: 13px; color: #e6fbfc;
}
.cp-hud__live i { width: 8px; height: 8px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 10px #3ee08f; animation: cpBlink 1.4s ease-in-out infinite; }
@keyframes cpBlink { 50% { opacity: .35; } }
.cp-hud__meta { font-size: 11.5px; color: rgba(230, 251, 252, .6); letter-spacing: .3px; }

.cp-tags {
    position: absolute; right: 18px; top: 16px; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.cp-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(7, 26, 80, .6);
    border: 1px solid rgba(143, 230, 234, .2);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-head); font-weight: 600; font-size: 12.5px; color: #e6fbfc;
    white-space: nowrap;
    opacity: .32;
    transform: translateX(10px);
    animation: cpTag 6s infinite;
    animation-delay: var(--d, 0s);
}
.cp-tag--ok i { color: #5ee0a0; }
.cp-tag--warn i { color: var(--amber-1); }
@keyframes cpTag {
    0%, 49% { opacity: .32; transform: translateX(10px); border-color: rgba(143, 230, 234, .2); box-shadow: none; }
    54%, 82% { opacity: 1; transform: none; border-color: rgba(143, 230, 234, .7); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 3px rgba(143, 230, 234, .12); }
    90%, 100% { opacity: .32; transform: translateX(10px); border-color: rgba(143, 230, 234, .2); box-shadow: none; }
}
.cp-tag--warn { animation-name: cpTagWarn; }
@keyframes cpTagWarn {
    0%, 49% { opacity: .32; transform: translateX(10px); border-color: rgba(240, 163, 60, .2); box-shadow: none; }
    54%, 82% { opacity: 1; transform: none; border-color: rgba(240, 163, 60, .8); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 3px rgba(240, 163, 60, .14); }
    90%, 100% { opacity: .32; transform: translateX(10px); border-color: rgba(240, 163, 60, .2); box-shadow: none; }
}

/* ---- RTO feature cards (on dark) ---- */
.cp-rtogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cp-rto {
    position: relative;
    padding: 24px 22px;
    border-radius: var(--r);
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid rgba(143, 230, 234, .16);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}
.cp-rto h3 { font-size: 17.5px; margin: 14px 0 6px; }
.cp-rto p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, .7); }
.cp-rto__ic {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--grad-mint);
    color: #fff; font-size: 21px;
    box-shadow: 0 12px 26px rgba(21, 149, 153, .4), inset 0 1px 0 rgba(255, 255, 255, .35);
    transform: translateZ(26px);
}
.cp-rto--cta {
    background: linear-gradient(140deg, rgba(31, 176, 180, .28), rgba(15, 58, 168, .3));
    border-color: rgba(143, 230, 234, .4);
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.cp-rto--cta h3 { margin-top: 0; }
.cp-rto--cta p { margin-bottom: 16px; }

/* ---------------------------------------------------------------------
   Two-column split used by coverage + support
   --------------------------------------------------------------------- */
.cp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

/* ---------------------------------------------------------------------
   Scene 2 — India pincode board
   The board is the map plane. Towers live in .cp-board__towers, which is
   turned -90deg about X so a .wp-b's "up" (-y) points out of the map:
   --x is east, --z is south, --y is height. Built by wepicks-campaign.js.
   --------------------------------------------------------------------- */
.cp-map { aspect-ratio: 1 / 1; max-width: 560px; width: 100%; margin-inline: auto; }
.cp-map .cp-stage { perspective: 1200px; }
.cp-board {
    --k: 1;
    position: absolute;
    left: 50%; top: 52%;
    width: 450px; height: 440px;
    margin: -220px 0 0 -225px;
    transform-style: preserve-3d;
    transform: scale3d(var(--k), var(--k), var(--k)) rotateX(46deg) rotateZ(-6deg);
    animation: cpSway 16s ease-in-out infinite alternate;
}
@keyframes cpSway {
    from { transform: scale3d(var(--k), var(--k), var(--k)) rotateX(46deg) rotateZ(-14deg); }
    to { transform: scale3d(var(--k), var(--k), var(--k)) rotateX(46deg) rotateZ(4deg); }
}
.cp-board__land { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cp-land {
    fill: url(#cpLand);
    stroke: #8fe6ea;
    stroke-width: 2;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px rgba(31, 176, 180, .55));
}
.cp-land--dots { fill: url(#cpDots); stroke: none; filter: none; }
.cp-board__pins { position: absolute; inset: 0; }
.cp-pin {
    position: absolute;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #8fe6ea;
    box-shadow: 0 0 10px 2px rgba(143, 230, 234, .7);
}
.cp-pin--big::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 2px solid rgba(143, 230, 234, .8);
    animation: cpRing 2.6s ease-out infinite;
    animation-delay: var(--rd, 0s);
}
@keyframes cpRing { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.cp-board__towers {
    position: absolute; left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: rotateX(-90deg);
}
.cp-tw { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.cp-tw__grow {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    transform-style: preserve-3d;
    transform: scaleY(.001);
    transition: transform 1s var(--ease-spring);
    transition-delay: var(--gd, 0s);
}
.cp-map.in .cp-tw__grow { transform: scaleY(1); }
.cp-tw .wp-b > i { background: linear-gradient(180deg, #2cc3c7, #0d4f6e); }
.cp-tw .wp-b > .px, .cp-tw .wp-b > .bz { background: linear-gradient(180deg, #1a9599, #0a3656); }
.cp-tw .wp-b > .ny { background: #b9f4f6; box-shadow: 0 0 14px 3px rgba(143, 230, 234, .85); }
.cp-tw--big .wp-b > .ny { background: #fff; }

.cp-mapchip {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px;
    border-radius: 12px;
    background: rgba(7, 26, 80, .6);
    border: 1px solid rgba(143, 230, 234, .28);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-head); font-weight: 600; font-size: 13px; color: #e6fbfc;
    animation: wpChipFloat 5s ease-in-out infinite;
}
.cp-mapchip b { color: #8fe6ea; font-size: 16px; }
.cp-mapchip i { color: #8fe6ea; }
.cp-mapchip--a { left: 16px; top: 16px; }
.cp-mapchip--b { right: 16px; bottom: 16px; animation-delay: -2.5s; }

.cp-pincheck {
    margin-top: 22px;
    padding: 18px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.cp-pincheck__row { display: flex; gap: 10px; }
.cp-pincheck__row .cp-control { flex: 1; }
.cp-pincheck__out:not(:empty) { margin-top: 12px; }
.cp-pinres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.cp-pinres b { font-family: var(--font-head); }
.cp-pinres .tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 600;
    background: rgba(31, 176, 180, .12); color: var(--text-mint);
}
.cp-pinres .tag.no { background: rgba(240, 163, 60, .14); color: #a85d0b; }

/* ---------------------------------------------------------------------
   Support timeline + Scene 3 — the support cube
   --------------------------------------------------------------------- */
.cp-split--rev > :first-child { order: 0; }
.cp-timeline { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.cp-timeline li { display: flex; gap: 12px; align-items: flex-start; }
.cp-timeline b { font-family: var(--font-head); font-size: 15px; color: var(--ink); }
.cp-timeline p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.cp-timeline__n {
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--grad-brand);
    color: #8fe6ea; font-size: 17px;
    box-shadow: 0 8px 18px rgba(7, 31, 102, .22);
}

.cp-help { aspect-ratio: 1 / 1; max-width: 480px; width: 100%; margin-inline: auto; }
.cp-helprig {
    --k: 1;
    position: absolute; left: 50%; top: 46%;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: scale3d(var(--k), var(--k), var(--k));
}
.cp-hcube {
    --s: 150px;
    position: absolute;
    left: calc(var(--s) / -2); top: calc(var(--s) / -2);
    width: var(--s); height: var(--s);
    transform-style: preserve-3d;
    animation: cpTurn 20s cubic-bezier(.65, 0, .35, 1) infinite;
}
/* Rests on each side face, then tips to show the top. */
@keyframes cpTurn {
    0%, 10%   { transform: rotateX(-16deg) rotateY(-24deg); }
    17%, 27%  { transform: rotateX(-16deg) rotateY(-114deg); }
    34%, 44%  { transform: rotateX(-16deg) rotateY(-204deg); }
    51%, 61%  { transform: rotateX(-16deg) rotateY(-294deg); }
    68%, 78%  { transform: rotateX(-74deg) rotateY(-384deg); }
    85%, 100% { transform: rotateX(-16deg) rotateY(-384deg); }
}
.cp-hcube > i {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(31, 176, 180, .95), rgba(7, 31, 102, .96));
    border: 1.5px solid rgba(143, 230, 234, .7);
    box-shadow: inset 0 0 30px rgba(143, 230, 234, .25);
    backface-visibility: hidden;
    font-style: normal;
}
.cp-hcube > i > span {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #fff;
    text-align: center; line-height: 1.25; padding: 0 12px;
}
.cp-hcube > i > span > i { font-size: 40px; color: #d3f8f9; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }
.cp-hcube > .f { transform: translateZ(calc(var(--s) / 2)); }
.cp-hcube > .b { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cp-hcube > .r { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cp-hcube > .l { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cp-hcube > .t { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cp-hcube > .d { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cp-hshadow {
    position: absolute; left: -110px; top: 120px;
    width: 220px; height: 40px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent);
    filter: blur(4px);
}
.cp-orbit {
    position: absolute; left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    transform: rotateX(74deg);
}
.cp-orbit__ring {
    position: absolute; left: -165px; top: -165px;
    width: 330px; height: 330px;
    border-radius: 50%;
    border: 2px dashed rgba(143, 230, 234, .45);
    box-shadow: 0 0 30px rgba(31, 176, 180, .25), inset 0 0 30px rgba(31, 176, 180, .2);
}
.cp-orbit__pk {
    position: absolute; left: 0; top: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
    animation: cpOrbit 10s linear infinite;
}
@keyframes cpOrbit {
    from { transform: rotateZ(var(--a)) translateX(165px) rotateX(-74deg); }
    to { transform: rotateZ(calc(var(--a) + 360deg)) translateX(165px) rotateX(-74deg); }
}
.cp-orbit__pk .wp-cube { left: -13px; top: -13px; }
.cp-helpbar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
    padding: 14px 16px;
    background: linear-gradient(transparent, rgba(4, 20, 63, .8));
    font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: #e6fbfc;
}
.cp-helpbar i { color: #8fe6ea; margin-right: 4px; }

/* ---------------------------------------------------------------------
   COD: Scene 4 — coin stacks + the statement card
   --------------------------------------------------------------------- */
.cp-codgrid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.cp-coins { min-height: 380px; }
.cp-coinboard {
    --k: 1;
    position: absolute;
    left: 50%; top: 56%;
    width: 500px; height: 220px;
    margin: -110px 0 0 -250px;
    transform-style: preserve-3d;
    transform: scale3d(var(--k), var(--k), var(--k)) rotateX(58deg) rotateZ(-24deg);
    border-radius: 22px;
    background:
        linear-gradient(rgba(143, 230, 234, .10) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(143, 230, 234, .10) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(60% 70% at 50% 50%, rgba(31, 176, 180, .22), transparent 75%);
    box-shadow: inset 0 0 0 1.5px rgba(143, 230, 234, .25);
}
.cp-stack { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.cp-disc {
    position: absolute; left: -24px; top: -24px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, var(--coin-1), var(--coin-2) 60%, var(--coin-3));
    box-shadow: inset 0 0 0 2px rgba(150, 100, 10, .55);
    opacity: 0;
    transform: translateZ(calc(var(--i) * 3px + 260px));
    transition: transform .5s cubic-bezier(.3, 1.4, .6, 1), opacity .2s;
    transition-delay: calc(var(--s) * .22s + var(--i) * .018s + .2s);
}
.cp-disc--edge { background: var(--coin-3); box-shadow: none; }
.cp-disc--top {
    display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 800; font-size: 22px; color: #8a5b07;
    background: radial-gradient(circle at 40% 35%, #fff3c4, var(--coin-2) 65%, var(--coin-3));
    box-shadow: inset 0 0 0 3px rgba(150, 100, 10, .6), 0 0 22px rgba(255, 210, 110, .55);
}
.cp-coins.in .cp-disc { opacity: 1; transform: translateZ(calc(var(--i) * 3px)); }
.cp-day {
    position: absolute;
    width: 56px; margin-left: -28px;
    text-align: center;
    font-family: var(--font-head); font-weight: 700; font-size: 13px;
    color: rgba(230, 251, 252, .75);
}
.cp-day--paid { color: #8fe6ea; }
.cp-coins__cap {
    position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
    text-align: center;
    font-family: var(--font-head); font-weight: 600; font-size: 13px; color: rgba(230, 251, 252, .8);
}

.cp-statement {
    position: relative;
    padding: 24px 24px 20px;
    border-radius: var(--r-lg);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 30px 70px rgba(7, 31, 102, .14);
}
.cp-statement__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); }
.cp-statement__head i { color: var(--mint-2); margin-right: 4px; }
.cp-statement__head em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 7px; }
.cp-statement__week { margin-top: 14px; font-size: 13px; color: var(--muted); }
.cp-statement__amt {
    font-family: var(--font-head); font-weight: 800;
    font-size: clamp(32px, 4vw, 42px); letter-spacing: -.02em;
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transform: translateZ(30px);
}
.cp-statement__sub { font-size: 12.5px; color: var(--text-mint); font-weight: 600; }
.cp-statement__rows { margin: 16px 0 12px; border-top: 1px solid var(--line); }
.cp-statement__rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cp-statement__rows span { color: var(--muted); }
.cp-statement__rows b { font-family: var(--font-head); color: var(--ink); white-space: nowrap; }
.cp-statement__rows b i { color: var(--mint-2); }
.cp-statement__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cp-statement__list li { display: flex; gap: 8px; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.cp-statement__list i { color: var(--mint-2); margin-top: 1px; }

/* ---------------------------------------------------------------------
   Comparison
   --------------------------------------------------------------------- */
.cp-compare {
    max-width: 920px; margin: 0 auto;
    border-radius: var(--r-lg);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.cp-compare__row { display: grid; grid-template-columns: 1fr 1.4fr 1.6fr; border-top: 1px solid var(--line); }
.cp-compare__row:first-child { border-top: 0; }
.cp-compare__row > span { padding: 15px 18px; font-size: 14.5px; display: flex; gap: 9px; align-items: flex-start; }
.cp-compare__row > span:first-child { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.cp-compare__row > span:nth-child(2) { color: var(--muted); }
.cp-compare__row > span:nth-child(2) i { color: #c9504b; margin-top: 2px; }
.cp-compare__row > span:nth-child(3) { background: rgba(31, 176, 180, .07); color: var(--ink); font-weight: 600; }
.cp-compare__row > span:nth-child(3) i { color: var(--mint-2); margin-top: 2px; }
.cp-compare__row--head > span { font-family: var(--font-head); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted) !important; align-items: center; }
.cp-compare__row--head > span:nth-child(3) { color: var(--text-mint) !important; background: rgba(31, 176, 180, .14); }

/* ---------------------------------------------------------------------
   Onboarding steps — extruded 3D numerals
   --------------------------------------------------------------------- */
.cp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cp-stepcard {
    position: relative;
    padding: 28px 24px 24px;
    border-radius: var(--r-lg);
    background: linear-gradient(165deg, #fff, #f3f8ff);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.cp-stepcard h3 { font-size: 19px; margin: 12px 0 6px; }
.cp-stepcard p { margin: 0; color: var(--muted); font-size: 14.5px; }
.cp-stepcard__n {
    display: inline-block;
    font-family: var(--font-head); font-weight: 800; font-size: 64px; line-height: 1;
    color: #22b3b7;
    text-shadow: 1px 1px 0 #1a9ea2, 2px 2px 0 #168e92, 3px 3px 0 #127f83, 4px 4px 0 #0f7478, 5px 5px 0 #0c666a, 6px 6px 0 #0a585c, 8px 10px 18px rgba(7, 31, 102, .3);
    transform: translateZ(40px);
}

/* ---------------------------------------------------------------------
   Final CTA band
   --------------------------------------------------------------------- */
.cp-final {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 34px 38px;
    border-radius: var(--r-lg);
    background: var(--grad-brand);
    box-shadow: 0 40px 80px rgba(7, 31, 102, .25);
    overflow: hidden;
}
.cp-final h2 { color: #fff; margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); }
.cp-final p { color: rgba(255, 255, 255, .78); margin: 0; }
.cp-final__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.cp-final__cubes { position: relative; height: 110px; perspective: 600px; }
.cp-final__cubes .wp-cube { animation: cpBob 4s ease-in-out infinite; }
.cp-final__cubes .wp-cube:nth-child(1) { left: 20px; top: 40px; }
.cp-final__cubes .wp-cube:nth-child(2) { left: 84px; top: 10px; animation-delay: -1.3s; }
.cp-final__cubes .wp-cube:nth-child(3) { left: 100px; top: 70px; animation-delay: -2.6s; }
@keyframes cpBob {
    0%, 100% { transform: rotateX(-28deg) rotateY(38deg) translateY(0); }
    50% { transform: rotateX(-28deg) rotateY(68deg) translateY(-12px); }
}

/* ---------------------------------------------------------------------
   Footer + phone sticky bar
   --------------------------------------------------------------------- */
.cp-footer { padding-top: 10px; }
.cp-footer .wp-footer__bottom { border-top: 0; }
.cp-footer a { color: rgba(255, 255, 255, .85); }
.cp-footer__logo { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .9; }

.cp-mbar { display: none; }
@media (max-width: 767px) {
    .cp-float { display: none !important; }
    .cp-mbar {
        position: fixed; left: 10px; right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 998;
        display: flex; gap: 8px; align-items: center;
        padding: 8px;
        border-radius: 18px;
        background: rgba(4, 20, 63, .92);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
        transform: translateY(140%);
        transition: transform .4s var(--ease-out);
    }
    .cp-mbar.is-on { transform: none; }
    .cp-mbar__wa, .cp-mbar__call {
        width: 46px; height: 46px; flex: none;
        display: grid; place-items: center;
        border-radius: 13px;
        background: rgba(255, 255, 255, .1);
        color: #fff; font-size: 20px;
    }
    .cp-mbar__wa { background: #25d366; }
    .cp-mbar__go { flex: 1; padding: 14px 16px; }
    .cp-page .wp-totop { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
    .cp-page footer { padding-bottom: 80px; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .cp-rtogrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .cp-hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "form" "scene"; gap: 26px; }
    .cp-formwrap { max-width: 560px; width: 100%; margin: 0 auto; }
    .cp-hero__scene { margin-top: 0; }
    .cp-split { grid-template-columns: 1fr; gap: 36px; }
    .cp-split--rev > :first-child { order: 1; }
    .cp-codgrid { grid-template-columns: 1fr; }
    .cp-steps { grid-template-columns: 1fr; }
    .cp-final { grid-template-columns: 1fr; text-align: center; padding: 30px 22px; }
    .cp-final__cubes { width: 150px; margin: 0 auto; }
    .cp-final__cta { justify-content: center; }
}
@media (max-width: 767px) {
    .cp-hero { padding: 34px 0 60px; }
    .cp-hero h1 { font-size: clamp(30px, 8.6vw, 40px); }
    .cp-proof li { font-size: 12px; padding: 7px 11px; }
    .cp-formcard { padding: 22px 18px 18px; }
    .cp-formhead h2 { font-size: 21px; }
    .cp-prev { height: 146px; }
    .cp-prev__rig { left: 20%; transform: rotateX(-24deg) rotateY(30deg) scale3d(.5, .5, .5); }
    .cp-prev__pk { transform: translate3d(calc(-110px + var(--p) * 170px), -47px, 0); }
    .cp-prev.is-done .cp-prev__pk { transform: translate3d(70px, -47px, 0) rotateY(-20deg); }
    .cp-label { width: 58%; font-size: 11px; right: 8px; top: 10px; padding: 8px 9px 7px; }
    .cp-steps3 li { font-size: 11px; padding: 6px; gap: 5px; }
    .cp-after ol { grid-template-columns: 1fr; }
    .cp-scan { aspect-ratio: 1 / 1.08; }
    .cp-rig { left: 50%; top: 44%; }
    .cp-hud { left: 14px; top: 12px; }
    .cp-hud__meta { display: none; }
    .cp-tags { left: 12px; right: 12px; top: auto; bottom: 12px; align-items: stretch; gap: 5px; }
    .cp-tag { font-size: 11.5px; padding: 6px 10px; transform: none; }
    .cp-rtogrid { grid-template-columns: 1fr; }
    .cp-timeline { grid-template-columns: 1fr; }
    .cp-compare__row { grid-template-columns: 1fr 1fr; }
    .cp-compare__row > span:first-child { grid-column: 1 / -1; padding-bottom: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
    .cp-compare__row > span { font-size: 13.5px; padding: 10px 14px; }
    .cp-compare__row--head > span:first-child { display: none; }
    .cp-coins { min-height: 300px; }
    .cp-pincheck__row { flex-direction: column; }
    .cp-pincheck__row .wp-btn { width: 100%; }
}
@media (max-width: 767px) {
    @keyframes cpTag {
        0%, 49% { opacity: .4; border-color: rgba(143, 230, 234, .2); }
        54%, 82% { opacity: 1; border-color: rgba(143, 230, 234, .7); }
        90%, 100% { opacity: .4; border-color: rgba(143, 230, 234, .2); }
    }
    @keyframes cpTagWarn {
        0%, 49% { opacity: .4; border-color: rgba(240, 163, 60, .2); }
        54%, 82% { opacity: 1; border-color: rgba(240, 163, 60, .8); }
        90%, 100% { opacity: .4; border-color: rgba(240, 163, 60, .2); }
    }
}

/* ---------------------------------------------------------------------
   Reduced motion: every scene holds a still, readable frame
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cp-formcard, .cp-step.is-on, .cp-done:not([hidden]) { animation: none !important; }
    .cp-screen *, .cp-final__cubes * { animation: none !important; }
    .cp-pk:nth-of-type(1) { transform: translate3d(-200px, -61px, 0); }
    .cp-pk { transform: translate3d(180px, -61px, 0); }
    .cp-pk__in { visibility: hidden; }
    .cp-tag { opacity: 1; transform: none; }
    .cp-tw__grow { transform: none; transition: none; }
    .cp-disc { opacity: 1; transform: translateZ(calc(var(--i) * 3px)); transition: none; }
    .cp-hcube { transform: rotateX(-16deg) rotateY(-24deg); }
    .cp-prev__pk { transition: none; }
    .cp-prev.is-done .cp-label__stamp { animation: none; opacity: 1; transform: rotate(-12deg); }
    .cp-board { transform: scale3d(var(--k), var(--k), var(--k)) rotateX(46deg) rotateZ(-6deg); }
}