/*! Proxera motion v1 · proxera.io home page
    Pairs with proxera-motion.js. No dependencies.
    Everything here is additive: it hooks the existing classes and never
    changes layout. With JavaScript off, or reduced motion on, the page
    renders exactly as it does today. */

:root{
  --pxm-accent:#0866EE;
  --pxm-ease:cubic-bezier(.16,1,.3,1);      /* expo out: fast start, long settle */
  --pxm-ease-in:cubic-bezier(.7,0,.84,0);
}

/* ── First paint guard ─────────────────────────────────────────────────
   The inline head snippet adds .pxm-js before first paint so the hero does
   not flash and then animate. If the motion script never runs, the
   failsafe fades the hero in after 1.6s anyway. */
html.pxm-js:not(.pxm-rm) .hero .hero-grid{opacity:0;animation:pxm-failsafe .6s ease 1.6s forwards}
html.pxm-js .hero.pxm-go .hero-grid{opacity:1;animation:none}
@keyframes pxm-failsafe{to{opacity:1}}

/* ── Split words (headline reveals) ──────────────────────────────────── */
.pxm-w{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.04em .12em .14em;margin:-.04em -.12em -.14em}   /* side room so tight tracking never clips a glyph */
.pxm-wi{display:inline-block;will-change:transform}
.pxm-split .pxm-wi{transition:transform 1.05s var(--pxm-ease),opacity .7s var(--pxm-ease)}
.pxm-split:not(.pxm-in) .pxm-wi{transform:translate3d(0,108%,0) rotate(3deg);opacity:0}

/* The hero number. Width is reserved by the script so the line never jumps. */
.pxm-count{font-variant-numeric:tabular-nums}

/* Odometer slots for the hero number (built by roll() in the script). */
.pxm-slot,.pxm-ch{display:inline-block;vertical-align:top;letter-spacing:0;-webkit-text-fill-color:currentColor;white-space:nowrap}
.pxm-slot{clip-path:inset(0 -30% 0 -30%)}   /* clip the drum top and bottom only, never the sides of a glyph */
.pxm-col{display:block;will-change:transform}
.pxm-col>span{display:block;text-align:center;font-variant-numeric:tabular-nums}   /* rolling digits share one width, so the drum spins evenly */
.pxm-col>span.pxm-last{text-align:left;font-variant-numeric:normal}               /* the landing digit matches the final text exactly */

/* A light sweep across the blue words of the headline, once, then on hover. */
.pxm-sheen-text{background:linear-gradient(100deg,currentColor 0 38%,#8CC3FF 50%,currentColor 62% 100%);
  background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  padding:0 .1em;margin:0 -.1em}   /* the painted text only exists inside the box, so give the last letter room */
.pxm-sheen-text.pxm-sweep{animation:pxm-sweep 1.6s var(--pxm-ease) both}
@keyframes pxm-sweep{from{background-position:100% 0}to{background-position:0 0}}

/* ── The creator network behind the hero ─────────────────────────────── */
.pxm-net-host>.pxm-net{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 58%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 58%)}
@media (max-width:860px){
  .pxm-net-host>.pxm-net{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);mask-image:linear-gradient(180deg,transparent 0,#000 45%);opacity:.7}
}
.pxm-net-host>.wrap{position:relative;z-index:1}
/* On the dark closing section the copy sits on the left; keep the web off it. */
.final>.pxm-net{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 42%,#000 70%);mask-image:linear-gradient(90deg,transparent 0,transparent 42%,#000 70%)}
@media (max-width:860px){.final>.pxm-net{opacity:.45}}

/* Cards: a soft light that follows the pointer, and a ring when the network
   "reaches" a card. Both are child elements, so the existing float
   animation on the cards is untouched. */
.pxm-glint,.pxm-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.pxm-glint{opacity:0;transition:opacity .5s var(--pxm-ease);
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 55%);
  mix-blend-mode:soft-light}
.hero-art>:hover .pxm-glint{opacity:1}
.hero-art .drop .pxm-glint{background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.35),transparent 55%);mix-blend-mode:normal}
.pxm-ring{box-shadow:0 0 0 0 rgba(8,102,238,0)}
.pxm-ring.pxm-on{animation:pxm-ring 1.1s var(--pxm-ease)}
@keyframes pxm-ring{
  0%{box-shadow:0 0 0 0 rgba(var(--pxm-ring,8,102,238),.42),0 0 0 0 rgba(var(--pxm-ring,8,102,238),.2)}
  100%{box-shadow:0 0 0 14px rgba(var(--pxm-ring,8,102,238),0),0 0 0 28px rgba(var(--pxm-ring,8,102,238),0)}
}

/* ── Header: glass on scroll, and a thin reading-progress line ───────── */
header{transition:background-color .45s var(--pxm-ease),box-shadow .45s var(--pxm-ease)}
header.pxm-scrolled{background-color:rgba(255,255,255,.74)!important;
  -webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);
  box-shadow:0 1px 0 rgba(13,19,31,.06),0 10px 30px -14px rgba(13,19,31,.16)}
.pxm-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#0866EE,#28B8FF);transform-origin:0 50%;transform:scaleX(var(--pxm-p,0));
  opacity:0;transition:opacity .4s}
header.pxm-scrolled .pxm-progress{opacity:1}

/* ── Scroll reveals ──────────────────────────────────────────────────── */
.pxm-rv{transition:opacity .9s var(--pxm-ease),translate 1.1s var(--pxm-ease),filter .9s var(--pxm-ease)}
.pxm-rv:not(.pxm-in){opacity:0;translate:0 26px;filter:blur(4px)}
.pxm-rs{transition:opacity 1s var(--pxm-ease),scale 1.2s var(--pxm-ease)}
.pxm-rs:not(.pxm-in){opacity:0;scale:.94}

/* ── "How it works" steps: a rail that fills as you read ─────────────── */
.pxm-steps{position:relative}
.pxm-steps::before,.pxm-steps::after{content:"";position:absolute;left:-28px;top:6px;bottom:6px;width:2px;border-radius:2px}
.pxm-steps::before{background:rgba(8,102,238,.12)}
.pxm-steps::after{background:linear-gradient(180deg,#28B8FF,#0866EE);transform-origin:50% 0;
  transform:scaleY(var(--pxm-p,0));box-shadow:0 0 12px rgba(8,102,238,.45)}
.pxm-steps>li .n{display:inline-block;transition:color .5s var(--pxm-ease),transform .6s var(--pxm-ease),opacity .5s}
.pxm-steps>li:not(.pxm-lit) .n{opacity:.35;transform:scale(.9)}
.pxm-steps>li.pxm-lit .n{opacity:1;transform:none}
.pxm-steps>li h3{transition:color .5s var(--pxm-ease)}
@media (max-width:860px){.pxm-steps::before,.pxm-steps::after{left:-14px}}

/* ── Buttons: magnetic pull, a light that follows the cursor ─────────── */
.pxm-mag{position:relative;overflow:hidden;isolation:isolate;transition:translate .55s var(--pxm-ease),box-shadow .35s,background-color .35s}
.pxm-mag .arw{display:inline-block;transition:translate .45s var(--pxm-ease)}
.pxm-mag:hover .arw{translate:4px 0}
.pxm-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 60%)}
.pxm-mag:hover .pxm-sheen{opacity:1}
.btn-ghost .pxm-sheen,.btn-white .pxm-sheen{background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(8,102,238,.13),transparent 60%)}
.pxm-sheen::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);translate:-120% 0}
.btn-ghost .pxm-sheen::before,.btn-white .pxm-sheen::before{background:linear-gradient(110deg,transparent 30%,rgba(8,102,238,.12) 50%,transparent 70%)}
.pxm-mag:hover .pxm-sheen::before{animation:pxm-swipe .9s var(--pxm-ease)}
@keyframes pxm-swipe{from{translate:-120% 0}to{translate:120% 0}}

/* ── Tool cards: tilt and a spotlight border ─────────────────────────── */
.pxm-tool{position:relative;transition:transform .7s var(--pxm-ease),box-shadow .45s var(--pxm-ease);will-change:transform}
.pxm-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(8,102,238,.08),transparent 45%)}
.pxm-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(8,102,238,.75),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pxm-tool:hover .pxm-spot{opacity:1}
.pxm-tool:hover{box-shadow:0 30px 60px -30px rgba(8,60,160,.35)}

/* ── Creator band: a slow aurora inside the blue card ────────────────── */
.pxm-aurora-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.pxm-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.pxm-blob.a{width:560px;height:560px;left:-12%;top:-45%;background:#35A6FF;animation:pxm-drift-a 19s ease-in-out infinite alternate}
.pxm-blob.b{width:520px;height:520px;right:-14%;bottom:-55%;background:#12D2FF;opacity:.4;animation:pxm-drift-b 23s ease-in-out infinite alternate}
.pxm-blob.c{width:420px;height:420px;left:38%;top:30%;background:#0A3FB8;opacity:.5;animation:pxm-drift-c 27s ease-in-out infinite alternate}
@keyframes pxm-drift-a{to{transform:translate3d(160px,90px,0) scale(1.15)}}
@keyframes pxm-drift-b{to{transform:translate3d(-180px,-70px,0) scale(.9)}}
@keyframes pxm-drift-c{to{transform:translate3d(-120px,-60px,0) scale(1.2)}}

/* Final CTA: a quiet breathing halo behind the button. */
.pxm-halo{position:relative;display:inline-block;isolation:isolate}
.pxm-halo::before{content:"";position:absolute;inset:-10px;border-radius:999px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(40,184,255,.45),transparent);animation:pxm-breathe 3.6s ease-in-out infinite}
@keyframes pxm-breathe{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:.9;transform:scale(1.08)}}

/* ── Service plan (pricing) ──────────────────────────────────────────────
   Rows grouped by billing on the left, a live plan card on the right. */
.pxp{--ink:#081B36;--mute:#586A80;--line:rgba(8,27,54,.08);--acc:#0866EE;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:32px;align-items:start;margin-top:26px}
.pxp-list{display:grid;gap:26px}
.pxp-glabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 4px 10px}
.pxp-glabel span{font:700 12px/1 Satoshi,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.pxp-glabel small{font-size:12.5px;color:var(--mute)}
.pxp-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px;box-shadow:0 1px 2px rgba(8,27,54,.03)}
.pxp-row{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:22px minmax(0,1fr) auto;
  column-gap:16px;align-items:start;padding:16px 16px;border-radius:14px;position:relative;
  transition:background-color .35s var(--pxm-ease),box-shadow .35s var(--pxm-ease)}
.pxp-row+.pxp-row{margin-top:2px}
.pxp-row+.pxp-row::before{content:"";position:absolute;left:54px;right:16px;top:0;height:1px;background:var(--line);transition:opacity .3s}
.pxp-row:hover{background:#F6F9FE}
.pxp-row:hover::before,.pxp-row:hover+.pxp-row::before,.pxp-row[aria-pressed="true"]::before,.pxp-row[aria-pressed="true"]+.pxp-row::before{opacity:0}
.pxp-row[aria-pressed="true"]{background:#F1F6FF;box-shadow:inset 0 0 0 1.5px rgba(8,102,238,.35)}
.pxp-row:focus-visible{box-shadow:0 0 0 3px rgba(8,102,238,.35)}
.pxp-check{width:22px;height:22px;margin-top:1px;border-radius:7px;border:1.5px solid rgba(8,27,54,.22);background:#fff;display:grid;place-items:center;
  transition:background-color .3s var(--pxm-ease),border-color .3s var(--pxm-ease),transform .3s var(--pxm-ease)}
.pxp-check svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--pxm-ease) .05s}
.pxp-row:hover .pxp-check{border-color:rgba(8,102,238,.55)}
.pxp-row[aria-pressed="true"] .pxp-check{background:var(--acc);border-color:var(--acc)}
.pxp-row[aria-pressed="true"] .pxp-check svg{stroke-dashoffset:0}
.pxp-row:active .pxp-check{transform:scale(.9)}
.pxp-main{display:grid;gap:4px;min-width:0}
.pxp-name{font:700 17px/1.3 Satoshi,system-ui,sans-serif;color:var(--ink);letter-spacing:-.01em}
.pxp-tag{font:600 11px/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.02em;color:#0A7A4B;background:#E7F7EF;
  padding:4px 8px;border-radius:999px;vertical-align:2px;margin-left:6px;white-space:nowrap}
.pxp-desc{font-size:14px;line-height:1.5;color:var(--mute)}
.pxp-price{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:1px}
.pxp-price b{font:700 17px/1.3 Satoshi,system-ui,sans-serif;color:var(--ink)}
.pxp-price small{font-size:13px;color:var(--mute)}
.pxp-more{grid-column:2/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--pxm-ease)}
.pxp-more>span{overflow:hidden;font-size:13px;line-height:1.55;color:#4A5D75;opacity:0;transition:opacity .35s}
.pxp-row[aria-pressed="true"] .pxp-more{grid-template-rows:1fr}
.pxp-row[aria-pressed="true"] .pxp-more>span{opacity:1;transition-delay:.1s}
.pxp-inc{display:block;margin:12px 0 4px;font:700 10.5px/1 Satoshi,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

.pxp-sum{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px 26px 22px;
  box-shadow:0 1px 2px rgba(8,27,54,.03),0 30px 60px -34px rgba(8,60,160,.35);display:grid;gap:14px}
.pxp-top{display:flex;justify-content:space-between;align-items:center}
.pxp-eyebrow{font:700 12px/1 Satoshi,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.pxp-clear{all:unset;cursor:pointer;font-size:13px;color:var(--mute);transition:color .2s,opacity .3s}
.pxp-clear:hover{color:var(--ink)}
.pxp-clear:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.pxp-total{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.pxp-total b{font:900 50px/1 Satoshi,system-ui,sans-serif;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .4s}
.pxp-total>span{font-size:17px;color:var(--mute);font-weight:500}
.pxp-was{margin-left:8px;font-size:15px;color:var(--mute)}
.pxp-once{font-size:15px;color:#33475F;min-height:0}
.pxp-once:empty{display:none}
.pxp-once b{color:var(--ink);font-variant-numeric:tabular-nums}
.pxp-bundle{display:flex;align-items:center;gap:10px;font-size:13px;color:#33475F;padding:10px 12px;border-radius:12px;background:#F4F7FB}
.pxp-dots{display:flex;gap:4px}
.pxp-dots i{width:16px;height:4px;border-radius:4px;background:rgba(8,27,54,.14);transition:background-color .4s var(--pxm-ease)}
.pxp-dots i.on{background:var(--acc)}
.pxp-bundle.done{background:#E7F7EF;color:#0A5E3A}
.pxp-bundle.done .pxp-dots i{background:#12A36B}
.pxp-items{list-style:none;margin:0;padding:0;display:grid}
.pxp-items li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#33475F;padding:9px 0;border-top:1px solid var(--line)}
.pxp-items li span:last-child{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pxp-empty{margin:0;font-size:14px;color:var(--mute);line-height:1.5}
.pxp-cta{justify-content:center;width:100%;box-sizing:border-box;margin-top:4px}
.pxp-note{margin:0;font-size:12.5px;line-height:1.55;color:var(--mute)}
.pxp-full{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line);
  text-decoration:none;color:inherit}
.pxp-full>span{display:grid;gap:3px;font-size:13px;color:var(--mute);line-height:1.45}
.pxp-full b{font:700 15px/1.3 Satoshi,system-ui,sans-serif;color:var(--ink)}
.pxp-full i{font-style:normal;font-weight:600;font-size:14px;color:var(--acc);white-space:nowrap;transition:translate .35s var(--pxm-ease)}
.pxp-full:hover i{translate:3px 0}
.pxp-sum.is-empty .pxp-total b{color:#B4C0CE}
.pxp-sum.is-empty .pxp-clear,.pxp-sum.is-empty .pxp-bundle,.pxp-sum.is-empty .pxp-items{display:none}
.pxp-sum:not(.is-empty) .pxp-empty{display:none}
@media (max-width:960px){
  .pxp{grid-template-columns:1fr;gap:22px}
  .pxp-sum{position:static}
}
@media (max-width:520px){
  .pxp-row{grid-template-columns:22px minmax(0,1fr);row-gap:6px;padding:14px 12px}
  .pxp-price{grid-column:2;text-align:left}
  .pxp-row+.pxp-row::before{left:50px;right:12px}
  .pxp-total b{font-size:42px}
}

/* ── Reduced motion: nothing moves, nothing is hidden ────────────────── */
@media (prefers-reduced-motion:reduce){
  html.pxm-js .hero .hero-grid{opacity:1!important;animation:none!important}
  .pxm-rv,.pxm-rs,.pxm-split .pxm-wi{opacity:1!important;translate:none!important;scale:none!important;transform:none!important;filter:none!important}
  .pxm-blob,.pxm-halo::before,.pxm-ring.pxm-on,.pxm-sheen-text.pxm-sweep{animation:none!important}
  .pxm-sheen-text{-webkit-text-fill-color:currentColor;background:none}
}