/* =====================================================================
 * Hero stages and aurora (inc/scenes.php, assets/engine.js)
 *
 * Structure of a panel:  .sp (position + depth) > div (float) > .gl (panel)
 * Three layers, because position, the idle float and a pop-in each need
 * their own transform. Everything here renders with the first paint; the
 * entrance is CSS, so nothing waits for a script or an image.
 * ===================================================================== */

/* ---------- Hero layout with a stage ---------- */
.page-hero:has(.stage) .wrap,.hero:has(.stage) .wrap{position:relative;z-index:2}
.page-hero:has(.stage)::before,.page-hero:has(.stage)::after{opacity:.55}
.hero:has(.stage) .seam{display:none}

.stage{position:absolute;z-index:1;pointer-events:none;top:0;bottom:0;right:-2%;width:56%;display:flex;align-items:center;justify-content:center;perspective:1500px;perspective-origin:50% 38%}
.hero .stage{top:80px;bottom:96px}
.stage-3d{position:relative;width:620px;height:520px;flex:none;transform-style:preserve-3d;transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-14deg))}

@media (min-width:900px){
  .page-hero:has(.stage) .wrap{min-height:clamp(600px,74vh,720px);display:flex;flex-direction:column;justify-content:center}
  .page-hero:has(.stage) .wrap>*:not(.stage){max-width:min(560px,42vw)}
  .page-hero:has(.stage) h1{font-size:clamp(34px,4vw,54px)}
  .hero:has(.stage) .wrap{min-height:clamp(660px,92vh,900px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .hero:has(.stage) .wrap>*:not(.hero-strip):not(.stage){max-width:min(560px,42vw)}
  .hero:has(.stage) h1{font-size:clamp(44px,5.2vw,78px)}
  .hero:has(.stage) .hero-strip{align-self:stretch}
  /* Start the stage where the text column ends, so a panel never sits on the
     headline; it may run into the right margin, which the hero clips. */
  .stage{left:calc(min(560px,42vw) + 28px);right:-10%;width:auto}
  /* Centre the scene in the hero below the fixed menu bar, not behind it. */
  .page-hero .stage{top:var(--nav-h)}
}
@media (max-width:1280px){.stage-3d{scale:.88}}
@media (max-width:1120px){.stage-3d{scale:.76}}
@media (max-width:980px){.stage-3d{scale:.68}}

/* ---------- Panels ---------- */
.sp{position:absolute;left:var(--x);top:var(--y);transform:translate3d(0,0,var(--z,0px));transform-style:preserve-3d;opacity:0;animation:sp-in 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0) * .11s + .08s)}
.sp>div{animation:fl 7s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes sp-in{from{opacity:0;transform:translate3d(0,46px,calc(var(--z,0px) - 140px))}to{opacity:1;transform:translate3d(0,0,var(--z,0px))}}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.gl{position:relative;border-radius:16px;padding:14px 16px;background:linear-gradient(155deg,rgba(42,68,118,.62),rgba(13,19,33,.84));border:1px solid rgba(140,180,255,.2);box-shadow:0 44px 70px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.13);color:#EAF1FF;font-family:var(--f-body);font-size:12.5px;line-height:1.35}
.gl::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.11),transparent 40%)}
.stage-home .gl{background:linear-gradient(155deg,rgba(20,44,108,.86),rgba(7,17,50,.92));border-color:rgba(255,255,255,.22)}

.uh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px;font-weight:600;font-size:12.5px;color:#fff;position:relative}
.uh small{font-weight:500;font-size:11px;color:rgba(234,241,255,.58)}
.pl{display:inline-flex;align-items:center;gap:5px;font:500 10px var(--f-mono);letter-spacing:.05em;padding:3px 8px;border-radius:100px;background:rgba(255,255,255,.08);color:rgba(234,241,255,.75);white-space:nowrap}
.pl.live,.pl.ok{background:rgba(62,207,142,.16);color:#5FE0A6}
.pl.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#5FE0A6;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

.kp{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;margin-bottom:12px}
.kp>div{background:rgba(255,255,255,.055);border-radius:10px;padding:9px 11px}
.kp b{display:block;font:700 17px var(--f-disp);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.kp em{font-style:normal;font-size:10.5px;color:rgba(234,241,255,.6)}
.bars{display:flex;align-items:flex-end;gap:5px;height:58px}
.bars.sm{height:34px;margin-top:8px}
.bars i{flex:1;height:var(--h);border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#6AABFF,rgba(47,125,246,.32))}
.bars i.grow{height:16%;transition:height .9s cubic-bezier(.2,.7,.2,1)}
.bars i.grow.on{height:var(--h);background:linear-gradient(180deg,#fff,#5AA0FF)}
.ft{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:11px;color:rgba(234,241,255,.65)}
.ft::before{content:"";width:7px;height:7px;border-radius:50%;background:#5FE0A6;box-shadow:0 0 8px #5FE0A6}
.rw{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:rgba(234,241,255,.75)}
.rw b{display:inline-flex;align-items:center;color:#fff;font:500 11.5px var(--f-mono);white-space:nowrap}
.rw.red span{color:#FF9497}
.rw.red b{color:#FF8A8D}
.big{display:flex;align-items:baseline;gap:6px;font:700 38px var(--f-disp);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.big small{font:500 13px var(--f-body);color:rgba(234,241,255,.6);letter-spacing:0}
.tk{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#1F9D63;margin-left:7px;opacity:0;transform:scale(.3);transition:opacity .3s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.tk::before{content:"";width:6px;height:3px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.tk.on{opacity:1;transform:none}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.r{background:var(--red);box-shadow:0 0 10px var(--red)}

/* Reveal states, driven by data-at */
.sw .b{display:none}.sw.on .a{display:none}.sw.on .b{display:inline-flex}
.ap{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.ap.on{opacity:1;transform:none}
.pop{opacity:0;transform:translateY(12px) scale(.86);transition:opacity .4s,transform .55s cubic-bezier(.3,1.5,.5,1)}
.pop.on{opacity:1;transform:none}

/* ---------- Phone ---------- */
.phone{width:168px;height:330px;border-radius:30px;padding:9px;background:linear-gradient(160deg,#2c3548,#0a0e16);box-shadow:0 54px 80px -30px rgba(0,0,0,.9),inset 0 0 0 1.5px rgba(255,255,255,.15)}
.phone.sm{width:150px;height:290px}
.scr{height:100%;border-radius:22px;background:linear-gradient(180deg,#F7F9FC,#E8EDF5);color:#141A26;padding:24px 13px 12px;position:relative;overflow:hidden;font-size:11px}
.scr::before{content:"";position:absolute;top:7px;left:50%;width:52px;height:13px;margin-left:-26px;border-radius:10px;background:#0a0e16}
.scr.dk{background:linear-gradient(180deg,#141A28,#0C111C);color:#EAF1FF}
.ph-top{font:500 9.5px var(--f-mono);color:#7A8496;text-align:center;margin-bottom:12px}
.ph-t{font:700 16px var(--f-disp);letter-spacing:-.02em;margin-bottom:10px}
.ph-l{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #DCE2EB;color:#4A5568}
.ph-l b{color:#141A26;font-weight:600}
.ph-tot{display:flex;justify-content:space-between;margin:10px 0 14px;font-weight:700;font-size:12.5px}
.ph-btn{display:block;text-align:center;border-radius:10px;padding:10px 6px;font-weight:600;font-size:11.5px;background:#0a0e16;color:#fff;transition:background .35s}
.ph-btn.on{background:#1F9D63}
.pm{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #DCE2EB;border-radius:9px;margin-bottom:6px;color:#4A5568;font-size:10.5px}
.pm .r{width:12px;height:12px;border-radius:50%;border:1.5px solid #B4BDCB;flex:none}
.pm.on{border-color:#2F7DF6;color:#141A26;background:rgba(47,125,246,.06)}
.pm.on .r{border:4px solid #2F7DF6}
.ph-3ds{font:500 9.5px var(--f-mono);color:#1F9D63;text-align:center;margin:8px 0}
.ap-card{background:rgba(255,255,255,.06);border-radius:10px;padding:9px 10px;margin-bottom:7px;font-size:10.5px;color:rgba(234,241,255,.7)}
.ap-card b{display:block;font:600 11px var(--f-mono);color:#fff}
.push{position:absolute;left:8px;right:8px;top:30px;background:rgba(255,255,255,.96);color:#141A26;border-radius:12px;padding:9px 10px;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.push b{display:block;font-size:10.5px}
.push span{font-size:9.5px;color:#5A6577}

/* ---------- Notification, chips, tags ---------- */
.chip-ok{display:flex;align-items:center;gap:8px;padding:10px 13px;font-size:11.5px}
.chip-ok .tk{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:7px;width:330px;opacity:.75}
.tag{font:600 11px var(--f-body);padding:7px 11px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:#EAF1FF}

/* ---------- Terminal and window ---------- */
.term{font:500 11px/1.7 var(--f-mono);background:linear-gradient(160deg,rgba(9,13,21,.95),rgba(5,8,14,.97));border-color:rgba(255,255,255,.12)}
.tdots{display:flex;align-items:center;gap:5px;margin-bottom:8px;color:rgba(234,241,255,.45);font-size:10px}
.tdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.tdots span{margin-left:6px}
.tl{color:rgba(234,241,255,.82);white-space:nowrap}
.tl i{font-style:normal;color:#6AABFF;display:inline-block;width:62px}
.tl.g,.tl.g i{color:#5FE0A6}
.win{padding:0;overflow:hidden}
.wbar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);font:500 10px var(--f-mono);color:rgba(234,241,255,.5)}
.wbar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
.wbar span{margin-left:8px;background:rgba(255,255,255,.06);padding:3px 10px;border-radius:6px}
.wbody{display:flex}
.wside{width:46px;padding:12px 10px;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:9px}
.wside b{width:22px;height:22px;border-radius:7px;background:var(--blue)}
.wside span{width:22px;height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.wside span.on{background:rgba(90,160,255,.7)}
.wmain{flex:1;padding:12px 14px}
.st{font:500 10px var(--f-mono);padding:3px 8px;border-radius:100px;background:rgba(255,255,255,.08);color:rgba(234,241,255,.75)}
.st.w{background:rgba(255,184,77,.15);color:#FFC66B}
.st.ok{background:rgba(62,207,142,.16);color:#5FE0A6}

/* ---------- Inbox and AI core ---------- */
.msg{position:relative;padding:8px 0;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:rgba(234,241,255,.62)}
.msg b{display:block;color:#fff;font-size:11.5px;margin-bottom:1px}
.msg span{display:block;padding-right:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg{position:absolute;right:0;top:50%;margin-top:-10px;font:600 9.5px var(--f-mono);font-style:normal;padding:4px 8px;border-radius:6px;background:rgba(47,125,246,.2);color:#9CC4FF}
.tg.red{background:rgba(255,74,79,.18);color:#FF9497}
.core{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at 35% 30%,#7DB7FF,#2F7DF6 45%,#1446A8 100%);box-shadow:0 0 50px rgba(47,125,246,.7),0 30px 60px -20px rgba(0,0,0,.8)}
.core b{font:700 26px var(--f-disp);color:#fff;letter-spacing:-.02em;position:relative}
.core .ring{position:absolute;inset:-16px;border-radius:50%;border:1.5px solid rgba(150,200,255,.55);border-top-color:transparent;animation:spin 6s linear infinite}
.core .ring.r2{inset:-30px;border-color:rgba(150,200,255,.25);border-bottom-color:transparent;animation-duration:10s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Production board ---------- */
.board{padding:14px}
.cols{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;position:relative;height:150px}
.col{background:rgba(255,255,255,.04);border-radius:9px;padding:7px 6px;position:relative}
.col h6{margin:0 0 7px;font:500 9.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(234,241,255,.58)}
.col.gate{background:rgba(255,74,79,.07);box-shadow:inset 0 0 0 1px rgba(255,74,79,.22)}
.col.gate h6{color:#FF9497}
.oc{background:rgba(255,255,255,.08);border-radius:7px;padding:6px 7px;font-size:10px;color:rgba(234,241,255,.8)}
.oc b{display:block;font:600 10px var(--f-mono);color:#fff}
.mover{position:absolute;top:96px;left:6px;width:calc(20% - 18px);background:rgba(47,125,246,.32);box-shadow:0 0 0 1.5px rgba(90,160,255,.7),0 10px 24px -8px rgba(47,125,246,.7);transition:left .8s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s}
.mover.s1{left:calc(20% + 5px)}.mover.s2{left:calc(40% + 4px)}.mover.s3{left:calc(60% + 3px)}.mover.s4{left:calc(80% + 2px)}
.mover .qcb,.mover .qcp{display:none;margin-top:3px;font:500 9px var(--f-mono)}
.mover.qc{background:rgba(255,74,79,.3);box-shadow:0 0 0 1.5px var(--red),0 0 22px rgba(255,74,79,.6)}
.mover.qc .qcb{display:block;color:#FFB0B2}
.mover.pass{background:rgba(31,157,99,.3);box-shadow:0 0 0 1.5px #1F9D63,0 0 18px rgba(31,157,99,.55)}
.mover.pass .qcb{display:none}.mover.pass .qcp{display:block;color:#7EE8B5}

/* ---------- Measurement sheet and job card ---------- */
.mrow{display:flex;gap:14px;align-items:center}
.kan{width:110px;height:158px;flex:none}
.kan path{stroke-width:1.4}
.dim{opacity:0;transition:opacity .4s}.dim.on{opacity:1}
.mvals{flex:1;display:flex;flex-direction:column;gap:8px}
.mvals div{display:flex;justify-content:space-between;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.055);font-size:11px;color:rgba(234,241,255,.7)}
.mvals b{font:600 11.5px var(--f-mono);color:#fff}
.steps{display:flex;flex-direction:column;gap:6px}
.steps span{position:relative;padding:7px 10px 7px 30px;border-radius:8px;background:rgba(255,255,255,.04);font-size:11.5px;color:rgba(234,241,255,.5);transition:background .3s,color .3s}
.steps span::before{content:"";position:absolute;left:11px;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;border:1.5px solid rgba(234,241,255,.3);transition:all .3s}
.steps.s1 span:nth-child(1),.steps.s2 span:nth-child(-n+2),.steps.s3 span:nth-child(-n+3),.steps.s4 span:nth-child(-n+4),.steps.s5 span{color:#fff;background:rgba(47,125,246,.18)}
.steps.s1 span:nth-child(1)::before,.steps.s2 span:nth-child(-n+2)::before,.steps.s3 span:nth-child(-n+3)::before,.steps.s4 span:nth-child(-n+4)::before,.steps.s5 span::before{background:#5AA0FF;border-color:#5AA0FF}
.steps.s4 span.r{background:rgba(255,74,79,.18);color:#FFB0B2}
.steps.s4 span.r::before{background:var(--red);border-color:var(--red);box-shadow:0 0 10px var(--red)}
.steps.s5 span.r{background:rgba(47,125,246,.18);color:#fff}
.meter{height:7px;border-radius:5px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;width:var(--w);border-radius:5px;background:linear-gradient(90deg,#2F7DF6,#5FE0A6)}

/* ---------- Podium and light beams ---------- */
.pod{position:absolute;left:50%;bottom:-40px;width:560px;height:560px;margin-left:-280px;border-radius:50%;transform:rotateX(80deg) translateZ(-70px);background:radial-gradient(circle,rgba(47,125,246,.5),rgba(47,125,246,.1) 46%,transparent 68%)}
.pod::after{content:"";position:absolute;inset:17%;border-radius:50%;border:2px solid rgba(90,160,255,.6);box-shadow:0 0 34px rgba(90,160,255,.65),inset 0 0 34px rgba(90,160,255,.4)}
.pod::before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px dashed rgba(150,200,255,.35);animation:spin 40s linear infinite}
.stage-home .pod{background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,.08) 46%,transparent 68%)}
.stage-home .pod::after{border-color:rgba(255,255,255,.7);box-shadow:0 0 34px rgba(255,255,255,.5),inset 0 0 34px rgba(255,255,255,.3)}
.bm{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:2px;transform-origin:0 50%;transform:rotate(var(--a)) translateZ(40px);background:linear-gradient(90deg,transparent,rgba(120,180,255,.38),transparent)}
.bm::after{content:"";position:absolute;top:-4px;left:0;width:46px;height:10px;border-radius:10px;background:radial-gradient(closest-side,#fff,rgba(120,180,255,.85),transparent);opacity:0}
.bm.on::after{animation:bm .9s ease-in-out forwards}
@keyframes bm{0%{opacity:0;left:-12%}15%,85%{opacity:1}100%{opacity:0;left:100%}}
.stage-home .bm{background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}

/* ---------- Aurora for form and text heroes ---------- */
.aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;translate:calc(var(--ax,0) * 36px) calc(var(--ay,0) * 24px);transition:translate .8s ease-out;animation:aur 16s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:52vw;height:52vw;max-width:760px;max-height:760px;right:-10%;top:-45%;background:radial-gradient(circle,#2F7DF6,transparent 64%)}
.aurora i:nth-child(2){width:36vw;height:36vw;max-width:520px;max-height:520px;right:22%;bottom:-40%;background:radial-gradient(circle,#5AA0FF,transparent 64%);animation-duration:21s;animation-delay:-7s}
.aurora i:nth-child(3){width:28vw;height:28vw;max-width:420px;max-height:420px;right:2%;bottom:-20%;background:radial-gradient(circle,#FF4A4F,transparent 64%);opacity:.28;animation-duration:24s;animation-delay:-12s}
.aurora.tone-violet i:nth-child(1){background:radial-gradient(circle,#875A7B,transparent 64%)}
.aurora.tone-violet i:nth-child(2){background:radial-gradient(circle,#5AA0FF,transparent 64%)}
.aurora.tone-teal i:nth-child(2){background:radial-gradient(circle,#2BC4B4,transparent 64%)}
@keyframes aur{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,8%) scale(1.12)}100%{transform:translate(5%,-4%) scale(.95)}}
.aurora .floor{position:absolute;left:-20%;right:-20%;bottom:0;height:62%;background-image:linear-gradient(rgba(140,180,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(140,180,255,.16) 1px,transparent 1px);background-size:56px 56px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(0deg,#000,transparent 85%);mask-image:linear-gradient(0deg,#000,transparent 85%);animation:floor 7s linear infinite}
@keyframes floor{to{background-position:0 56px}}
.page-hero:has(.aurora)::before{opacity:.35}
.page-hero:has(.aurora) .wrap{position:relative;z-index:2}

/* =====================================================================
 * Payments: the ledger. Gateway payouts on one side, Odoo invoices on the
 * other, threads between each matched pair. Dark, like the rest of the site.
 * ===================================================================== */
.stage-payments .sp.led-p>div{animation:none}
.stage-payments .gl.led{padding:0;background:linear-gradient(180deg,rgba(22,30,48,.94),rgba(11,15,25,.96));border:1px solid rgba(140,180,255,.18);color:#EAF1FF;font-size:12.5px;box-shadow:0 44px 76px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.stage-payments .gl.led::before{display:none}
.led-p .gl.led{width:262px}
.led-h{height:56px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 15px;border-bottom:1px solid rgba(255,255,255,.08)}
.led-h b{font:600 14px var(--f-disp);letter-spacing:-.01em;color:#fff}
.led-h small{font:500 9.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(234,241,255,.5)}
.lr{position:relative;height:44px;display:flex;align-items:center;gap:9px;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.05);pointer-events:auto;transition:background .25s,opacity .25s}
.lr:last-child{border-bottom:0}
.lb{flex:none;font:700 10px/1 var(--f-body);padding:5px 7px;border-radius:6px;color:#fff;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.lb.vi{background:#1A1F71;font-style:italic}
.lb.ta{background:#3BFFC1;color:#0b1a14;box-shadow:none}
.lb.mc{background:#F3F4F6;color:#111;box-shadow:none}
.lb.rf{background:rgba(255,74,79,.14);color:#FF9497;box-shadow:inset 0 0 0 1px rgba(255,74,79,.3)}
.lr .lt{flex:1;min-width:0;font-size:12.5px;color:rgba(234,241,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr .la{font:600 12.5px var(--f-mono);color:#fff;font-variant-numeric:tabular-nums}
.lk{position:relative;flex:none;width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);transition:background .35s,border-color .35s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.lr.ok .lk{background:#1F9D63;border-color:#1F9D63;transform:scale(1.08)}
.lr.ok .lk::after{content:"";position:absolute;left:4.6px;top:2.2px;width:4px;height:7.5px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(45deg)}
.lr.bad:not(.ok){background:rgba(255,74,79,.09)}
.lr.bad:not(.ok) .lk{border-color:#FF4A4F}
.lr.bad:not(.ok) .lk::before{content:"!";position:absolute;inset:0;font:700 10.5px/14px var(--f-body);text-align:center;color:#FF4A4F}
.lr.hot{background:rgba(90,160,255,.12)}
.stage-3d.hovering .lr:not(.hot){opacity:.45}
.threads{position:absolute;left:0;top:0;width:620px;height:520px;overflow:visible;transform:translateZ(30px);pointer-events:none}
.th{fill:none;stroke:#5AA0FF;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px rgba(90,160,255,.7));transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1),stroke .3s,stroke-width .3s,opacity .3s}
.th.ap{opacity:1;transform:none}
.th.on{stroke-dashoffset:0}
.th.bad{stroke:#FF4A4F;stroke-dasharray:.07 .06;stroke-dashoffset:0;filter:drop-shadow(0 0 4px rgba(255,74,79,.7))}
.th.bad.ap{opacity:0;transition:opacity .4s}
.th.bad.ap.on{opacity:1}
.th.hot{stroke:#fff;stroke-width:2.6}
.stage-3d.hovering .th:not(.hot){opacity:.2}
.led-sum{width:436px}
.led-live{display:inline-flex;align-items:center;gap:6px;font:500 9.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#6EE7B7;background:rgba(62,213,152,.12);padding:4px 9px;border-radius:99px}
.led-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ED598;animation:blink 1.4s infinite}
.ls{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 16px 2px}
.ls>div+div{border-left:1px solid rgba(255,255,255,.08);padding-left:14px}
.ls small{display:block;font-size:11px;color:rgba(234,241,255,.55)}
.ls b{display:block;margin-top:5px;font:700 19px/1 var(--f-disp);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.exv em{display:none;font-style:normal}
.exv:not(.e1) .z{display:inline}
.exv.e1:not(.e0) .o{display:inline;color:#FF6B70}
.exv.e0 .d{display:inline;color:#6EE7B7}
.lm{height:6px;border-radius:5px;background:rgba(255,255,255,.08);margin:13px 16px 0;overflow:hidden}
.lm i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#2F7DF6,#3ED598);transition:width 4.8s cubic-bezier(.4,0,.2,1),opacity .3s}
.lm i.on{width:100%}
.lnote{display:grid;padding:11px 16px 14px;font-size:12px;line-height:1.4;color:rgba(234,241,255,.66);min-height:46px}
.lnote>span{grid-area:1/1;transition:opacity .35s}
.lnote:has(.on) .n0{opacity:0}
.lnote .n1{color:#FF9497}
.lnote .n2{color:#6EE7B7}
.led-chip{display:flex;align-items:center;gap:11px;width:258px;padding:12px 14px!important}
.lc-i{flex:none;width:32px;height:32px;border-radius:10px;background:#1572B8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E") no-repeat center/17px}
.led-chip b{display:block;font-size:12.5px;color:#fff}
.led-chip small{display:block;margin-top:2px;font-size:11px;color:rgba(234,241,255,.6)}

/* =====================================================================
 * AI automation: the assistant window (assets/agent.js drives it).
 * ===================================================================== */
.stage-automation .stage-3d{width:600px;height:560px}
.stage-automation .ag-sp>div{animation:none}
.agw{width:600px;border-radius:22px;overflow:hidden;color:#EEEAFF;font-size:13.5px;pointer-events:auto;
  background:linear-gradient(180deg,rgba(30,23,64,.94),rgba(12,10,28,.97));border:1px solid rgba(185,166,255,.24);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08),0 0 120px -40px rgba(139,108,246,.6)}
.agw-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.agw-bar>i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.agw-bar>i:first-child{background:rgba(255,95,87,.75)}.agw-bar>i:nth-child(2){background:rgba(254,188,46,.7)}.agw-bar>i:nth-child(3){background:rgba(40,200,64,.65)}
.agw-bar b{margin-left:8px;font:600 13px var(--f-disp);color:#fff}
.agw-conn{margin-left:auto;display:flex;gap:6px}
.agw-conn em{font:500 10px/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:99px;color:rgba(238,234,255,.5);border:1px solid rgba(255,255,255,.1);transition:color .3s,background .3s,border-color .3s,box-shadow .3s}
.agw-conn em.act{color:#fff;background:rgba(139,108,246,.32);border-color:rgba(185,166,255,.65);box-shadow:0 0 14px rgba(139,108,246,.55)}
.agw-tasks{display:flex;gap:8px;padding:14px 16px 2px;flex-wrap:wrap}
.agw-task{font:500 12.5px/1 var(--f-body);color:rgba(238,234,255,.75);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:9px 13px;border-radius:99px;cursor:pointer;transition:color .25s,background .25s,border-color .25s}
.agw-task:hover{color:#fff;border-color:rgba(185,166,255,.55)}
.agw-task.on{color:#fff;background:rgba(139,108,246,.26);border-color:rgba(185,166,255,.7)}
.agw-task:focus-visible{outline:2px solid #B9A6FF;outline-offset:2px}
.agw-prompt{display:flex;align-items:center;gap:10px;margin:12px 16px 8px;padding:13px 14px;border-radius:14px;background:rgba(4,3,12,.6);border:1px solid rgba(185,166,255,.22)}
.agw-spark{flex:none;width:20px;height:20px;background:linear-gradient(135deg,#B9A6FF,#5AA0FF 55%,#FF6B70);filter:drop-shadow(0 0 8px rgba(185,166,255,.8));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9L22.5 12l-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9L22.5 12l-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.agw-type{flex:1;min-width:0;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agw-caret{flex:none;width:2px;height:16px;background:#B9A6FF;opacity:0}
.agw.typing .agw-caret{opacity:1;animation:blink .8s steps(2) infinite}
.agw-log{list-style:none;margin:4px 16px 0;padding:0;display:grid;gap:6px;min-height:166px;align-content:start}
.agw-log li{display:grid;grid-template-columns:28px 54px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.035);animation:agw-in .35s var(--ease)}
@keyframes agw-in{from{opacity:0;transform:translateY(6px)}}
.agw-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#DDD0FF;background:rgba(139,108,246,.22)}
.agw-ic svg{width:15px;height:15px}
.agw-log li[data-k="odoo"] .agw-ic{color:#F0D6EA;background:rgba(135,90,123,.38)}
.agw-log li[data-k="bank"] .agw-ic{color:#A9CCFF;background:rgba(47,125,246,.22)}
.agw-log li[data-k="mail"] .agw-ic{color:#FDE7A8;background:rgba(245,179,1,.16)}
.agw-log li[data-k="chat"] .agw-ic{color:#7EE8B5;background:rgba(37,211,102,.18)}
.agw-sys{font:500 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(238,234,255,.55)}
.agw-t{font-size:13px;color:#EEEAFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agw-st{width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:2px solid rgba(185,166,255,.6);border-top-color:transparent;animation:spin .7s linear infinite}
.agw-log li.done .agw-st{animation:none;border:0;background:#1F9D63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/10px}
.agw-out{margin:10px 16px 0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:opacity .4s,transform .5s var(--ease)}
.agw.run .agw-out{opacity:0;transform:translateY(8px)}
.agw.run .agw-out.on{opacity:1;transform:none}
.agw-oh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.agw-oh b{font:600 14px var(--f-disp);color:#fff}
.agw-oh small{font-size:11px;color:rgba(238,234,255,.5)}
.agw-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid rgba(255,255,255,.06);font-size:12.5px}
.agw-row span{color:rgba(238,234,255,.6)}
.agw-row b{color:#fff;font:600 12.5px var(--f-mono)}
.agw-row em{font:600 10px var(--f-mono);font-style:normal;color:#7EE8B5;background:rgba(62,213,152,.13);padding:3px 6px;border-radius:5px}
.agw-msg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid rgba(255,255,255,.06)}
.agw-av{width:28px;height:28px;border-radius:50%;background:rgba(139,108,246,.3);color:#ECE4FF;font:700 10px/28px var(--f-disp);text-align:center}
.agw-msg b{display:block;font:600 11.5px var(--f-mono);color:#fff}
.agw-msg small{display:block;margin-top:2px;font-size:12px;color:rgba(238,234,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agw-msg small.ar{font-family:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;font-size:13px;text-align:right}
.agw-msg em{font:600 9.5px var(--f-mono);font-style:normal;letter-spacing:.06em;color:#DDD0FF;background:rgba(139,108,246,.22);padding:3px 6px;border-radius:5px}
.agw-ask{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 16px 16px;padding:12px 14px;border-radius:14px;background:rgba(255,190,90,.08);border:1px solid rgba(255,190,90,.36);transition:opacity .35s,transform .45s var(--ease),background .4s,border-color .4s}
.agw.run .agw-ask{opacity:0;transform:translateY(6px)}
.agw.run .agw-ask.on{opacity:1;transform:none}
.agw-q{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#fff}
.agw-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#FFBE5A;box-shadow:0 0 10px #FFBE5A;animation:blink 1.2s infinite}
.agw.done .agw-ask{background:rgba(62,213,152,.08);border-color:rgba(62,213,152,.42)}
.agw.done .agw-dot{background:#3ED598;box-shadow:0 0 10px #3ED598;animation:none}
.agw-go{flex:none;display:inline-grid;font:600 13px/1 var(--f-body);color:#fff;background:#2F7DF6;border:0;border-radius:10px;padding:10px 16px;cursor:pointer;transition:transform .15s,background .3s}
.agw-go span{grid-area:1/1;transition:opacity .25s}
.agw-go span:last-child{opacity:0}
.agw-go.press{transform:scale(.92)}
.agw.done .agw-go{background:#1F9D63}
.agw.done .agw-go span:first-child{opacity:0}
.agw.done .agw-go span:last-child{opacity:1}

/* ---------- Phones ---------- */
@media (max-width:899px){
  .stage{position:relative;top:auto;right:auto;bottom:auto;width:auto;height:380px;margin:26px -20px 0;overflow:visible}
  .hero .stage{top:auto;bottom:auto;margin-bottom:6px}
  .stage-3d{scale:.6}
  .stage .m-hide{display:none}
  .aurora i{filter:blur(50px)}
}
@media (max-width:420px){.stage{height:330px}.stage-3d{scale:.52}.stage-payments .stage-3d{scale:.56}}
@media (max-width:899px){
  .stage.stage-automation{height:auto;margin:30px 0 0}
  .stage-automation .stage-3d{scale:1!important;width:100%;height:auto;transform:none!important}
  .stage-automation .sp{position:relative;left:auto;top:auto;transform:none;opacity:1;animation:none}
  .agw{width:100%}
  .agw-conn{display:none}
  .agw-log li{grid-template-columns:28px minmax(0,1fr) 18px}
  .agw-sys{display:none}
  .agw-tasks{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .agw-tasks::-webkit-scrollbar{display:none}
  .agw-task{white-space:nowrap}
  .agw-t{white-space:normal;line-height:1.35}
}

@media (prefers-reduced-motion:reduce){
  .sp{animation:none;opacity:1}
  .sp>div,.pod::before,.core .ring,.aurora i,.aurora .floor,.pl.live::before{animation:none}
  .bm::after{display:none}
}
/* The assistant keeps one size for every job: agent.js measures the tallest
   job into --agw-h, and spare room goes above the Approve bar, never below. */
.agw{display:flex;flex-direction:column;min-height:var(--agw-h,0px)}
.agw-ask{margin-top:auto}
.agw-out{margin-bottom:10px}
/* Desktop: the hero is always tall enough to show all of the window. It
   scales with the window width (--ags-w) and, on short screens, with the
   height (--ags-h), whichever is smaller. No lower than .86 for height: the
   headline column is about that tall anyway on a laptop. */
@media (min-width:900px){
  .page-hero:has(.stage-automation){--ags-w:1;--ags-h:1;--ags:min(var(--ags-w),var(--ags-h))}
  .page-hero:has(.stage-automation) .wrap{min-height:calc(var(--nav-h) + 670px * var(--ags) + 120px)}
  .stage.stage-automation{top:var(--nav-h)}
  .stage-automation .stage-3d{height:670px;scale:var(--ags)}
  .agw{min-height:max(670px,var(--agw-h,0px))}
}
@media (min-width:900px) and (max-width:1280px){.page-hero:has(.stage-automation){--ags-w:.88}}
@media (min-width:900px) and (max-width:1120px){.page-hero:has(.stage-automation){--ags-w:.76}}
@media (min-width:900px) and (max-width:980px){.page-hero:has(.stage-automation){--ags-w:.68}}
@media (min-width:900px) and (max-height:860px){.page-hero:has(.stage-automation){--ags-h:.86}}

/* =====================================================================
 * Product previews (template-parts/previews.php): the homepage switchboard
 * and the "The difference" rows on the service pages. engine.js plays them.
 * ===================================================================== */
.detail .art .sv{width:100%;display:flex;justify-content:center}
.u-win{width:100%;max-width:560px;background:linear-gradient(180deg,#131B2C,#0B111D);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;font-size:14px;color:var(--sub);
  box-shadow:0 60px 110px -46px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}
.u-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.u-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.13)}
.u-bar i:first-child{background:rgba(255,95,87,.75)}.u-bar i:nth-child(2){background:rgba(254,188,46,.7)}.u-bar i:nth-child(3){background:rgba(40,200,64,.65)}
.u-bar b{margin-left:10px;font:500 12px/1 var(--f-mono);letter-spacing:.05em;color:rgba(255,255,255,.82)}
.u-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#6EE7B7;padding:6px 10px;border-radius:99px;background:rgba(62,213,152,.1);border:1px solid rgba(62,213,152,.28)}
.u-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ED598;box-shadow:0 0 8px #3ED598;animation:blink 1.4s infinite}
.u-body{padding:10px 18px 18px}
.js .sv .ap{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .6s var(--ease)}
.js .sv .ap.on{opacity:1;transform:none}
.u-pay{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.u-pay>span:nth-child(2) b{display:block;color:#fff;font-weight:600;font-size:14.5px}
.u-pay>span:nth-child(2) small{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.u-brand{width:66px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font:700 12.5px/1 var(--f-body);color:#fff;background:#000;border:1px solid rgba(255,255,255,.16)}
.u-brand.visa{background:#1A1F71;font-style:italic;font-weight:800;letter-spacing:.02em}
.u-brand.tabby{background:#3BFFC1;color:#0b1a14;font-weight:800;border-color:transparent}
.u-brand.ref{background:rgba(255,74,79,.12);color:#FF9497;border-color:rgba(255,74,79,.3)}
.u-amt{color:#fff;font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums}
.u-amt.neg{color:#FF9497}
.sw2{display:inline-grid;font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.sw2 em{grid-area:1/1;font-style:normal;text-align:center;padding:6px 10px;border-radius:99px;transition:opacity .35s,transform .35s}
.sw2 em:first-child{color:#FEC85A;background:rgba(254,188,46,.1);border:1px solid rgba(254,188,46,.3)}
.sw2 em:last-child{color:#6EE7B7;background:rgba(62,213,152,.12);border:1px solid rgba(62,213,152,.32);opacity:0;transform:translateY(6px)}
.sw2.on em:first-child{opacity:0;transform:translateY(-6px)}
.sw2.on em:last-child{opacity:1;transform:none}
.u-settle{margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(47,125,246,.08);border:1px solid rgba(90,160,255,.2)}
.u-sh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.u-sh b{color:#fff;font-size:14px}
.u-tag{font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#6EE7B7;padding:6px 10px;border-radius:99px;background:rgba(62,213,152,.12);opacity:0;transition:opacity .4s}
.u-tag.on{opacity:1}
.u-meter{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin:12px 0 10px}
.u-meter i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--blue),#3ED598);transition:width 2.6s cubic-bezier(.4,0,.2,1)}
.u-meter i.on{width:100%}
.u-settle p{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--sub)}
.u-settle p b{color:#fff;font-variant-numeric:tabular-nums}
.u-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.u-kpi{padding:13px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.u-kpi small{display:block;color:var(--mut);font-size:12px}
.u-kpi b{display:block;margin-top:6px;font:700 21px/1 var(--f-disp);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.u-bars{display:flex;align-items:flex-end;gap:8px;height:120px;margin:18px 2px 14px}
.u-bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,rgba(90,160,255,.85),rgba(47,125,246,.18))}
.u-bars i.grow{transform-origin:bottom;transform:scaleY(.12);transition:transform 1.1s var(--ease);background:linear-gradient(180deg,#fff,var(--blue-glow))}
.u-bars i.grow.on{transform:none}
.u-mods{display:flex;flex-wrap:wrap;gap:8px}
.u-mods span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;font-size:12.5px;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.u-mods span::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ED598;box-shadow:0 0 6px #3ED598}
.u-foot{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:rgba(234,241,255,.75)}
.u-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#3ED598;box-shadow:0 0 8px #3ED598}
.u-msg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.u-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 14px/1 var(--f-disp);color:#cfe1ff;background:rgba(47,125,246,.18)}
.u-av.r{color:#FFB0B2;background:rgba(255,74,79,.16)}
.u-msg>span:nth-child(2){min-width:0}
.u-msg b{display:block;color:#fff;font-size:14px;font-weight:600}
.u-msg small{display:block;color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-route{font:600 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:7px 10px;border-radius:8px;color:#A8CCFF;background:rgba(47,125,246,.16);border:1px solid rgba(90,160,255,.3)}
.u-route.warn{color:#FFB0B2;background:rgba(255,74,79,.14);border-color:rgba(255,74,79,.35)}
.u-ok{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(62,213,152,.08);border:1px solid rgba(62,213,152,.24);font-size:13.5px}
.u-ok>b{color:#fff}
.u-ok span b{font:700 20px/1 var(--f-disp);color:#6EE7B7;font-variant-numeric:tabular-nums;margin-right:4px}
.u-portal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;position:relative;padding-top:16px}
.u-side{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.u-side i{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.05)}
.u-side i.on{background:var(--blue);box-shadow:0 0 18px rgba(47,125,246,.6)}
.u-ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.u-ph b{color:#fff;font-size:15px}
.u-btn{font-size:12px;font-weight:600;color:#fff;background:var(--blue);padding:7px 11px;border-radius:9px}
.u-req{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;font-size:13.5px;color:rgba(234,241,255,.85)}
.u-req:nth-child(odd){background:rgba(255,255,255,.025)}
.u-req.hot{background:rgba(47,125,246,.1);box-shadow:inset 0 0 0 1px rgba(90,160,255,.3)}
.u-pill{font:600 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:99px;color:rgba(234,241,255,.75);background:rgba(255,255,255,.07)}
.u-pill.info{color:#A8CCFF;background:rgba(47,125,246,.16)}
.u-pill.sw2{padding:0;background:none}
.u-sync{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13px;color:rgba(234,241,255,.78)}
.u-phone{grid-column:1 / -1;justify-self:end;width:min(250px,100%);margin-top:2px;padding:13px 15px;border-radius:16px;background:rgba(22,30,48,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 50px -20px rgba(0,0,0,.9)}
.u-phone small{display:block;font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.u-phone b{display:block;margin-top:7px;color:#fff;font-size:14px}
.u-phone span{display:block;margin-top:2px;font-size:12.5px;color:var(--sub)}
.u-hook{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.u-hook time{font:500 11px/1 var(--f-mono);color:var(--mut);font-variant-numeric:tabular-nums}
.u-hook code{font:600 10.5px/1 var(--f-mono);letter-spacing:.02em;padding:6px 8px;border-radius:7px;color:#A8CCFF;background:rgba(47,125,246,.14);border:1px solid rgba(90,160,255,.28);white-space:nowrap}
.u-hook code.r{color:#FFB0B2;background:rgba(255,74,79,.12);border-color:rgba(255,74,79,.3)}
.u-hook code.g{color:#6EE7B7;background:rgba(62,213,152,.1);border-color:rgba(62,213,152,.3)}
.u-hook>span{min-width:0}
.u-hook>span b{display:block;color:#fff;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-hook>span small{display:block;margin-top:2px;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-hook em{font:600 10.5px/1 var(--f-mono);font-style:normal;color:#6EE7B7;padding:5px 7px;border-radius:6px;background:rgba(62,213,152,.1)}
@media (max-width:560px){
  .u-pay{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px}
  .u-pay .u-amt{grid-column:2}
  .u-pay .sw2{grid-column:3;grid-row:1 / span 2}
  .u-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .u-kpi:last-child{grid-column:1 / -1}
  .u-kpi{padding:11px 12px}
  .u-kpi b{font-size:18px}
  .u-msg{grid-template-columns:auto minmax(0,1fr)}
  .u-route{grid-column:2;justify-self:start}
  .u-hook{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .u-hook time{display:none}
  .u-hook code{justify-self:start}
  .u-hook>span{grid-column:1 / -1;grid-row:2}
}
.u-bar b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-live{flex:none;white-space:nowrap}

.u-pill.ok{color:#6EE7B7;background:rgba(62,213,152,.12)}
.u-meter i.on{width:var(--w,100%)}
.sw2.bad em:first-child{color:#FF9497;background:rgba(255,74,79,.12);border-color:rgba(255,74,79,.35)}

.u-sum .tot{margin-top:6px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);font-size:15px;color:#fff}
.u-sum .tot b{font:700 18px var(--f-disp)}

.u-paybar .sw2{margin-left:auto}

.u-t.seat,.u-t.four{color:#CFE1FF;background:rgba(47,125,246,.14);border:1px solid rgba(90,160,255,.42)}
.u-t.pay{color:#C8F5DF;background:rgba(62,213,152,.14);border:1px solid rgba(62,213,152,.45)}
.u-t.ord{color:#FFE2A8;background:rgba(254,188,46,.14);border:1px solid rgba(254,188,46,.5)}

.u-legend .seat::before{background:rgba(90,160,255,.75)}
.u-legend .ord::before{background:rgba(254,188,46,.85)}
.u-legend .pay::before{background:rgba(62,213,152,.85)}

.u-dl li.next{background:rgba(254,188,46,.07);box-shadow:inset 0 0 0 1px rgba(254,188,46,.3)}
.u-dl li.next::before{border-color:#FEC85A;background:#FEC85A;box-shadow:0 0 12px #FEC85A}
.u-dl li.next em{visibility:visible}
.u-dl li.past>*{opacity:.5}
.u-dl li.past::before{border-color:#3ED598;background:#3ED598}

.u-c .u-pill,.u-c .sw2{justify-self:start}

.u-ent .u-pill{display:inline-block}

@media (max-width:560px){
  
  .u-fr .u-pill,.u-fr .sw2{grid-column:2;justify-self:start}
  
  
  .u-layer .u-pill{display:none}
  
  
  
  
  
  
  
  
}

/* ---------- Flow: how it connects (inc/visuals.php) ---------- */
.flow{position:relative;padding:clamp(20px,3vw,34px);border-radius:24px;border:1px solid var(--line);background:radial-gradient(60% 120% at 50% 0%,rgba(47,125,246,.1),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.flow-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.fs{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 16px;border-radius:16px;background:#0D1320;border:1px solid rgba(255,255,255,.09);transition:border-color .5s,box-shadow .5s,opacity .5s}
.fs::after{content:"";position:absolute;top:39px;left:calc(100% + 1px);width:12px;height:2px;background:rgba(255,255,255,.14);transition:background .5s,box-shadow .5s}
.fs:last-child::after{display:none}
.fs.on{border-color:rgba(90,160,255,.5);box-shadow:0 0 0 1px rgba(90,160,255,.15),0 18px 40px -22px rgba(47,125,246,.7)}
.fs.on::after{background:var(--blue-glow);box-shadow:0 0 8px var(--blue-glow)}
.js .flow .fs{opacity:.5}
.js .flow .fs.on{opacity:1}
.fs-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#A9CCFF;background:rgba(47,125,246,.14);box-shadow:inset 0 0 0 1px rgba(90,160,255,.3)}
.fs-ic svg{width:20px;height:20px}
.fs b{font:600 16px/1.25 var(--f-disp);letter-spacing:-.01em;color:#fff}
.fs small{font-size:13.5px;line-height:1.45;color:var(--sub)}
.flow-foot{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14.5px;color:#D3DBE7}
@media (max-width:980px){
  .flow-steps{grid-template-columns:minmax(0,1fr);gap:10px}
  .fs{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:14px}
  .fs-ic{grid-row:1 / span 2}
  .fs::after{top:calc(100% + 1px);left:33px;width:2px;height:8px}
}
@media (prefers-reduced-motion:reduce){.fs,.fs::after,.u-t,.u-flag{transition:none}}