/* ============================================================
   INTELIGOLD — sections: daily-loop, handheld device, misc
   ============================================================ */

/* ---------- Daily loop (signature) ---------- */
.loop{ --accent:var(--gold); position:relative; }

/* shared step visuals */
.loop-step .ls-node{
  width:64px; height:64px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--ivory); border:1.5px solid var(--line);
  color:var(--maroon); position:relative; transition:.4s var(--ease);
}
.loop-step .ls-node svg{ width:27px; height:27px; }
.loop-step .ls-idx{ position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--ivory); font-size:11px; font-weight:700; display:grid; place-items:center; font-family:var(--font-sans); }
.loop-step.active .ls-node{ background:var(--maroon); color:var(--on-maroon); border-color:var(--maroon); box-shadow:0 0 0 6px var(--gold-glow); transform:scale(1.06); }
.loop-step.active .ls-idx{ background:var(--gold); color:#3a2a08; }
.loop-step .ls-t{ font-family:var(--font-display); font-weight:600; font-size:18px; transition:color .3s; }
.loop-step .ls-d{ font-size:13.5px; color:var(--ink-55); line-height:1.5; }
.loop-step.active .ls-t{ color:var(--maroon); }

/* TIMELINE layout */
.loop[data-layout="timeline"] .loop-track{ display:flex; align-items:flex-start; gap:0; position:relative; }
.loop[data-layout="timeline"] .loop-step{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:0 8px; position:relative; }
.loop[data-layout="timeline"] .loop-step .ls-text{ display:flex; flex-direction:column; gap:5px; max-width:170px; }
/* connector line behind nodes */
.loop[data-layout="timeline"] .loop-track::before{
  content:""; position:absolute; top:31px; left:9%; right:9%; height:2px; background:var(--line); z-index:0;
}
.loop[data-layout="timeline"] .loop-track .loop-fill{
  position:absolute; top:31px; left:9%; height:2px; background:linear-gradient(90deg,var(--gold),var(--maroon)); z-index:1;
  transition:width .6s var(--ease); border-radius:2px;
}
.loop[data-layout="timeline"] .loop-step .ls-node{ z-index:2; }
/* pulse ping on active node */
.loop-step.active .ls-node::after{
  content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--gold);
}
body:not(.motion-off) .loop-step.active .ls-node::after{ animation:nodePing 1.8s var(--ease) infinite; }
@keyframes nodePing{ 0%{ opacity:.8; transform:scale(1);} 70%{ opacity:0; transform:scale(1.6);} 100%{opacity:0;} }

/* RADIAL layout */
.loop[data-layout="radial"] .loop-track{ position:relative; width:min(520px,92vw); height:min(520px,92vw); margin-inline:auto; }
.loop[data-layout="radial"] .loop-step{ position:absolute; width:150px; margin-left:-75px; margin-top:-44px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.loop[data-layout="radial"] .loop-step .ls-text{ display:flex; flex-direction:column; gap:3px; }
.loop[data-layout="radial"] .loop-step .ls-t{ font-size:15.5px; }
.loop[data-layout="radial"] .loop-step .ls-d{ display:none; }
.loop[data-layout="radial"] .loop-hub{
  position:absolute; top:50%; left:50%; width:190px; height:190px; margin:-95px 0 0 -95px;
  border-radius:50%; background:var(--bg-maroon,var(--maroon)); display:grid; place-items:center; text-align:center;
  background:radial-gradient(120% 120% at 30% 20%, var(--maroon), var(--maroon-dark)); color:var(--on-maroon);
  box-shadow:var(--shadow-maroon);
}
.loop[data-layout="radial"] .loop-hub .hub-t{ font-family:var(--font-display); font-size:20px; font-weight:600; }
.loop[data-layout="radial"] .loop-hub .hub-s{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-top:6px; }
.loop[data-layout="radial"] svg.loop-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.loop[data-layout="radial"] .loop-ring{ fill:none; stroke:var(--line); stroke-width:2; }
.loop[data-layout="radial"] .loop-prog{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .6s var(--ease); }

/* step caption (shared, below) */
.loop-caption{ margin-top:40px; text-align:center; min-height:64px; }
.loop-caption .lc-t{ font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--maroon); }
.loop-caption .lc-d{ color:var(--ink-70); margin-top:8px; max-width:520px; margin-inline:auto; }
.loop-dots{ display:flex; gap:8px; justify-content:center; margin-top:24px; }
.loop-dots button{ width:9px; height:9px; border-radius:50%; background:var(--line); border:none; padding:0; transition:.3s; }
.loop-dots button.on{ background:var(--maroon); width:26px; border-radius:5px; }

@media (max-width:860px){
  .loop[data-layout="timeline"] .loop-track{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:4px 2px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .loop[data-layout="timeline"] .loop-track::-webkit-scrollbar{ display:none; }
  .loop[data-layout="timeline"] .loop-track::before,
  .loop[data-layout="timeline"] .loop-track .loop-fill{ display:none; }
  .loop[data-layout="timeline"] .loop-step{ flex:0 0 auto; width:62%; max-width:230px; scroll-snap-align:center; padding:0 4px; }
  .loop[data-layout="timeline"] .loop-step .ls-text{ max-width:none; }
  .loop[data-layout="radial"] .loop-step .ls-d{ display:none; }
}

/* ---------- Handheld RFID device mockup (CSS) ---------- */
.device{
  --dw:300px; width:var(--dw); aspect-ratio:300/600;
  background:linear-gradient(160deg,#2a1d14,#3A2A1C); border-radius:34px; padding:13px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1.5px rgba(200,149,30,.25);
  position:relative;
}
.device::before{ /* RFID antenna nub on top */
  content:""; position:absolute; top:-22px; right:34px; width:30px; height:26px;
  background:linear-gradient(160deg,#3A2A1C,#2a1d14); border-radius:8px 8px 0 0;
  box-shadow:inset 0 0 0 1.5px rgba(200,149,30,.25);
}
.device .scr{
  width:100%; height:100%; background:var(--ivory); border-radius:23px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
}
.device .scr-top{ background:var(--maroon); color:var(--on-maroon); padding:16px 16px 14px; }
.device .scr-top .dt-row{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--on-maroon-dim); }
.device .scr-top .dt-title{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-top:8px; }
.device .scr-body{ flex:1; padding:14px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.device .scan-line{ position:relative; }

.dev-row{ display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--ivory); }
.dev-row .dr-ico{ width:34px; height:34px; border-radius:8px; background:var(--ivory-2); display:grid; place-items:center; color:var(--maroon); flex:none; }
.dev-row .dr-ico svg{ width:18px; height:18px; }
.dev-row .dr-main{ flex:1; min-width:0; }
.dev-row .dr-t{ font-size:13px; font-weight:600; color:var(--ink); }
.dev-row .dr-s{ font-size:11px; color:var(--ink-55); }
.dev-row .dr-amt{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--maroon); font-variant-numeric:tabular-nums; }
.dev-row.ok{ border-color:color-mix(in oklab,var(--success) 35%,transparent); background:color-mix(in oklab,var(--success) 7%,var(--ivory)); }
.dev-row.ok .dr-ico{ color:var(--success); }
.dev-total{ margin-top:auto; padding:14px; background:var(--maroon); border-radius:14px; color:var(--on-maroon); display:flex; justify-content:space-between; align-items:center; }
.dev-total .dtot-l{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-maroon-dim); }
.dev-total .dtot-v{ font-family:var(--font-display); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }

/* scanning beam animation inside device */
body:not(.motion-off) .device .beam{ position:absolute; left:0; right:0; height:42px; background:linear-gradient(180deg, transparent, var(--gold-glow), transparent); animation:beam 3.2s var(--ease) infinite; pointer-events:none; }
@keyframes beam{ 0%{ top:64px; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{ top:78%; opacity:0;} }

/* ---------- Split feature row ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split.rev .split-media{ order:-1; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:36px; } .split.rev .split-media{ order:0; } }

/* check list */
.checks{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-70); }
.checks li .ck{ width:22px; height:22px; border-radius:50%; background:color-mix(in oklab,var(--gold) 16%,var(--ivory)); color:var(--maroon); display:grid; place-items:center; flex:none; margin-top:1px; }
.checks li .ck svg{ width:12px; height:12px; }
.checks li strong{ color:var(--ink); font-weight:600; }

/* metric tiles */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.metrics .m{ background:var(--ivory); padding:28px 24px; }
@media (max-width:760px){ .metrics{ grid-template-columns:1fr 1fr; } }

/* logo clear-space note helper for canvas */
.kbd{ font-family:'Inter',monospace; font-size:12px; background:var(--ivory-2); border:1px solid var(--line); border-radius:5px; padding:2px 7px; }

/* ---------- "Scan in action" demo ---------- */
.scan-scene{ position:relative; padding-top:34px; }
.scan-tray{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:
    radial-gradient(120% 140% at 20% 0%, color-mix(in oklab,var(--maroon) 86%,#000), var(--maroon-dark) 70%, #56101e);
  border:1px solid rgba(200,149,30,.28);
  box-shadow:inset 0 2px 30px rgba(0,0,0,.4), var(--shadow-lg);
  padding:30px 26px;
}
.scan-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
  position:relative; z-index:2;
}
.sp{
  position:relative; aspect-ratio:1; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(255,244,232,.04); border:1px solid rgba(255,244,232,.07);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.sp-art{ width:62%; height:62%; display:grid; place-items:center; color:rgba(224,192,103,.24); transition:color .4s var(--ease), filter .4s var(--ease); }
.sp-art svg{ width:100%; height:100%; }
.sp.read{ background:rgba(200,149,30,.14); border-color:rgba(224,192,103,.55); }
.sp.read .sp-art{ color:var(--gold-soft); filter:drop-shadow(0 0 8px rgba(224,192,103,.55)); }
.sp-ping{ position:absolute; inset:0; border-radius:14px; border:1.5px solid var(--gold-soft); opacity:0; }
body:not(.motion-off) .sp.read .sp-ping{ animation:spPing .7s var(--ease); }
@keyframes spPing{ 0%{ opacity:.9; transform:scale(.7);} 70%{opacity:0; transform:scale(1.25);} 100%{opacity:0;} }
.sp-check{ position:absolute; top:5px; right:5px; width:15px; height:15px; color:var(--success); opacity:0; transform:scale(.5); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.sp.read .sp-check{ opacity:1; transform:scale(1); }
.sp-check svg{ width:100%; height:100%; }

.scan-wave{
  position:absolute; top:-10%; bottom:-10%; left:-14%; width:20%; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(224,192,103,.12), rgba(224,192,103,.6), rgba(255,255,255,.5), rgba(224,192,103,.6), rgba(224,192,103,.12), transparent);
  filter:blur(1.5px); mix-blend-mode:screen;
}
body.motion-off .scan-wave{ display:none; }

.scan-gun{
  position:absolute; top:-14px; left:-16px; width:142px; height:auto; z-index:5;
  transform:rotate(-7deg); filter:drop-shadow(0 10px 20px rgba(58,42,28,.28));
}
body:not(.motion-off) .scan-gun .arc{ transform-origin:84% 50%; animation:arcPulse 2s var(--ease) infinite; opacity:0; }
body:not(.motion-off) .scan-gun .arc.a2{ animation-delay:.3s; }
body:not(.motion-off) .scan-gun .arc.a3{ animation-delay:.6s; }

.scan-chip{
  position:absolute; top:0; right:8px; z-index:6;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ivory); border:1px solid var(--line); border-radius:100px;
  padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--ink);
  box-shadow:var(--shadow-md); font-variant-numeric:tabular-nums;
}
.scan-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }
body:not(.motion-off) .scan-chip:not(.done) .dot{ animation:spPing 1s var(--ease) infinite; }
.scan-chip .num{ color:var(--maroon); }
.scan-chip .scan-time{ color:var(--ink-55); font-weight:500; }
.scan-chip.done{ border-color:color-mix(in oklab,var(--success) 35%,transparent); }
.scan-chip.done .dot{ background:var(--success); }
.scan-chip.done .num{ color:var(--success); }

/* why-RFID chips row */
.why-rfid{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.why-rfid .wr{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-70); background:var(--ivory); border:1px solid var(--line); border-radius:100px; padding:9px 16px; }
.why-rfid .wr svg{ width:16px; height:16px; color:var(--maroon); }

@media (max-width:560px){
  .scan-grid{ grid-template-columns:repeat(4,1fr); }
  .scan-gun{ width:96px; top:-6px; }
  .scan-chip{ font-size:12px; padding:7px 12px; }
}

/* ---------- Ambient feature-card animations ---------- */
.card.has-fx{ overflow:hidden; }
.card.has-fx > .card-ico,
.card.has-fx > h3,
.card.has-fx > p,
.card.has-fx > div{ position:relative; z-index:1; }
.card-fx{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.9; }
.card-fx i{ position:absolute; display:block; }
body.motion-off .card-fx i{ animation:none !important; }

/* rfid — concentric arcs pulsing from the lower-right */
.fx-rfid i{ right:-30px; bottom:-30px; width:80px; height:80px; border:2px solid var(--gold); border-radius:50%; opacity:0; }
.fx-rfid i:nth-child(2){ width:130px; height:130px; right:-55px; bottom:-55px; }
.fx-rfid i:nth-child(3){ width:184px; height:184px; right:-82px; bottom:-82px; }
body:not(.motion-off) .fx-rfid i{ animation:fxRfid 3.4s var(--ease) infinite; animation-delay:calc(var(--i) * .5s); }
@keyframes fxRfid{ 0%{ opacity:0; transform:scale(.7);} 30%{ opacity:.16;} 70%{ opacity:0; transform:scale(1.05);} 100%{opacity:0;} }

/* scan — a gold line sweeping down (scan to sell) */
.fx-scan i{ left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5; }
body:not(.motion-off) .fx-scan i{ animation:fxScan 3.2s var(--ease) infinite; }
@keyframes fxScan{ 0%{ top:6%; opacity:0;} 15%{opacity:.5;} 85%{opacity:.5;} 100%{ top:94%; opacity:0;} }

/* reconcile — rows ticking gold left→right in sequence (scan to close) */
.fx-reconcile i{ left:14%; right:14%; height:2px; background:var(--gold); opacity:.14; transform-origin:left; transform:scaleX(0); border-radius:2px; }
.fx-reconcile i:nth-child(1){ bottom:30%; } .fx-reconcile i:nth-child(2){ bottom:46%; } .fx-reconcile i:nth-child(3){ bottom:62%; }
body:not(.motion-off) .fx-reconcile i{ animation:fxRec 3.4s var(--ease) infinite; animation-delay:calc(var(--i) * .35s); }
@keyframes fxRec{ 0%{ transform:scaleX(0);} 25%{ transform:scaleX(1);} 80%{ transform:scaleX(1); opacity:.14;} 100%{ transform:scaleX(1); opacity:0;} }

/* shield — radar rings pulsing from center (compliance) */
.fx-shield i{ top:50%; left:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border:2px solid var(--gold); border-radius:50%; opacity:0; }
.fx-shield i:nth-child(2){ width:120px; height:120px; margin:-60px 0 0 -60px; }
body:not(.motion-off) .fx-shield i{ animation:fxRfid 3.6s var(--ease) infinite; animation-delay:calc(var(--i) * .7s); }

/* chart — bars rising and falling (reports) */
.fx-chart{ display:flex; align-items:flex-end; gap:7px; padding:0 22px 22px; justify-content:flex-end; }
.fx-chart i{ position:relative; width:11px; background:var(--gold); opacity:.16; border-radius:3px 3px 0 0; height:20%; }
body:not(.motion-off) .fx-chart i{ animation:fxBar 2.8s var(--ease) infinite; animation-delay:calc(var(--i) * .22s); }
@keyframes fxBar{ 0%,100%{ height:18%;} 50%{ height:64%;} }

/* store — nodes with a pulse travelling between them (multi-store) */
.fx-store i{ bottom:26px; width:9px; height:9px; border-radius:50%; background:var(--gold); opacity:.18; }
.fx-store i:nth-child(1){ right:26px; } .fx-store i:nth-child(2){ right:58px; } .fx-store i:nth-child(3){ right:90px; } .fx-store i:nth-child(4){ right:122px; }
body:not(.motion-off) .fx-store i{ animation:fxNode 2.6s var(--ease) infinite; animation-delay:calc(var(--i) * .24s); }
@keyframes fxNode{ 0%,100%{ opacity:.12; transform:scale(1);} 50%{ opacity:.5; transform:scale(1.5);} }

.card.has-fx:hover .card-fx{ opacity:1; }

/* ---------- Showroom scene (About) — staff scanning on the floor ---------- */
.showroom{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(58% 48% at 64% 16%, color-mix(in oklab,var(--gold) 20%,transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab,var(--maroon) 10%,var(--ivory)), var(--ivory-2) 58%, var(--ivory-3));
  border:1px solid var(--line); box-shadow:var(--shadow-md);
}
/* back shelves with jewellery */
.sr-shelf{ position:absolute; left:9%; right:9%; height:2px; background:rgba(58,42,28,.09); z-index:1; }
.sr-shelf.s1{ top:18%; } .sr-shelf.s2{ top:30%; }
.sr-shelf i{ position:absolute; bottom:2px; width:6px; height:8px; border-radius:50% 50% 45% 45%; background:var(--gold); opacity:.35; }
body:not(.motion-off) .sr-shelf i{ animation:srTwinkle 4s var(--ease) infinite; }
@keyframes srTwinkle{ 0%,100%{ opacity:.22; } 50%{ opacity:.55; } }

/* figures */
.sr-fig{ position:absolute; bottom:0; }
.sr-fig .head{ position:absolute; border-radius:50%; }
.sr-fig .hair{ position:absolute; border-radius:50% 50% 44% 44%; background:var(--ink); }
.sr-fig .body{ position:absolute; bottom:0; border-radius:48% 48% 0 0 / 64% 64% 0 0; }

/* salesperson — behind counter, right */
.sr-staff{ left:56%; width:134px; height:64%; z-index:2; }
body:not(.motion-off) .sr-staff{ animation:srBreath 5s var(--ease) infinite; }
@keyframes srBreath{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.sr-staff .body{ left:50%; transform:translateX(-50%); width:104px; height:150px; background:linear-gradient(180deg,var(--maroon),var(--maroon-dark)); }
.sr-staff .collar{ position:absolute; left:50%; transform:translateX(-50%); bottom:128px; width:28px; height:20px; background:var(--ivory); border-radius:0 0 50% 50%; z-index:1; }
.sr-staff .head{ left:50%; transform:translateX(-50%); bottom:132px; width:44px; height:44px; background:#dcb389; }
.sr-staff .hair{ left:50%; transform:translateX(-50%); bottom:160px; width:48px; height:24px; }

/* customer — foreground left, back view silhouette */
.sr-cust{ left:8%; width:128px; height:50%; z-index:5; transform-origin:bottom center; }
body:not(.motion-off) .sr-cust{ animation:srSway 6s var(--ease) infinite; }
@keyframes srSway{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-1.3deg); } }
.sr-cust .body{ left:50%; transform:translateX(-50%); width:112px; height:120px; background:linear-gradient(180deg,#4a3a2c,var(--ink)); }
.sr-cust .head{ left:50%; transform:translateX(-50%); bottom:104px; width:48px; height:48px; background:#2c2016; }

/* counter / glass display case */
.sr-counter{ position:absolute; left:0; right:0; bottom:0; height:33%; z-index:3; }
.sr-counter .top{ position:absolute; top:0; left:5%; right:5%; height:12px; border-radius:7px 7px 0 0; background:linear-gradient(var(--ivory),var(--ivory-3)); box-shadow:0 -3px 12px rgba(200,149,30,.2); }
.sr-counter .case{ position:absolute; top:12px; left:5%; right:5%; bottom:0; border-radius:0 0 12px 12px; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in oklab,var(--maroon) 15%,var(--ivory)), color-mix(in oklab,var(--maroon) 36%,var(--ink))); }
.sr-counter .case::after{ content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.16), transparent); }
body:not(.motion-off) .sr-counter .case::after{ animation:srGlass 5s var(--ease) infinite; }
@keyframes srGlass{ 0%{ transform:translateX(0); } 100%{ transform:translateX(320%); } }

/* jewellery on the counter top */
.sr-tray{ position:absolute; bottom:32%; left:30%; z-index:4; display:flex; align-items:flex-end; gap:10px; }
.sr-tray .pc{ width:18px; height:18px; color:var(--gold); filter:drop-shadow(0 0 5px rgba(224,192,103,.55)); }
.sr-tray .pc svg{ width:100%; height:100%; }
body:not(.motion-off) .sr-tray .pc{ animation:srShimmer 2.6s var(--ease) infinite; }
.sr-tray .pc:nth-child(2){ animation-delay:.45s; } .sr-tray .pc:nth-child(3){ animation-delay:.9s; }
@keyframes srShimmer{ 0%,100%{ opacity:.6; transform:translateY(0) scale(1); } 50%{ opacity:1; transform:translateY(-2px) scale(1.07); } }

/* arm + handheld scanner (scene-level so it sits above the counter top) */
.sr-arm{ position:absolute; left:46%; bottom:42%; width:92px; height:13px; border-radius:8px; z-index:4;
  background:linear-gradient(90deg,var(--maroon-dark),var(--maroon)); transform-origin:right center; }
body:not(.motion-off) .sr-arm{ animation:srScan 3.6s var(--ease) infinite; }
@keyframes srScan{ 0%,100%{ transform:rotate(20deg); } 50%{ transform:rotate(7deg); } }
.sr-scanner{ position:absolute; left:-24px; bottom:-5px; width:27px; height:21px; border-radius:6px; background:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(200,149,30,.4); }
.sr-scanner .tip{ position:absolute; left:-6px; top:6px; width:7px; height:9px; border-radius:3px; background:var(--gold); }
.sr-scanner svg{ position:absolute; left:-34px; top:-7px; width:34px; height:34px; overflow:visible; }
.sr-scanner .arc{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; transform-origin:82% 50%; opacity:0; }
body:not(.motion-off) .sr-scanner .arc{ animation:arcPulse 2s var(--ease) infinite; }
body:not(.motion-off) .sr-scanner .arc.a2{ animation-delay:.3s; }
body:not(.motion-off) .sr-scanner .arc.a3{ animation-delay:.6s; }

/* sparkles over the tray */
.sr-spark{ position:absolute; width:13px; height:13px; color:var(--gold); opacity:0; z-index:6; }
.sr-spark svg{ width:100%; height:100%; }
body:not(.motion-off) .sr-spark{ animation:srSpark 3s var(--ease) infinite; }
@keyframes srSpark{ 0%,100%{ opacity:0; transform:scale(.4); } 50%{ opacity:.9; transform:scale(1); } }

/* label */
.sr-label{ position:absolute; left:16px; top:14px; z-index:7; display:inline-flex; align-items:center; gap:8px;
  background:color-mix(in oklab,var(--ivory) 82%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:100px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--ink-70); }
.sr-label .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* ---------- Device close-up (About) — handheld + jewellery tray, no people ---------- */
.dev-scene{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(58% 52% at 34% 22%, color-mix(in oklab,var(--gold) 20%,transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in oklab,var(--maroon) 13%,var(--ivory)), var(--ivory-2) 56%, var(--ivory-3));
  border:1px solid var(--line); box-shadow:var(--shadow-md);
}
.dev-scene .dev-floor{ position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(180deg, transparent, rgba(58,42,28,.06)); }
/* velvet tray, lower-left */
.dev-tray{ position:absolute; left:9%; bottom:13%; width:44%; height:27%; border-radius:14px; z-index:2;
  background:radial-gradient(120% 140% at 32% 0%, color-mix(in oklab,var(--maroon) 82%,#000), var(--maroon-dark));
  box-shadow:inset 0 2px 16px rgba(0,0,0,.45), 0 16px 32px rgba(122,20,38,.22);
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,3%,18px); }
.dev-tray::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(224,192,103,.22); border-radius:9px; }
.dev-tray .pc{ width:clamp(22px,9%,32px); height:clamp(22px,9%,32px); color:var(--gold-soft); filter:drop-shadow(0 0 7px rgba(224,192,103,.6)); }
.dev-tray .pc svg{ width:100%; height:100%; }
body:not(.motion-off) .dev-tray .pc{ animation:srShimmer 2.6s var(--ease) infinite; }
.dev-tray .pc:nth-child(2){ animation-delay:.5s; } .dev-tray .pc:nth-child(3){ animation-delay:1s; }

/* handheld device, upper-right, angled toward the tray */
.dev-hand{ position:absolute; right:13%; top:13%; width:27%; max-width:130px; z-index:3; transform:rotate(-17deg); transform-origin:50% 80%; filter:drop-shadow(0 20px 30px rgba(58,42,28,.28)); }
body:not(.motion-off) .dev-hand{ animation:devFloat 5s var(--ease) infinite; }
@keyframes devFloat{ 0%,100%{ transform:rotate(-17deg) translateY(0); } 50%{ transform:rotate(-15deg) translateY(-6px); } }
.dev-hand svg{ width:100%; height:auto; display:block; }

/* RFID arcs from device toward the tray */
.dev-arcs{ position:absolute; left:41%; top:45%; width:84px; height:84px; z-index:2; }
.dev-arcs svg{ width:100%; height:100%; overflow:visible; }
.dev-arcs .arc{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; transform-origin:80% 50%; opacity:0; }
body:not(.motion-off) .dev-arcs .arc{ animation:arcPulse 2s var(--ease) infinite; }
body:not(.motion-off) .dev-arcs .arc.a2{ animation-delay:.3s; }
body:not(.motion-off) .dev-arcs .arc.a3{ animation-delay:.6s; }

.dev-spark{ position:absolute; width:14px; height:14px; color:var(--gold); opacity:0; z-index:4; }
.dev-spark svg{ width:100%; height:100%; }
body:not(.motion-off) .dev-spark{ animation:srSpark 3s var(--ease) infinite; }

.dev-label{ position:absolute; left:16px; top:14px; z-index:5; display:inline-flex; align-items:center; gap:8px;
  background:color-mix(in oklab,var(--ivory) 82%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:100px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--ink-70); }
.dev-label .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }