/* ==========================================================================
   Giftinzo V10.0 — Seller header / hero: "liquid-light glass engine"
   Everything is scoped to .gpl-sell-hero; every keyframe is prefixed gpl.
   Scene units: desktop stage 1000 × 640, phone stage 400 × 460 — one unit is
   var(--u) (container-query width, overridden in px by sell-hero.js).
   One shared demonstration cycle: --cyc (12 s). Cards 1–4 take turns feeding
   the engine (48 s super-cycle). Static under prefers-reduced-motion / .is-static,
   frozen under .is-paused.
   ========================================================================== */
.gpl-sell-hero{--gpl-bg:#030b08;--gpl-surface:#0b1913;--gpl-surface-raised:#10241b;--gpl-lime:#12CFFF;--gpl-lime-hot:#9BD9FF;--gpl-emerald:#35D49A;--gpl-mint:#8A7CFF;
  --gpl-text:#f6f8f3;--gpl-muted:#b5c6bb;--gpl-border:rgba(155,217,255,.22);--gpl-gold:#f4be48;--cyc:12s;--px:0deg;--py:0deg;
  --gpl-disp:'Space Grotesk','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--gpl-font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  position:relative;isolation:isolate;overflow:hidden;color:var(--gpl-text);font-family:var(--gpl-font);
  background:radial-gradient(120% 90% at 78% 30%,#0b2418 0%,#06150e 38%,var(--gpl-bg) 72%);margin:0;padding:0}
.gpl-sell-hero *,.gpl-sell-hero *::before,.gpl-sell-hero *::after{box-sizing:border-box}
.gpl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- background: soft green lighting, faint grid, drifting dust ---------- */
.gpl-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gpl-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.gpl-bg .g1{width:52vw;height:52vw;max-width:900px;max-height:900px;left:44%;top:-8%;background:radial-gradient(circle,rgba(53,212,154,.32),rgba(53,212,154,0) 62%)}
.gpl-bg .g2{width:34vw;height:34vw;max-width:620px;max-height:620px;left:70%;top:36%;background:radial-gradient(circle,rgba(18,207,255,.16),rgba(18,207,255,0) 64%)}
.gpl-bg .g3{width:30vw;height:30vw;max-width:520px;max-height:520px;left:-8%;top:52%;background:radial-gradient(circle,rgba(138,124,255,.12),rgba(138,124,255,0) 64%);opacity:.5}
.gpl-bg .grid{position:absolute;inset:0;filter:none;opacity:.14;border-radius:0;
  background-image:linear-gradient(rgba(155,217,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(155,217,255,.35) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(60% 70% at 62% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(60% 70% at 62% 50%,#000 20%,transparent 100%)}
.gpl-bg .dot{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gpl-mint);opacity:0;left:var(--dx);top:var(--dy);
  box-shadow:0 0 10px 2px rgba(138,124,255,.6);animation:gplDust 9s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
@keyframes gplDust{0%,100%{opacity:0;transform:translateY(0)}20%{opacity:.6}50%{opacity:.25;transform:translateY(-26px)}80%{opacity:.5}}

/* ---------- layout ---------- */
.gpl-hero-in{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:48px 48px 30px;display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:16px 20px;align-items:center}
@media (min-width:1600px){.gpl-hero-in{padding-left:64px;padding-right:64px;padding-top:64px}}
.gpl-copy{position:relative;z-index:2;min-width:0;padding:8px 0 12px}

/* eyebrow */
.gpl-eyebrow{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 18px 0 14px;border-radius:999px;border:1px solid rgba(138,124,255,.35);background:rgba(7,18,34,.55);
  color:var(--gpl-mint);font:600 .74rem/1 var(--gpl-font);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.gpl-eyebrow .gp-ic{width:14px;height:14px;color:var(--gpl-lime);flex:0 0 auto}
.gpl-eyebrow i{font-style:normal;margin:0 8px;opacity:.55}

/* headline / lede */
.gpl-h1{margin:18px 0 0;font:800 clamp(38px,3.6vw,64px)/1.04 var(--gpl-disp);letter-spacing:-.035em;color:var(--gpl-text);text-wrap:balance}
.gpl-h1 em{font-style:normal;color:var(--gpl-lime);text-shadow:0 0 30px rgba(18,207,255,.25)}
.gpl-lede{margin:16px 0 0;max-width:560px;font-size:clamp(16px,1.15vw,18.5px);line-height:1.58;color:var(--gpl-muted)}

/* three benefit cards */
.gpl-feats{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gpl-feats li{min-height:96px;padding:13px 12px 12px;border-radius:18px;background:rgba(7,18,34,.72);border:1px solid var(--gpl-border);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 14px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-content:start}
.gpl-feats .ic{grid-row:1/3;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(53,212,154,.55),rgba(53,212,154,.16) 70%);border:1px solid rgba(53,212,154,.35);display:grid;place-items:center;color:var(--gpl-lime)}
.gpl-feats .ic .gp-ic{width:20px;height:20px}
.gpl-feats b{font:700 clamp(.84rem,.95vw,.95rem)/1.22 var(--gpl-font);color:var(--gpl-text);letter-spacing:-.01em}
.gpl-feats small{font-size:clamp(.72rem,.8vw,.8rem);line-height:1.3;color:var(--gpl-muted);margin-top:4px}

/* buttons */
.gpl-cta{display:flex;gap:16px;flex-wrap:wrap;margin:22px 0 0}
.gpl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:0 30px;border-radius:16px;font:700 1.08rem/1 var(--gpl-font);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease;user-select:none}
.gpl-btn .gp-ic,.gpl-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gpl-btn-lime{min-width:240px;background:var(--gpl-lime);color:#0b1408!important;box-shadow:0 10px 30px rgba(18,207,255,.28),0 2px 0 rgba(0,0,0,.2)}
.gpl-btn-lime:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(18,207,255,.4),0 2px 0 rgba(0,0,0,.2);background:var(--gpl-lime-hot)}
.gpl-btn-dark{background:rgba(7,18,34,.78);color:var(--gpl-text)!important;border:1px solid rgba(155,217,255,.3)}
.gpl-btn-dark .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--gpl-lime)}
.gpl-btn-dark:hover{border-color:rgba(18,207,255,.6)}
.gpl-btn:focus-visible{outline:3px solid var(--gpl-lime);outline-offset:3px}

/* proof row (real data only) */
.gpl-proof{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:20px 0 0;color:var(--gpl-muted);font-size:.9rem}
.gpl-rating{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center}
.gpl-rating .stars{display:inline-flex;gap:3px}
.gpl-rating .stars i{width:16px;height:16px;background:rgba(255,255,255,.14);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z'/></svg>") center/contain no-repeat}
.gpl-rating .stars i.on{background:var(--gpl-lime)}
.gpl-rating .stars i.half{background:linear-gradient(90deg,var(--gpl-lime) 50%,rgba(255,255,255,.14) 50%)}
.gpl-rating b{font-size:1rem;color:var(--gpl-text)}
.gpl-rating small{grid-column:1/-1;font-size:.86rem}
.gpl-globe{display:flex;align-items:center;gap:10px;padding-left:22px;border-left:1px solid rgba(155,217,255,.25);line-height:1.35}
.gpl-globe .gp-ic{width:22px;height:22px;color:var(--gpl-mint);flex:0 0 auto}
.gpl-globe small{font-size:.86rem}
.gpl-proof .gpl-globe:first-child{padding-left:0;border-left:0}

/* ---------- the artwork ---------- */
.gpl-art{position:relative;z-index:1;min-width:0;container-type:inline-size;align-self:center;display:flex;flex-direction:column;justify-content:center}
.gpl-stage{position:relative;width:100%;aspect-ratio:1000/640;--u:0.1cqw;--sceneW:1000;perspective:calc(1900 * var(--u));perspective-origin:50% 46%}
.gpl-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--px)) rotateY(var(--py));transition:transform .35s ease-out}
.gpl-stage-foot{position:relative;z-index:9;display:flex;align-items:center;gap:14px;margin:6px 0 0;min-height:34px}
.gpl-legend{font-size:.72rem;letter-spacing:.02em;color:rgba(180,194,214,.7)}
.gpl-pause{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(155,217,255,.28);background:rgba(7,18,34,.7);color:var(--gpl-muted);font:600 .74rem/1 var(--gpl-font);cursor:pointer;z-index:9}
.gpl-pause:hover{color:var(--gpl-text);border-color:rgba(18,207,255,.5)}
.gpl-pause:focus-visible{outline:3px solid var(--gpl-lime);outline-offset:2px}
.gpl-pause .p{width:10px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.gpl-pause[aria-pressed=true] .p{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* streams (SVG overlays share the stage coordinate system) */
.gpl-defs{position:absolute;width:0;height:0;overflow:hidden}
.gpl-streams{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.gpl-back{z-index:2}.gpl-front{z-index:6}.gpl-streams-m{display:none;z-index:2}
.gpl-flow path,.gpl-out path,.gpl-ribbon path{fill:none;stroke-linecap:round}
.gpl-flow .halo{stroke:#35D49A;stroke-width:26;stroke-opacity:.16;filter:url(#gplHalo)}
.gpl-flow .body{stroke:url(#gplGrad);stroke-width:11;stroke-opacity:.42;animation:gplBreath 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.gpl-flow .core{stroke:#8A7CFF;stroke-width:3.2;stroke-opacity:.85;stroke-dasharray:26 58;animation:gplTravel 2.6s linear infinite;animation-delay:calc(var(--i) * -.55s)}
.gpl-flow .edge{stroke:#9BD9FF;stroke-width:.9;stroke-opacity:.35;stroke-dasharray:4 30;animation:gplTravel 3.4s linear infinite;animation-delay:calc(var(--i) * -.4s)}
@keyframes gplTravel{to{stroke-dashoffset:-84}}
@keyframes gplBreath{0%,100%{stroke-width:11}50%{stroke-width:13}}
/* the four cycle cards (1–4) brighten their stream while they feed the engine — 48 s super-cycle, 12 s per card */
.gpl-flow.f1 .core,.gpl-flow.f2 .core,.gpl-flow.f3 .core,.gpl-flow.f4 .core{animation:gplTravel 2.6s linear infinite,gplHot 48s linear infinite}
.gpl-flow.f1 .body,.gpl-flow.f2 .body,.gpl-flow.f3 .body,.gpl-flow.f4 .body{animation:gplBreath 5s ease-in-out infinite,gplHotBody 48s linear infinite}
.gpl-flow.f2 .core,.gpl-flow.f2 .body{animation-delay:-12s!important}.gpl-flow.f3 .core,.gpl-flow.f3 .body{animation-delay:-24s!important}.gpl-flow.f4 .core,.gpl-flow.f4 .body{animation-delay:-36s!important}
.gpl-flow.f1 .core,.gpl-flow.f1 .body{animation-delay:0s!important}
@keyframes gplHot{0%{stroke-opacity:.85;stroke:#8A7CFF}2%{stroke-opacity:1;stroke:#9BD9FF}8.3%{stroke-opacity:1;stroke:#9BD9FF}11%{stroke-opacity:.85;stroke:#8A7CFF}100%{stroke-opacity:.85;stroke:#8A7CFF}}
@keyframes gplHotBody{0%{stroke-opacity:.42}2%{stroke-opacity:.7}8.3%{stroke-opacity:.7}11%{stroke-opacity:.42}100%{stroke-opacity:.42}}
/* output bundle: gathers at 7 s, bright while the packet travels (7–10.5 s) */
.gpl-out .halo{stroke:#12CFFF;stroke-width:44;stroke-opacity:.12;filter:url(#gplHalo);animation:gplOutHalo var(--cyc) linear infinite}
.gpl-out .body{stroke:url(#gplGradOut);stroke-width:17;stroke-opacity:.5;animation:gplOutBody var(--cyc) linear infinite}
.gpl-out .core{stroke:#9BD9FF;stroke-width:4.4;stroke-opacity:.9;stroke-dasharray:22 40;animation:gplTravel 1.8s linear infinite,gplOutCore var(--cyc) linear infinite}
.gpl-out .edge{stroke:#fff;stroke-width:.9;stroke-opacity:.3;stroke-dasharray:3 26;animation:gplTravel 2.8s linear infinite}
@keyframes gplOutHalo{0%,55%{stroke-opacity:.12}62%,87%{stroke-opacity:.34}94%,100%{stroke-opacity:.12}}
@keyframes gplOutBody{0%,55%{stroke-opacity:.5}62%,87%{stroke-opacity:.9}94%,100%{stroke-opacity:.5}}
@keyframes gplOutCore{0%,55%{stroke-opacity:.9}62%,87%{stroke-opacity:1;stroke-width:5}94%,100%{stroke-opacity:.9;stroke-width:3.6}}
/* decorative ribbon behind the engine */
.gpl-ribbon .rb-halo{stroke:#35D49A;stroke-width:34;stroke-opacity:.14;filter:url(#gplHalo)}
.gpl-ribbon .rb-body{stroke:#35D49A;stroke-width:12;stroke-opacity:.35;stroke-dasharray:180 90;animation:gplRibbon 7s linear infinite}
.gpl-ribbon .rb-core{stroke:#8A7CFF;stroke-width:3;stroke-opacity:.7;stroke-dasharray:40 120;animation:gplRibbon 4.5s linear infinite}
@keyframes gplRibbon{to{stroke-dashoffset:-270}}
/* packets */
.gpl-packet .pk-core{fill:#fff}
.gpl-packet .pk-halo{fill:#8A7CFF;fill-opacity:.55;filter:url(#gplSoft)}
.gpl-packet.out .pk-halo{fill:#12CFFF}
.gpl-sparks circle{fill:#9BD9FF;opacity:0;animation:gplSpark var(--cyc) linear infinite}
.gpl-sparks circle:nth-child(1){animation-delay:0s}.gpl-sparks circle:nth-child(2){animation-delay:.15s}.gpl-sparks circle:nth-child(3){animation-delay:5.55s}
@keyframes gplSpark{0%,32%{opacity:0;transform:scale(1)}34%{opacity:1;transform:scale(2.2)}38%{opacity:0;transform:scale(1)}100%{opacity:0}}
.gpl-sparks circle{transform-box:fill-box;transform-origin:center}

/* ---------- floating brand cards ---------- */
.gpl-card{position:absolute;z-index:4;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(150 * var(--u));height:calc(94 * var(--u));margin:calc(-47 * var(--u)) 0 0 calc(-75 * var(--u));
  border-radius:calc(14 * var(--u));overflow:hidden;background:#111;transform:rotate(var(--r));
  box-shadow:0 calc(4 * var(--u)) 0 rgba(0,0,0,.55),0 calc(22 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25);
  animation:gplFloat var(--p) ease-in-out infinite;animation-delay:calc(-1 * var(--ph))}
.gpl-card img{display:block;width:100%;height:100%;object-fit:cover}
.gpl-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 66%,rgba(255,255,255,.12) 100%);pointer-events:none}
.gpl-card .edge{position:absolute;inset:0;border-radius:inherit;border:calc(2 * var(--u)) solid var(--gpl-lime);opacity:0;box-shadow:0 0 calc(24 * var(--u)) rgba(18,207,255,.7),inset 0 0 calc(18 * var(--u)) rgba(18,207,255,.35)}
.gpl-card.c1 .edge,.gpl-card.c2 .edge,.gpl-card.c3 .edge,.gpl-card.c4 .edge{animation:gplCardHot 48s linear infinite}
.gpl-card.c2 .edge{animation-delay:-12s}.gpl-card.c3 .edge{animation-delay:-24s}.gpl-card.c4 .edge{animation-delay:-36s}
@keyframes gplCardHot{0%{opacity:0}2.5%{opacity:1}8.3%{opacity:1}11%{opacity:0}100%{opacity:0}}
@keyframes gplFloat{0%,100%{transform:rotate(var(--r)) translate(0,0)}50%{transform:rotate(var(--r)) translate(3px,-8px)}}

/* ---------- the engine: plinth + glass cube (real CSS 3D) ---------- */
.gpl-engine{position:absolute;z-index:5;left:calc(522 * var(--u));top:calc(318 * var(--u));width:0;height:0;transform-style:preserve-3d;--W:calc(250 * var(--u));--H:calc(260 * var(--u));--D:calc(140 * var(--u))}
.gpl-plinth-glow{position:absolute;left:calc(-300 * var(--u));top:calc(120 * var(--u));width:calc(600 * var(--u));height:calc(150 * var(--u));border-radius:50%;background:radial-gradient(ellipse at center,rgba(18,207,255,.34),rgba(53,212,154,.16) 45%,rgba(53,212,154,0) 72%);filter:blur(calc(14 * var(--u)));animation:gplGlowPulse var(--cyc) ease-in-out infinite}
@keyframes gplGlowPulse{0%,55%,100%{opacity:.8}62%,80%{opacity:1.1}}
.gpl-plinth{position:absolute;left:calc(-236 * var(--u));top:calc(166 * var(--u));width:calc(520 * var(--u));height:calc(32 * var(--u));transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-26deg);--PW:calc(520 * var(--u));--PH:calc(32 * var(--u));--PD:calc(176 * var(--u))}
.gpl-plinth>span{position:absolute;display:block;backface-visibility:hidden}
.gpl-plinth .top{left:0;top:calc(50% - var(--PD) / 2);width:var(--PW);height:var(--PD);border-radius:calc(26 * var(--u));transform:rotateX(90deg) translateZ(calc(var(--PH) / 2));
  background:linear-gradient(160deg,#33473b 0%,#16241c 34%,#243328 62%,#0e1712 100%);box-shadow:inset 0 0 0 calc(2 * var(--u)) rgba(18,207,255,.6),inset 0 0 calc(60 * var(--u)) rgba(53,212,154,.3),inset 0 0 0 calc(12 * var(--u)) rgba(138,124,255,.06)}
.gpl-plinth .top::after{content:"";position:absolute;inset:calc(14 * var(--u));border-radius:calc(18 * var(--u));border:1px solid rgba(138,124,255,.35);background:radial-gradient(ellipse at 50% 50%,rgba(53,212,154,.18),rgba(53,212,154,0) 60%)}
.gpl-plinth .front{left:0;top:calc(50% - var(--PH) / 2);width:var(--PW);height:var(--PH);border-radius:calc(8 * var(--u));transform:translateZ(calc(var(--PD) / 2));background:linear-gradient(180deg,#22332a,#0b1510 70%,#1a271f);box-shadow:inset 0 1px 0 rgba(18,207,255,.55),inset 0 -1px 0 rgba(0,0,0,.6);display:grid;place-items:center}
.gpl-plinth .front b{font:700 calc(11 * var(--u))/1 var(--gpl-font);letter-spacing:.16em;text-transform:uppercase;color:rgba(155,217,255,.85);white-space:nowrap}
.gpl-plinth .front i{font-style:normal;color:var(--gpl-mint);margin:0 calc(6 * var(--u))}
.gpl-plinth .side{left:calc(50% - var(--PD) / 2);top:calc(50% - var(--PH) / 2);width:var(--PD);height:var(--PH);transform:rotateY(90deg) translateZ(calc(var(--PW) / 2));background:linear-gradient(180deg,#131e17,#070d09 80%);box-shadow:inset 0 1px 0 rgba(18,207,255,.35)}
.gpl-plinth .rim{left:0;top:calc(50% - var(--PD) / 2);width:var(--PW);height:var(--PD);border-radius:calc(26 * var(--u));transform:rotateX(90deg) translateZ(calc(var(--PH) / 2 + 1px));pointer-events:none;
  -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,linear-gradient(#000 0 0);mask-composite:exclude;padding:calc(3 * var(--u));
  background:conic-gradient(from var(--gplA,0deg),transparent 0 62%,#9BD9FF 70%,#8A7CFF 76%,transparent 84%);animation:gplRim 6s linear infinite}
.gpl-plinth .runner{left:0;top:calc(50% - var(--PD) / 2);width:var(--PW);height:var(--PD);border-radius:calc(26 * var(--u));transform:rotateX(90deg) translateZ(calc(var(--PH) / 2 + 2px));background:radial-gradient(ellipse at 50% 50%,rgba(18,207,255,.2),rgba(18,207,255,0) 55%);animation:gplGlowPulse var(--cyc) ease-in-out infinite}
@property --gplA{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes gplRim{to{--gplA:360deg}}

.gpl-cube{position:absolute;left:calc(var(--W) / -2);top:calc(-152 * var(--u));width:var(--W);height:var(--H);transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-26deg) translateY(0);animation:gplCubeFloat 7s ease-in-out infinite}
@keyframes gplCubeFloat{0%,100%{transform:rotateX(-20deg) rotateY(-26deg) translateY(0)}50%{transform:rotateX(-20deg) rotateY(-24.5deg) translateY(calc(-5 * var(--u)))}}
.gpl-cube .face{position:absolute;left:0;top:0;width:var(--W);height:var(--H);border-radius:calc(12 * var(--u));border:1px solid rgba(138,124,255,.5);
  background:linear-gradient(160deg,rgba(60,150,105,.3),rgba(8,30,20,.62) 55%,rgba(53,212,154,.2));box-shadow:inset 0 0 calc(40 * var(--u)) rgba(53,212,154,.22),inset 0 0 0 1px rgba(255,255,255,.07),0 0 calc(18 * var(--u)) rgba(53,212,154,.12)}
.gpl-cube .front{transform:translateZ(calc(var(--D) / 2));background:linear-gradient(160deg,rgba(90,190,140,.2),rgba(5,14,30,.5) 50%,rgba(53,212,154,.14));overflow:hidden}
.gpl-cube .back{transform:translateZ(calc(var(--D) / -2)) rotateY(180deg);background:linear-gradient(160deg,rgba(5,14,30,.85),rgba(10,40,26,.9));overflow:hidden}
.gpl-cube .left{width:var(--D);left:calc((var(--W) - var(--D)) / 2);transform:rotateY(-90deg) translateZ(calc(var(--W) / 2));background:linear-gradient(180deg,rgba(53,212,154,.18),rgba(5,14,30,.7))}
.gpl-cube .right{width:var(--D);left:calc((var(--W) - var(--D)) / 2);transform:rotateY(90deg) translateZ(calc(var(--W) / 2));background:linear-gradient(180deg,rgba(5,14,30,.7),rgba(53,212,154,.12))}
.gpl-cube .top{height:var(--D);top:calc((var(--H) - var(--D)) / 2);transform:rotateX(90deg) translateZ(calc(var(--H) / 2));background:linear-gradient(160deg,rgba(138,124,255,.34),rgba(53,212,154,.12) 60%,rgba(5,14,30,.5))}
.gpl-cube .bottom{height:var(--D);top:calc((var(--H) - var(--D)) / 2);transform:rotateX(-90deg) translateZ(calc(var(--H) / 2));background:rgba(4,14,9,.9)}
.gpl-cube .core-light{position:absolute;left:8%;top:8%;width:84%;height:84%;border-radius:50%;transform:translateZ(0);background:radial-gradient(circle at 50% 55%,rgba(155,217,255,.55),rgba(138,124,255,.4) 30%,rgba(53,212,154,.18) 55%,transparent 72%);filter:blur(calc(10 * var(--u)));animation:gplCoreLight var(--cyc) ease-in-out infinite}
@keyframes gplCoreLight{0%,30%{opacity:.6;transform:translateZ(0) scale(.92)}36%,56%{opacity:1;transform:translateZ(0) scale(1.06)}62%,74%{opacity:.85}88%,100%{opacity:.6;transform:translateZ(0) scale(.92)}}
.gpl-cube .frame{position:absolute;inset:calc(-2 * var(--u));border-radius:calc(14 * var(--u));transform:translateZ(calc(var(--D) / 2 + 1px));pointer-events:none;padding:calc(2.5 * var(--u));
  -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,linear-gradient(#000 0 0);mask-composite:exclude;
  background:conic-gradient(from var(--gplA,0deg),rgba(138,124,255,.25) 0 40%,#9BD9FF 48%,#8A7CFF 54%,rgba(138,124,255,.25) 62% 100%);animation:gplRim 5s linear infinite;box-shadow:0 0 calc(30 * var(--u)) rgba(18,207,255,.25)}
/* internal circuitry (back face) */
.gpl-cube .circuit{position:absolute;inset:8%;width:84%;height:84%;overflow:visible}
.gpl-cube .circuit path{fill:none;stroke:#35D49A;stroke-width:2;stroke-opacity:.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18 22;animation:gplTravel 2.2s linear infinite}
.gpl-cube .circuit .c2{animation-duration:2.9s;animation-direction:reverse;stroke:#8A7CFF}
.gpl-cube .circuit .c3{animation-duration:3.6s;stroke:#12CFFF;stroke-opacity:.5}
.gpl-cube .circuit circle{fill:#9BD9FF;opacity:.7;animation:gplNode var(--cyc) ease-in-out infinite}
.gpl-cube .circuit circle:nth-of-type(2){animation-delay:.25s}.gpl-cube .circuit circle:nth-of-type(3){animation-delay:.5s}.gpl-cube .circuit circle:nth-of-type(4){animation-delay:.75s}
@keyframes gplNode{0%,32%{opacity:.5;r:4}35%{opacity:1;r:7}50%{opacity:.6;r:4}100%{opacity:.5}}
/* inlets on the left face light when a packet arrives (4 s) */
.gpl-cube .inlet{position:absolute;left:8%;right:8%;height:calc(9 * var(--u));border-radius:999px;background:radial-gradient(ellipse at center,#9BD9FF,rgba(138,124,255,.35) 55%,transparent 75%);opacity:.22;animation:gplInlet var(--cyc) ease-out infinite}
.gpl-cube .inlet.i1{top:26%}.gpl-cube .inlet.i2{top:40%;animation-delay:.05s}.gpl-cube .inlet.i3{top:54%;animation-delay:.1s}.gpl-cube .inlet.i4{top:68%;animation-delay:.15s}
@keyframes gplInlet{0%,31%{opacity:.22;box-shadow:none}34%{opacity:1;box-shadow:0 0 calc(24 * var(--u)) rgba(155,217,255,.9)}46%{opacity:.4}58%,100%{opacity:.22;box-shadow:none}}
.gpl-cube .outlet{position:absolute;left:14%;right:14%;top:44%;height:calc(12 * var(--u));border-radius:999px;background:radial-gradient(ellipse at center,#9BD9FF,rgba(18,207,255,.4) 55%,transparent 76%);opacity:.25;animation:gplOutlet var(--cyc) ease-out infinite}
@keyframes gplOutlet{0%,55%{opacity:.25;box-shadow:none}60%{opacity:1;box-shadow:0 0 calc(26 * var(--u)) rgba(18,207,255,.9)}75%{opacity:.9}88%,100%{opacity:.25;box-shadow:none}}
/* review scan (4–7 s) */
.gpl-cube .scan{position:absolute;left:5%;right:5%;height:16%;top:-22%;border-radius:999px;background:linear-gradient(180deg,rgba(18,207,255,0),rgba(18,207,255,.5) 45%,rgba(138,124,255,.22));filter:blur(calc(3 * var(--u)));opacity:0;animation:gplScan var(--cyc) linear infinite}
@keyframes gplScan{0%,33%{top:-22%;opacity:0}36%{opacity:1}56%{opacity:1}58%{top:104%;opacity:0}100%{top:104%;opacity:0}}
/* badge + state label */
.gpl-cube .badge{position:absolute;left:50%;top:44%;width:calc(154 * var(--u));height:calc(112 * var(--u));margin:calc(-56 * var(--u)) 0 0 calc(-77 * var(--u));border-radius:calc(20 * var(--u));background:linear-gradient(160deg,#131a15,#0a0f0b);border:1px solid rgba(155,217,255,.28);box-shadow:0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6 * var(--u))}
.gpl-cube .badge .gp-mark{width:calc(46 * var(--u));height:calc(46 * var(--u))}
.gpl-cube .badge b{font:800 calc(22 * var(--u))/1 var(--gpl-disp);color:#fff;letter-spacing:-.02em}
.gpl-cube .badge b em{font-style:normal;color:var(--gpl-lime)}
.gpl-cube .state{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);height:calc(22 * var(--u));min-width:calc(160 * var(--u));border-radius:999px;background:rgba(7,18,34,.85);border:1px solid rgba(138,124,255,.35);font:600 calc(10.5 * var(--u))/calc(22 * var(--u)) var(--gpl-font);letter-spacing:.06em;text-transform:uppercase;color:var(--gpl-mint);text-align:center;white-space:nowrap;padding:0 calc(12 * var(--u))}
.gpl-cube .state i{position:absolute;left:0;right:0;top:0;font-style:normal;opacity:0;animation:gplState var(--cyc) linear infinite}
.gpl-cube .state .s1{--a:.166;--b:.33}.gpl-cube .state .s2{--a:.335;--b:.58;color:#9BD9FF}.gpl-cube .state .s3{--a:.585;--b:.875;color:#12CFFF}
@keyframes gplState{0%,100%{opacity:0}}
.gpl-cube .state .s1{animation-name:gplS1}.gpl-cube .state .s2{animation-name:gplS2}.gpl-cube .state .s3{animation-name:gplS3}
@keyframes gplS1{0%,16%{opacity:0}18%,31%{opacity:1}33%,100%{opacity:0}}
@keyframes gplS2{0%,33%{opacity:0}35%,56%{opacity:1}58%,100%{opacity:0}}
@keyframes gplS3{0%,58%{opacity:0}60%,86%{opacity:1}88%,100%{opacity:0}}

/* ---------- coins ---------- */
.gpl-coin{position:absolute;z-index:6;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ffe9a3,#f4be48 46%,#a8771f);box-shadow:inset 0 calc(-4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.35),inset 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(255,255,255,.55),0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.5);animation:gplCoin 6s ease-in-out infinite}
.gpl-coin img{width:76%;height:76%;border-radius:50%;box-shadow:0 0 0 calc(2 * var(--u)) rgba(0,0,0,.18)}
.gpl-coin.btc{left:calc(832 * var(--u));top:calc(66 * var(--u));width:calc(72 * var(--u));height:calc(72 * var(--u));margin:calc(-36 * var(--u)) 0 0 calc(-36 * var(--u))}
.gpl-coin.usdt{left:calc(914 * var(--u));top:calc(116 * var(--u));width:calc(56 * var(--u));height:calc(56 * var(--u));margin:calc(-28 * var(--u)) 0 0 calc(-28 * var(--u));background:radial-gradient(circle at 35% 30%,#b8fff0,#26a17b 48%,#146b53);animation-delay:-2s}
.gpl-coin.eth{left:calc(772 * var(--u));top:calc(118 * var(--u));width:calc(48 * var(--u));height:calc(48 * var(--u));margin:calc(-24 * var(--u)) 0 0 calc(-24 * var(--u));background:radial-gradient(circle at 35% 30%,#ffffff,#b9c6ff 48%,#5b6bb5);animation-delay:-4s}
@keyframes gplCoin{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(calc(-8 * var(--u))) rotate(4deg)}}

/* ---------- illustrated wallet panel ---------- */
.gpl-wallet{position:absolute;z-index:7;left:calc(748 * var(--u));top:calc(160 * var(--u));width:calc(250 * var(--u));min-height:calc(282 * var(--u));padding:calc(20 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));border-radius:calc(24 * var(--u));
  background:linear-gradient(160deg,rgba(16,36,27,.94),rgba(7,20,14,.97));border:1px solid rgba(138,124,255,.38);
  box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(53,212,154,.14);
  display:flex;flex-direction:column;animation:gplWalletFloat 6.5s ease-in-out infinite,gplWalletPulse var(--cyc) ease-out infinite}
@keyframes gplWalletFloat{0%,100%{translate:0 0}50%{translate:0 calc(-4 * var(--u))}}
@keyframes gplWalletPulse{0%,74%{box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(53,212,154,.14);border-color:rgba(138,124,255,.38)}
  78%,86%{box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2),0 0 0 calc(3 * var(--u)) rgba(18,207,255,.45),0 0 calc(50 * var(--u)) rgba(18,207,255,.45);border-color:#9BD9FF}
  92%,100%{box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(53,212,154,.14);border-color:rgba(138,124,255,.38)}}
.gpl-wallet .ok{position:absolute;left:calc(18 * var(--u));top:calc(18 * var(--u));width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:50%;background:var(--gpl-emerald);color:#04150c;display:grid;place-items:center;box-shadow:0 0 0 calc(4 * var(--u)) rgba(53,212,154,.18);animation:gplOk var(--cyc) ease-out infinite}
.gpl-wallet .ok .gp-ic{width:60%;height:60%;stroke-width:3}
@keyframes gplOk{0%,76%{transform:scale(1);box-shadow:0 0 0 calc(4 * var(--u)) rgba(53,212,154,.18)}79%{transform:scale(1.28);box-shadow:0 0 0 calc(10 * var(--u)) rgba(53,212,154,.35),0 0 calc(30 * var(--u)) rgba(18,207,255,.6)}84%{transform:scale(1)}100%{transform:scale(1);box-shadow:0 0 0 calc(4 * var(--u)) rgba(53,212,154,.18)}}
.gpl-wallet .k{margin-left:calc(40 * var(--u));min-height:calc(30 * var(--u));display:flex;align-items:center;font:700 max(8px,calc(11 * var(--u)))/1.1 var(--gpl-font);letter-spacing:.14em;text-transform:uppercase;color:var(--gpl-lime);white-space:nowrap}
.gpl-wallet .amt{display:block;margin:calc(12 * var(--u)) 0 0;font:800 max(22px,calc(40 * var(--u)))/1 var(--gpl-disp);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.gpl-wallet .s{display:block;margin:calc(6 * var(--u)) 0 calc(14 * var(--u));font-size:max(10px,calc(12 * var(--u)));line-height:1.35;color:var(--gpl-muted)}
.gpl-wallet .s span{color:rgba(180,194,214,.65);font-size:.86em;letter-spacing:.02em}
.gpl-wallet .row{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:calc(42 * var(--u));margin-top:calc(10 * var(--u));padding:0 calc(12 * var(--u));border-radius:calc(12 * var(--u));border:1px solid rgba(138,124,255,.35);background:rgba(53,212,154,.08);font:600 max(9px,calc(13 * var(--u)))/1 var(--gpl-font);color:var(--gpl-text);white-space:nowrap;overflow:hidden}
.gpl-wallet .row.alt{border-color:rgba(244,190,72,.35);background:rgba(244,190,72,.06)}
.gpl-wallet .row .ic{width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;display:grid;place-items:center;background:rgba(138,124,255,.14);color:var(--gpl-mint);flex:0 0 auto}
.gpl-wallet .row.alt .ic{background:rgba(244,190,72,.14)}
.gpl-wallet .row .ic .gp-ic{width:60%;height:60%}
.gpl-wallet .row .ic img{width:70%;height:70%}

/* ---------- handwritten notes + decorative phone (wide desktop only) ---------- */
.gpl-note,.gpl-phone{display:none}
@media (min-width:1440px){
  .gpl-note{display:block;position:absolute;z-index:8;font:600 calc(21 * var(--u))/1.05 'Caveat',cursive;color:var(--gpl-lime);opacity:.95;pointer-events:none}
  .gpl-note.n1{left:calc(690 * var(--u));top:calc(448 * var(--u));transform:translateZ(calc(120 * var(--u))) rotate(-8deg)}
  .gpl-note.n1 .arr{position:absolute;left:calc(52 * var(--u));top:calc(70 * var(--u));width:calc(48 * var(--u));height:calc(48 * var(--u));fill:none;stroke:var(--gpl-lime);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .gpl-note.n2{left:calc(214 * var(--u));top:calc(556 * var(--u));transform:translateZ(calc(120 * var(--u))) rotate(-6deg);font-size:calc(24 * var(--u))}
  .gpl-phone{display:block;position:absolute;z-index:8;left:calc(846 * var(--u));top:calc(424 * var(--u));width:calc(122 * var(--u));height:calc(232 * var(--u));padding:calc(5 * var(--u));border-radius:calc(20 * var(--u));background:linear-gradient(160deg,#2b332c,#0b0f0c);
    box-shadow:0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.12);transform:translateZ(calc(130 * var(--u))) rotate(-12deg);animation:gplPhone 7.5s ease-in-out infinite}
  @keyframes gplPhone{0%,100%{transform:translateZ(calc(130 * var(--u))) rotate(-12deg) translateY(0)}50%{transform:translateZ(calc(130 * var(--u))) rotate(-11deg) translateY(calc(-5 * var(--u)))}}
  .gpl-phone .in{position:relative;height:100%;border-radius:calc(16 * var(--u));overflow:hidden;background:radial-gradient(120% 80% at 70% 20%,#0d2418,#050b08 60%);padding:calc(10 * var(--u)) calc(9 * var(--u));display:flex;flex-direction:column;gap:calc(5 * var(--u))}
  .gpl-phone .bar{display:flex;align-items:center;gap:calc(3 * var(--u));font:800 calc(7 * var(--u))/1 var(--gpl-disp);color:#fff}
  .gpl-phone .bar .gp-mark{width:calc(9 * var(--u));height:calc(9 * var(--u))}
  .gpl-phone .bar em{font-style:normal;color:var(--gpl-lime)}
  .gpl-phone .bar i{margin-left:auto;width:calc(8 * var(--u));height:calc(6 * var(--u));border-top:1px solid #9fb;border-bottom:1px solid #9fb}
  .gpl-phone .eb{display:inline-flex;align-items:center;gap:calc(2 * var(--u));align-self:flex-start;padding:calc(2 * var(--u)) calc(5 * var(--u));border-radius:999px;border:1px solid rgba(138,124,255,.35);color:var(--gpl-mint);font:600 calc(4.6 * var(--u))/1 var(--gpl-font);letter-spacing:.08em;text-transform:uppercase}
  .gpl-phone .eb .gp-ic{width:calc(5 * var(--u));height:calc(5 * var(--u))}
  .gpl-phone strong{font:800 calc(11 * var(--u))/1.08 var(--gpl-disp);color:#fff;letter-spacing:-.02em}
  .gpl-phone strong em{font-style:normal;color:var(--gpl-lime)}
  .gpl-phone p{margin:0;font-size:calc(5 * var(--u));line-height:1.35;color:var(--gpl-muted)}
  .gpl-phone .btn{display:block;text-align:center;padding:calc(5 * var(--u)) 0;border-radius:calc(6 * var(--u));background:var(--gpl-lime);color:#0b1408;font:700 calc(6 * var(--u))/1 var(--gpl-font)}
  .gpl-phone .mini{position:relative;flex:1;border-radius:calc(8 * var(--u));background:radial-gradient(circle at 50% 60%,rgba(53,212,154,.35),rgba(5,14,30,.2) 60%);display:grid;place-items:center;margin-top:calc(2 * var(--u))}
  .gpl-phone .mini i{position:absolute;inset:18% 26%;border-radius:calc(4 * var(--u));border:1px solid rgba(138,124,255,.5);background:rgba(53,212,154,.12);transform:rotateX(-10deg) rotateY(-26deg)}
  .gpl-phone .mini .gp-mark{position:relative;width:calc(14 * var(--u));height:calc(14 * var(--u))}
  .gpl-phone .coins{display:flex;justify-content:space-around;padding-top:calc(2 * var(--u))}
  .gpl-phone .coins img{width:calc(9 * var(--u));height:calc(9 * var(--u))}
}

/* ---------- compact process strip (inside the header) ---------- */
.gpl-steps{grid-column:1/-1;position:relative;list-style:none;margin:8px 0 0;padding:16px 22px;border-radius:20px;background:rgba(7,18,34,.72);border:1px solid var(--gpl-border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px}
.gpl-step{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:10px;padding-right:26px;min-width:0}
.gpl-step .n{width:28px;height:28px;border-radius:50%;border:1px solid rgba(155,217,255,.35);background:rgba(5,14,30,.7);display:grid;place-items:center;font:700 .8rem/1 var(--gpl-font);color:var(--gpl-muted)}
.gpl-step .tile{width:46px;height:46px;border-radius:13px;background:rgba(53,212,154,.14);border:1px solid rgba(53,212,154,.3);display:grid;place-items:center;color:var(--gpl-lime);animation:var(--stepAnim,none) var(--cyc) linear infinite}
.gpl-step .tile svg,.gpl-step .tile .gp-ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gpl-step .t{display:flex;flex-direction:column;min-width:0}
.gpl-step .t b{font:700 .92rem/1.2 var(--gpl-font);color:var(--gpl-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gpl-step .t small{font-size:.76rem;line-height:1.3;color:var(--gpl-muted);margin-top:3px}
.gpl-step .arrow{position:absolute;right:2px;top:50%;width:14px;height:14px;margin-top:-7px;border-right:2px solid rgba(155,217,255,.45);border-top:2px solid rgba(155,217,255,.45);transform:rotate(45deg) scale(.8)}
.gpl-step:nth-child(1) .tile{--stepAnim:gplStep1}.gpl-step:nth-child(2) .tile{--stepAnim:gplStep2}.gpl-step:nth-child(3) .tile{--stepAnim:gplStep3}.gpl-step:nth-child(4) .tile{--stepAnim:gplStep4}
@keyframes gplStep1{0%,1%{background:rgba(53,212,154,.14);box-shadow:none}3%,15%{background:rgba(18,207,255,.32);box-shadow:0 0 22px rgba(18,207,255,.45);border-color:#9BD9FF}18%,100%{background:rgba(53,212,154,.14);box-shadow:none}}
@keyframes gplStep2{0%,16%{background:rgba(53,212,154,.14);box-shadow:none}19%,31%{background:rgba(18,207,255,.32);box-shadow:0 0 22px rgba(18,207,255,.45);border-color:#9BD9FF}34%,100%{background:rgba(53,212,154,.14);box-shadow:none}}
@keyframes gplStep3{0%,33%{background:rgba(53,212,154,.14);box-shadow:none}36%,56%{background:rgba(18,207,255,.32);box-shadow:0 0 22px rgba(18,207,255,.45);border-color:#9BD9FF}59%,100%{background:rgba(53,212,154,.14);box-shadow:none}}
@keyframes gplStep4{0%,58%{background:rgba(53,212,154,.14);box-shadow:none}61%,86%{background:rgba(18,207,255,.32);box-shadow:0 0 22px rgba(18,207,255,.45);border-color:#9BD9FF}89%,100%{background:rgba(53,212,154,.14);box-shadow:none}}
.gpl-steps-note{position:absolute;left:18px;top:-11px;padding:3px 10px;border-radius:999px;background:#0b1913;border:1px solid var(--gpl-border);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(180,194,214,.75)}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .gpl-hero-in{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:44px}
  .gpl-copy{max-width:720px}
  .gpl-art{max-width:880px;width:100%;margin:0 auto}
  .gpl-h1{font-size:clamp(38px,5.6vw,58px)}
  .gpl-steps{margin-top:14px}
}
@media (max-width:1100px){
  .gpl-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:18px 18px 16px}
  .gpl-step{padding-right:0}.gpl-step .arrow{display:none}
}
@media (max-width:900px){
  .gpl-feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .gpl-feats li{padding:12px}
}
@media (max-width:767px){
  .gpl-hero-in{display:flex;flex-direction:column;gap:0;padding:26px 20px 26px}
  .gpl-copy{display:contents}
  .gpl-eyebrow{order:1;align-self:flex-start;white-space:normal;line-height:1.5;min-height:36px;padding:6px 14px 6px 12px;font-size:.6rem;letter-spacing:.1em}
  .gpl-eyebrow span{text-wrap:balance}
  .gpl-h1{order:2;margin-top:18px;font-size:clamp(34px,10.4vw,42px);line-height:1.06}
  .gpl-h1 br{display:none}
  .gpl-lede{order:3;margin-top:14px;font-size:16px}
  .gpl-cta{order:4;flex-direction:column;gap:11px;margin-top:20px}
  .gpl-btn{width:100%;min-height:54px;font-size:1rem}
  .gpl-art{order:5;margin:22px 0 0;width:100%}
  .gpl-stage{aspect-ratio:400/460;--u:0.25cqw;--sceneW:400;perspective:calc(1500 * var(--u))}
  .gpl-feats{order:6;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:26px}
  .gpl-feats li{min-height:0;grid-template-rows:auto auto;grid-template-columns:36px minmax(0,1fr);align-items:center;padding:9px 12px;border-radius:14px}
  .gpl-feats .ic{grid-row:1/3;width:36px;height:36px}
  .gpl-feats b{font-size:.9rem}
  .gpl-feats small{margin-top:2px;font-size:.76rem}
  .gpl-proof{order:7;margin-top:16px;gap:14px}
  .gpl-globe{padding-left:14px}
  .gpl-steps{order:8;margin-top:18px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px;padding:18px 14px 14px}
  .gpl-step{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
  .gpl-step .n{position:absolute;left:0;top:0;width:20px;height:20px;font-size:.66rem;z-index:1}
  .gpl-step .tile{width:40px;height:40px;grid-row:1/3}
  .gpl-step .t b{white-space:normal;font-size:.84rem}
  .gpl-step .t small{font-size:.72rem}
  .gpl-steps-note{left:10px;font-size:.6rem}
  .gpl-legend{font-size:.66rem}
  .gpl-pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .gpl-pause{min-width:32px;justify-content:center;padding:0;margin-left:auto}
  /* ---- phone scene (400 × 460): four cards across the top, compact engine, wallet lower-right ---- */
  .gpl-streams-d{display:none}.gpl-streams-m{display:block}
  .gpl-ribbon,.gpl-coin.eth,.gpl-card.c5,.gpl-card.c6,.gpl-card.c7,.gpl-card.c8{display:none}
  .gpl-card{left:calc(var(--mx) * var(--u));top:calc(var(--my) * var(--u));width:calc(104 * var(--u));height:calc(65 * var(--u));margin:calc(-32.5 * var(--u)) 0 0 calc(-52 * var(--u));--r:var(--mr);border-radius:calc(11 * var(--u))}
  .gpl-engine{left:calc(128 * var(--u));top:calc(214 * var(--u));--W:calc(140 * var(--u));--H:calc(148 * var(--u));--D:calc(80 * var(--u))}
  .gpl-cube{top:calc(-92 * var(--u))}
  .gpl-cube .face{border-radius:calc(14 * var(--u))}
  .gpl-cube .badge{width:calc(96 * var(--u));height:calc(70 * var(--u));margin:calc(-35 * var(--u)) 0 0 calc(-48 * var(--u));border-radius:calc(13 * var(--u))}
  .gpl-cube .badge .gp-mark{width:calc(28 * var(--u));height:calc(28 * var(--u))}
  .gpl-cube .badge b{font-size:calc(14 * var(--u))}
  .gpl-cube .state{min-width:calc(112 * var(--u));height:calc(18 * var(--u));font-size:max(7px,calc(8 * var(--u)));line-height:calc(18 * var(--u))}
  .gpl-plinth{left:calc(-100 * var(--u));top:calc(82 * var(--u));width:calc(190 * var(--u));height:calc(20 * var(--u));--PW:calc(190 * var(--u));--PH:calc(20 * var(--u));--PD:calc(88 * var(--u))}
  .gpl-plinth .front b{font-size:max(5.5px,calc(6.2 * var(--u)));letter-spacing:.08em}
  .gpl-plinth-glow{left:calc(-140 * var(--u));top:calc(70 * var(--u));width:calc(280 * var(--u));height:calc(90 * var(--u))}
  .gpl-coin.btc{left:calc(296 * var(--u));top:calc(232 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u));margin:calc(-22 * var(--u)) 0 0 calc(-22 * var(--u))}
  .gpl-coin.usdt{left:calc(350 * var(--u));top:calc(256 * var(--u));width:calc(34 * var(--u));height:calc(34 * var(--u));margin:calc(-17 * var(--u)) 0 0 calc(-17 * var(--u))}
  .gpl-wallet{left:calc(236 * var(--u));top:calc(290 * var(--u));width:calc(162 * var(--u));min-height:0;padding:calc(12 * var(--u)) calc(11 * var(--u)) calc(10 * var(--u));border-radius:calc(14 * var(--u))}
  .gpl-wallet .ok{left:calc(10 * var(--u));top:calc(10 * var(--u));width:calc(22 * var(--u));height:calc(22 * var(--u))}
  .gpl-wallet .k{margin-left:calc(28 * var(--u));min-height:calc(22 * var(--u));font-size:max(6.5px,calc(8 * var(--u)));letter-spacing:.08em}
  .gpl-wallet .amt{margin-top:calc(8 * var(--u));font-size:max(16px,calc(24 * var(--u)))}
  .gpl-wallet .s{margin:calc(4 * var(--u)) 0 calc(6 * var(--u));font-size:max(8px,calc(9 * var(--u)))}
  .gpl-wallet .s span{display:none}
  .gpl-wallet .row{min-height:calc(30 * var(--u));margin-top:calc(6 * var(--u));padding:0 calc(7 * var(--u));gap:calc(7 * var(--u));font-size:max(7.5px,calc(9.5 * var(--u)));border-radius:calc(8 * var(--u));white-space:nowrap}
  .gpl-wallet .row .ic{width:calc(18 * var(--u));height:calc(18 * var(--u))}
}
@media (max-width:360px){
  .gpl-wallet{left:calc(224 * var(--u));width:calc(174 * var(--u))}
  .gpl-wallet .row .ic{width:calc(15 * var(--u));height:calc(15 * var(--u))}
}
@media (max-width:340px){
  .gpl-hero-in{padding-left:16px;padding-right:16px}
  .gpl-steps{grid-template-columns:minmax(0,1fr)}
  .gpl-h1{font-size:32px}
}

/* ---------- pause / reduced motion / static still ---------- */
.gpl-sell-hero.is-paused *,.gpl-sell-hero.is-paused *::before,.gpl-sell-hero.is-paused *::after{animation-play-state:paused!important}
.gpl-sell-hero.is-static *,.gpl-sell-hero.is-static *::before,.gpl-sell-hero.is-static *::after{animation:none!important;transition:none!important}
.gpl-sell-hero.is-static .gpl-scene{transform:none}
.gpl-sell-hero.is-static .gpl-packet{display:none}
.gpl-sell-hero.is-static .gpl-cube .state .s2{opacity:1}
.gpl-sell-hero.is-static .gpl-flow .core{stroke-dasharray:none;stroke-opacity:.75}
.gpl-sell-hero.is-static .gpl-out .core{stroke-dasharray:none}
.gpl-sell-hero.is-static .gpl-cube .scan{opacity:.55;top:38%}
.gpl-sell-hero.is-static .gpl-bg .dot{opacity:.35}
.gpl-sell-hero.is-static .gpl-sparks{display:none}
@media (prefers-reduced-motion:reduce){
  .gpl-sell-hero:not(.is-motion) *,.gpl-sell-hero:not(.is-motion) *::before,.gpl-sell-hero:not(.is-motion) *::after{animation:none!important;transition:none!important}
  .gpl-sell-hero:not(.is-motion) .gpl-packet,.gpl-sell-hero:not(.is-motion) .gpl-sparks{display:none}
  .gpl-sell-hero:not(.is-motion) .gpl-cube .state .s2{opacity:1}
  .gpl-sell-hero:not(.is-motion) .gpl-flow .core,.gpl-sell-hero:not(.is-motion) .gpl-out .core{stroke-dasharray:none;stroke-opacity:.75}
  .gpl-sell-hero:not(.is-motion) .gpl-cube .scan{opacity:.55;top:38%}
}