/* ==========================================================================
   CELLCO — live animated UI mockups (Stripe-grade layered visuals)
   Pure-CSS animations so every instance runs without per-node JS.
   Container sets --acc (accent) per product.
   ========================================================================== */
.mk{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, var(--acc,#2E7BD6) 22%, #fff), #eef4fb 60%, #ffffff);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);display:grid;place-items:center;padding:26px}
.mk .glow{position:absolute;width:280px;height:280px;border-radius:50%;right:-70px;top:-70px;
  background:radial-gradient(circle, color-mix(in srgb,var(--acc,#2E7BD6) 55%, transparent), transparent 70%);opacity:.5;filter:blur(6px)}
.mk .glow.b{left:-80px;bottom:-90px;top:auto;right:auto;background:radial-gradient(circle,rgba(31,160,232,.4),transparent 70%)}
.mk .tag{position:absolute;bottom:14px;left:16px;font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.09em;color:var(--muted);z-index:6;text-transform:uppercase}
.mk *{box-sizing:border-box}

/* floaty entrance for whole stage */
.mk .stage{position:relative;z-index:3;width:100%;height:100%;display:grid;place-items:center;animation:mkFloat 7s ease-in-out infinite}
@keyframes mkFloat{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}

/* ---- Phone frame ---- */
.phone{width:172px;height:310px;background:#0a1428;border:6px solid #16223d;border-radius:30px;position:relative;overflow:hidden;box-shadow:0 26px 60px -18px rgba(11,30,63,.55)}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:58px;height:15px;background:#16223d;border-radius:0 0 12px 12px;z-index:4}
.phone .scr{position:absolute;inset:5px;border-radius:24px;background:linear-gradient(170deg,#0e1c38,#0a1526);padding:26px 12px 14px;overflow:hidden}
.phone .bar{display:flex;align-items:center;gap:7px;padding:0 2px 12px;color:#8fa6c9;font-size:10px;font-weight:600}
.phone .bar .av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#5BC5F2)}

/* chat bubbles */
.bub{font-size:10.5px;line-height:1.35;padding:8px 10px;border-radius:13px;margin-bottom:8px;max-width:84%;color:#dbe8fb;background:#1a2c4d;opacity:0;transform:translateY(12px);animation:bubCycle 6s ease-in-out infinite}
.bub.me{margin-left:auto;color:#fff;background:linear-gradient(135deg,var(--acc),#1FA0E8);border-bottom-right-radius:4px}
.bub b{color:#fff}
.bub:nth-child(2){animation-delay:.3s}.bub:nth-child(3){animation-delay:1.4s}.bub:nth-child(4){animation-delay:2.6s}.bub:nth-child(5){animation-delay:3.6s}
.tick{font-size:9px;color:#5BC5F2;text-align:right;margin-top:-4px;opacity:0;animation:fadeLoop 6s ease-in-out infinite;animation-delay:3.9s}
@keyframes bubCycle{0%{opacity:0;transform:translateY(12px)}8%{opacity:1;transform:none}90%{opacity:1}100%{opacity:0}}
@keyframes fadeLoop{0%,60%{opacity:0}70%,92%{opacity:1}100%{opacity:0}}

/* ---- White UI card (dashboard) ---- */
.uicard{width:100%;max-width:290px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 50px -22px rgba(11,30,63,.4);padding:16px 16px 18px}
.uicard .h{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.uicard .h .ico{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--acc),#1FA0E8);display:grid;place-items:center;color:#fff;font-size:14px}
.uicard .h b{font-size:13px;font-family:'Space Grotesk'}
.uicard .h span{font-size:10.5px;color:var(--muted)}
.uicard .row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink);padding:6px 0;border-top:1px solid var(--line)}
.uicard .row span:last-child{color:var(--muted)}
.meter{height:8px;border-radius:6px;background:#eef2f8;overflow:hidden;margin:8px 0}
.meter i{display:block;height:100%;width:20%;border-radius:6px;background:linear-gradient(90deg,var(--acc),#5BC5F2);animation:meterFill 4s var(--ease-out-expo) infinite alternate}
@keyframes meterFill{0%{width:18%}100%{width:86%}}

/* bar chart */
.chart{display:flex;align-items:flex-end;gap:3px;height:64px;margin-top:8px}
.chart i{flex:1;background:linear-gradient(var(--acc),#5BC5F2);border-radius:3px 3px 0 0;height:20%;animation:barGrow 3s ease-in-out infinite alternate}
.chart i:nth-child(odd){animation-delay:.4s}.chart i:nth-child(3n){animation-delay:.8s}.chart i:nth-child(4n){animation-delay:1.2s}
@keyframes barGrow{0%{height:15%}100%{height:95%}}

/* ---- OTP ---- */
.otp{display:flex;gap:8px;justify-content:center;margin:14px 0}
.otp .d{width:34px;height:44px;border-radius:10px;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--ink);animation:otpFill 5s steps(1) infinite}
.otp .d:nth-child(1){animation-delay:.2s}.otp .d:nth-child(2){animation-delay:.6s}.otp .d:nth-child(3){animation-delay:1s}.otp .d:nth-child(4){animation-delay:1.4s}.otp .d:nth-child(5){animation-delay:1.8s}.otp .d:nth-child(6){animation-delay:2.2s}
@keyframes otpFill{0%{color:transparent;border-color:var(--line)}50%{color:var(--acc);border-color:var(--acc)}92%{color:var(--acc);border-color:var(--acc)}100%{color:transparent;border-color:var(--line)}}
.check{width:46px;height:46px;border-radius:50%;background:#1fbf75;display:grid;place-items:center;color:#fff;font-size:24px;margin:6px auto 0;transform:scale(0);animation:pop 5s ease-in-out infinite;animation-delay:2.6s}
@keyframes pop{0%,45%{transform:scale(0)}55%{transform:scale(1.15)}65%,92%{transform:scale(1)}100%{transform:scale(0)}}

/* ---- Flow (A2P) : node -> node -> node with packet ---- */
.flow{display:flex;align-items:center;gap:0;width:100%;max-width:300px;position:relative}
.flow .node2{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:11px;font-weight:600;color:var(--ink);box-shadow:0 10px 24px -14px rgba(11,30,63,.4);text-align:center;z-index:2;min-width:66px}
.flow .line{flex:1;height:2px;background:linear-gradient(90deg,var(--acc),#cfe0f3);position:relative}
.flow .line::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:pkt 2.4s linear infinite}
.flow .line.l2::after{animation-delay:1.2s}
@keyframes pkt{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}

/* ---- RCS carousel ---- */
.rcs{width:150px;overflow:hidden;border-radius:12px}
.rcs .track{display:flex;width:300px;animation:slide 6s ease-in-out infinite}
.rcs .rc{width:150px;flex-shrink:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(11,30,63,.4)}
.rcs .rc .img{height:70px;background:linear-gradient(135deg,var(--acc),#5BC5F2)}
.rcs .rc .bd{padding:8px 10px}
.rcs .rc .bd b{font-size:11px}
.rcs .rc .bd .btn2{margin-top:6px;font-size:9.5px;font-weight:700;color:var(--acc);border:1px solid var(--acc);border-radius:6px;padding:4px 0;text-align:center}
@keyframes slide{0%,40%{transform:translateX(0)}50%,90%{transform:translateX(-150px)}100%{transform:translateX(0)}}
.verified{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;color:var(--acc);font-weight:700;margin-bottom:6px}

/* ---- typing dots ---- */
.typing{display:inline-flex;gap:4px;background:#1a2c4d;padding:9px 12px;border-radius:13px}
.typing i{width:6px;height:6px;border-radius:50%;background:#8fa6c9;animation:td 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes td{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* ---- push notifications ---- */
.push{width:190px;position:relative;height:190px}
.push .n{position:absolute;left:0;right:0;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:14px;padding:10px 12px;box-shadow:0 12px 28px -14px rgba(11,30,63,.5);display:flex;gap:9px;align-items:center;opacity:0;transform:translateY(-16px)}
.push .n .ic{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--acc),#1FA0E8);flex-shrink:0}
.push .n b{font-size:11px;display:block}.push .n span{font-size:10px;color:var(--muted)}
.push .n:nth-child(1){top:0;animation:pushIn 5s ease-in-out infinite}
.push .n:nth-child(2){top:54px;animation:pushIn 5s ease-in-out infinite .5s}
.push .n:nth-child(3){top:108px;animation:pushIn 5s ease-in-out infinite 1s}
@keyframes pushIn{0%{opacity:0;transform:translateY(-16px)}12%{opacity:1;transform:none}88%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}

/* ---- waveform ---- */
.wf{display:flex;align-items:center;gap:4px;height:74px}
.wf i{width:5px;border-radius:4px;background:linear-gradient(var(--acc),#5BC5F2);height:30%;animation:wfb 1s ease-in-out infinite}
.wf i:nth-child(2n){animation-delay:.1s}.wf i:nth-child(3n){animation-delay:.25s}.wf i:nth-child(4n){animation-delay:.4s}.wf i:nth-child(5n){animation-delay:.15s}
@keyframes wfb{0%,100%{height:22%}50%{height:100%}}
.callhdr{display:flex;align-items:center;gap:9px;background:#fff;border-radius:12px;padding:9px 12px;box-shadow:0 12px 26px -16px rgba(11,30,63,.4);margin-bottom:14px}
.callhdr .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#5BC5F2)}
.callhdr b{font-size:12px}.callhdr span{font-size:10px;color:#1fbf75}

/* ---- route map / nodes with arcs (SVG) ---- */
.svgmk{width:100%;height:100%}
.svgmk .dot{fill:var(--acc)}
.svgmk .arc{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 8;animation:dash 2s linear infinite}
.svgmk .arc.f{stroke:#e0687a;opacity:.5;stroke-dasharray:4 6}
@keyframes dash{to{stroke-dashoffset:-28}}
.svgmk .pulse{fill:var(--acc);opacity:.6;animation:pl 2.2s ease-out infinite}
@keyframes pl{0%{r:2;opacity:.8}100%{r:16;opacity:0}}

/* ---- hub (SIP) ---- */
.hub{position:relative;width:100%;max-width:300px;height:200px}
.hub .c{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--acc),#1FA0E8);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;box-shadow:0 0 0 8px color-mix(in srgb,var(--acc) 16%,transparent);z-index:2}
.hub .sp{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:10px;font-weight:600;box-shadow:0 10px 22px -14px rgba(11,30,63,.4)}
.hub .sp:nth-child(2){top:0;left:0}.hub .sp:nth-child(3){top:0;right:0}.hub .sp:nth-child(4){bottom:0;left:0}.hub .sp:nth-child(5){bottom:0;right:0}
.hub .link{position:absolute;top:50%;left:50%;width:2px;height:60px;background:linear-gradient(var(--acc),transparent);transform-origin:top;opacity:.5}
.hub svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hub svg line{stroke:var(--acc);stroke-width:1.5;stroke-dasharray:4 6;animation:dash 1.8s linear infinite;opacity:.6}

/* ---- IVR tree ---- */
.ivr{width:100%;max-width:260px}
.ivr .r{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:11px;margin:6px 0;display:flex;gap:9px;align-items:center;box-shadow:0 8px 20px -16px rgba(11,30,63,.4);opacity:.5;animation:ivrLit 4s ease-in-out infinite}
.ivr .r .k{width:22px;height:22px;border-radius:6px;background:#eef2f8;display:grid;place-items:center;font-weight:700;font-size:11px;color:var(--acc)}
.ivr .r:nth-child(1){animation-delay:.3s}.ivr .r:nth-child(2){animation-delay:1.1s}.ivr .r:nth-child(3){animation-delay:1.9s}.ivr .r:nth-child(4){animation-delay:2.7s}
@keyframes ivrLit{0%,100%{opacity:.5;border-color:var(--line)}20%,40%{opacity:1;border-color:var(--acc);box-shadow:0 8px 22px -12px color-mix(in srgb,var(--acc) 60%,transparent)}}

/* ---- grid (PBX / IoT / fleet) ---- */
.gridmk{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;width:100%;max-width:280px}
.gridmk .cell{aspect-ratio:1;border-radius:9px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;box-shadow:0 8px 18px -16px rgba(11,30,63,.4);animation:cellLit 3s ease-in-out infinite}
.gridmk .cell:nth-child(3n){animation-delay:.5s}.gridmk .cell:nth-child(4n){animation-delay:1s}.gridmk .cell:nth-child(5n){animation-delay:1.5s}.gridmk .cell:nth-child(7n){animation-delay:.8s}
@keyframes cellLit{0%,100%{background:#fff}50%{background:color-mix(in srgb,var(--acc) 16%,#fff);border-color:var(--acc)}}

/* ---- omnichannel inbox ---- */
.inbox{width:100%;max-width:270px}
.inbox .it{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin:7px 0;box-shadow:0 8px 20px -16px rgba(11,30,63,.4);opacity:0;transform:translateX(14px);animation:inRow 5s ease-in-out infinite}
.inbox .it .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:12px}
.inbox .it b{font-size:11.5px;display:block;line-height:1.3}
.inbox .it span{font-size:10px;color:var(--muted);display:block;line-height:1.3}
.inbox .it .ic{flex-shrink:0}
.inbox .it:nth-child(1){animation-delay:.3s}.inbox .it:nth-child(2){animation-delay:1s}.inbox .it:nth-child(3){animation-delay:1.7s}.inbox .it:nth-child(4){animation-delay:2.4s}
@keyframes inRow{0%{opacity:0;transform:translateX(14px)}10%{opacity:1;transform:none}90%{opacity:1}100%{opacity:0}}

/* ---- AI think cycle ---- */
.aithink{display:flex;flex-direction:column;align-items:center;gap:16px}
.aithink .orb{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5BC5F2,var(--acc));position:relative;box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 50%,transparent);animation:orbP 2.4s ease-in-out infinite}
.aithink .orb::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid color-mix(in srgb,var(--acc) 40%,transparent);animation:ring2 2.4s ease-out infinite}
@keyframes orbP{0%,100%{transform:scale(.95)}50%{transform:scale(1.05)}}
@keyframes ring2{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.4);opacity:0}}
.aithink .state{font-family:'JetBrains Mono';font-size:11px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 14px;box-shadow:0 8px 20px -16px rgba(11,30,63,.4)}
.aithink .state::after{content:"Listening…";animation:aiState 6s steps(1) infinite}
@keyframes aiState{0%{content:"Listening…"}33%{content:"Thinking…"}66%{content:"Responding…"}100%{content:"Listening…"}}

/* ---- transcript lines ---- */
.trx{width:100%;max-width:280px}
.trx .ln{height:9px;border-radius:6px;background:linear-gradient(90deg,var(--acc),#cfe0f3);margin:8px 0;width:0;animation:lnGrow 4s ease-in-out infinite}
.trx .ln:nth-child(2){animation-delay:.4s;background:linear-gradient(90deg,#9fb6d6,#e6eef7)}
.trx .ln:nth-child(3){animation-delay:.8s}
.trx .ln:nth-child(4){animation-delay:1.2s;background:linear-gradient(90deg,#9fb6d6,#e6eef7)}
.trx .ln:nth-child(5){animation-delay:1.6s}
@keyframes lnGrow{0%{width:0;opacity:0}12%{opacity:1}20%,90%{width:100%;opacity:1}100%{width:0;opacity:0}}

/* ---- translate morph ---- */
.tl{display:flex;flex-direction:column;gap:12px;align-items:center;font-family:'Space Grotesk';font-weight:600;font-size:20px;color:var(--ink)}
.tl .w::after{content:"Hello";animation:tlw 6s steps(1) infinite}
@keyframes tlw{0%{content:"Hello"}25%{content:"Bonjour"}50%{content:"مرحبا"}75%{content:"你好"}100%{content:"Hello"}}
.tl .globe{width:52px;height:52px;border-radius:50%;border:2px dashed var(--acc);animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- summary collapse ---- */
.sum{display:flex;gap:14px;align-items:center;width:100%;max-width:290px}
.sum .long{flex:1;display:flex;flex-direction:column;gap:5px;animation:fadeLoop2 5s ease-in-out infinite}
.sum .long i{height:6px;border-radius:4px;background:#cfd9e8}
.sum .long i:nth-child(even){width:80%}
.sum .arrow2{color:var(--acc);font-size:20px}
.sum .card2{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 10px 24px -16px rgba(11,30,63,.4)}
.sum .card2 .li{display:flex;gap:7px;font-size:10.5px;margin:5px 0;align-items:center}
.sum .card2 .li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
@keyframes fadeLoop2{0%,100%{opacity:.4}50%{opacity:1}}

/* ---- funnel (sales) ---- */
.funnel{display:flex;flex-direction:column;gap:8px;width:100%;max-width:250px}
.funnel .st{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:11px;font-weight:600;display:flex;justify-content:space-between;box-shadow:0 8px 18px -16px rgba(11,30,63,.4);animation:cellLit 3.5s ease-in-out infinite}
.funnel .st:nth-child(1){width:100%}.funnel .st:nth-child(2){width:86%;animation-delay:.4s}.funnel .st:nth-child(3){width:72%;animation-delay:.8s}.funnel .st:nth-child(4){width:58%;animation-delay:1.2s}
.funnel .st span{color:var(--acc)}

/* ---- KB (service) query->kb->answer ---- */
.kb{width:100%;max-width:280px}
.kb .q{background:#1a2c4d;color:#dbe8fb;font-size:11px;padding:9px 12px;border-radius:13px 13px 13px 4px;max-width:80%;opacity:0;animation:bubCycle 6s ease-in-out infinite}
.kb .src{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.kb .src span{font-size:9.5px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--muted);opacity:0;animation:fadeLoop 6s ease-in-out infinite;animation-delay:1.5s}
.kb .a{background:linear-gradient(135deg,var(--acc),#1FA0E8);color:#fff;font-size:11px;padding:9px 12px;border-radius:13px 13px 4px 13px;max-width:82%;margin-left:auto;opacity:0;animation:bubCycle 6s ease-in-out infinite;animation-delay:2.6s}

/* ---- Wi-Fi bloom (rebuilt: GPU transforms, centred, contained) ---- */
.bloom{position:relative;width:200px;height:200px;display:grid;place-items:center}
.bloom .ap{position:relative;z-index:4;width:56px;height:56px;border-radius:18px;
  background:linear-gradient(140deg,var(--acc),#ffffff);color:#0B1526;display:grid;place-items:center;font-size:22px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55);animation:apBreathe 3.2s ease-in-out infinite}
@keyframes apBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.bloom .r{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;
  border-radius:50%;border:2px solid var(--acc);opacity:0;transform:scale(.28);
  animation:bloomR 3.2s cubic-bezier(.22,1,.36,1) infinite}
.bloom .r2{animation-delay:1.06s}
.bloom .r3{animation-delay:2.13s}
@keyframes bloomR{0%{transform:scale(.28);opacity:.9}60%{opacity:.3}100%{transform:scale(1);opacity:0}}
.bloom .dev{position:absolute;z-index:3;width:34px;height:34px;border-radius:11px;
  background:#fff;border:1px solid color-mix(in srgb,var(--acc) 55%,#fff);
  display:grid;place-items:center;font-size:15px;box-shadow:0 8px 18px -8px rgba(0,0,0,.45);
  animation:devJoin 3.2s ease-in-out infinite}
.bloom .d1{top:8px;right:4px;animation-delay:.5s}
.bloom .d2{bottom:34px;left:0;animation-delay:1.5s}
.bloom .d3{bottom:2px;right:36px;animation-delay:2.5s}
@keyframes devJoin{0%,100%{transform:scale(.9);opacity:.55}18%,55%{transform:scale(1);opacity:1}}

/* ---- handoff ---- */
.handoff{position:relative;width:100%;max-width:290px;height:120px}
.handoff .ap{position:absolute;top:20px;width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--acc),#1FA0E8);color:#fff;display:grid;place-items:center;font-size:14px}
.handoff .ap.a1{left:10px}.handoff .ap.a2{right:10px}
.handoff .dev{position:absolute;top:78px;left:20px;width:22px;height:22px;border-radius:6px;background:#fff;border:2px solid var(--acc);animation:move 5s ease-in-out infinite}
@keyframes move{0%,10%{left:20px}50%,60%{left:calc(100% - 42px)}100%{left:20px}}
.handoff .lnk{position:absolute;top:40px;height:2px;background:var(--acc);opacity:.4}

/* ---- offload bar ---- */
.offload{width:100%;max-width:280px}
.offload .lbl2{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-bottom:6px}
.offload .track2{height:22px;border-radius:11px;background:#eaf0f8;overflow:hidden;display:flex}
.offload .track2 .cell{background:linear-gradient(90deg,var(--acc),#5BC5F2);animation:off 5s ease-in-out infinite}
.offload .track2 .wifi{flex:2}.offload .track2 .cel{flex:1;background:#c9d6e8;animation:off2 5s ease-in-out infinite}
@keyframes off{0%,100%{flex:1.4}50%{flex:3}}
@keyframes off2{0%,100%{flex:2}50%{flex:.7}}

/* ---- venue map ---- */
.venue{position:relative;width:100%;max-width:280px;aspect-ratio:16/10;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px -18px rgba(11,30,63,.4);overflow:hidden}
.venue .zone{position:absolute;border-radius:8px;background:color-mix(in srgb,var(--acc) 12%,#fff);border:1px solid color-mix(in srgb,var(--acc) 30%,#fff);animation:zoneP 3s ease-in-out infinite}
.venue .zone:nth-child(1){top:10%;left:8%;width:36%;height:34%}
.venue .zone:nth-child(2){top:10%;right:8%;width:36%;height:34%;animation-delay:.7s}
.venue .zone:nth-child(3){bottom:10%;left:8%;width:36%;height:34%;animation-delay:1.4s}
.venue .zone:nth-child(4){bottom:10%;right:8%;width:36%;height:34%;animation-delay:2.1s}
@keyframes zoneP{0%,100%{background:color-mix(in srgb,var(--acc) 8%,#fff)}50%{background:color-mix(in srgb,var(--acc) 26%,#fff)}}

/* ---- eSIM chip (rebuilt: real contact pads, activation sweep, contained badge) ---- */
.esim{position:relative;width:200px;height:176px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
/* NOTE 1: class is .simchip, NOT .chip — `.chip` is the global pill class in
   cellco.css which sets opacity:0 (GSAP animates it in) and would hide this.
   NOTE 2: chip surface must stay LIGHTER than the dark panel it sits on
   (panel is #0B1526) or it disappears into the background. */
.esim .simchip{width:132px;height:100px;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#3A5180,#1B2C4A 60%,#223354);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.7),
             0 0 0 6px color-mix(in srgb,var(--acc) 16%,transparent),
             inset 0 1px 0 rgba(255,255,255,.18)}
.esim .pads{position:absolute;inset:18px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:7px}
.esim .pads i{border-radius:4px;background:var(--acc);opacity:.35;animation:padLit 2.8s ease-in-out infinite}
.esim .pads i:nth-child(1){animation-delay:0s}.esim .pads i:nth-child(2){animation-delay:.18s}
.esim .pads i:nth-child(3){animation-delay:.36s}.esim .pads i:nth-child(4){animation-delay:.54s}
.esim .pads i:nth-child(5){animation-delay:.72s}.esim .pads i:nth-child(6){animation-delay:.9s}
@keyframes padLit{0%,100%{opacity:.3}45%{opacity:1}}
.esim .sweep{position:absolute;top:-30%;left:-40%;width:45%;height:170%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);animation:esimSweep 2.8s ease-in-out infinite}
@keyframes esimSweep{0%{left:-40%}55%,100%{left:120%}}
.esim .ok{font-size:11px;font-weight:700;color:#0B1526;background:#fff;padding:7px 14px;border-radius:99px;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(6px);
  animation:okIn 2.8s ease-in-out infinite}
@keyframes okIn{0%,40%{opacity:0;transform:translateY(6px)}55%,90%{opacity:1;transform:none}100%{opacity:0}}

/* ---- travel / roaming map ---- */
.tmap{position:relative;width:100%;max-width:280px;aspect-ratio:16/10;background:radial-gradient(circle at 50% 50%,#0e1c38,#0a1428);border-radius:14px;overflow:hidden;box-shadow:0 16px 36px -18px rgba(11,30,63,.6)}
.tmap .p{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.tmap .p:nth-child(1){top:30%;left:18%}.tmap .p:nth-child(2){top:55%;left:44%}.tmap .p:nth-child(3){top:38%;left:74%}
.tmap svg{position:absolute;inset:0;width:100%;height:100%}
.tmap path{fill:none;stroke:var(--acc);stroke-width:1.5;stroke-dasharray:5 6;animation:dash 2s linear infinite}
.tmap .plane{position:absolute;font-size:16px;animation:fly 6s linear infinite;top:30%;left:18%}
@keyframes fly{0%{top:30%;left:18%}50%{top:38%;left:74%}100%{top:30%;left:18%}}

/* ---- network API cards ---- */
.apicards{width:100%;max-width:280px}
.apicards .req{font-family:'JetBrains Mono';font-size:10px;background:#0c1a33;color:#5BC5F2;border-radius:8px;padding:8px 11px;margin-bottom:10px}
.apicards .res{display:flex;gap:8px;flex-wrap:wrap}
.apicards .res .c{flex:1;min-width:80px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;box-shadow:0 8px 18px -16px rgba(11,30,63,.4);opacity:0;transform:translateY(10px);animation:inRow 5s ease-in-out infinite}
.apicards .res .c:nth-child(2){animation-delay:.6s}
.apicards .res .c b{font-size:14px;color:#1fbf75;display:block}
.apicards .res .c span{font-size:9.5px;color:var(--muted)}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
  .mk *{animation:none!important}
  .otp .d{color:var(--acc)!important}
  .tl .w::after{content:"Hello · Bonjour · 你好"}
  .aithink .state::after{content:"Listening · Thinking · Responding"}
}
@media(max-width:560px){.mk{aspect-ratio:1/1}}

/* ---- Home pillar mini-visuals ---- */
.pv{margin-top:20px;height:104px;border-radius:14px;position:relative;overflow:hidden;display:grid;place-items:center;padding:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc,#2E7BD6) 16%,#fff),#fff);border:1px solid var(--line)}
.pv .wf{height:46px}.pv .wf i{width:4px}
.pv-orb{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5BC5F2,var(--acc));animation:orbP 2.4s ease-in-out infinite;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--acc) 60%,transparent)}
.pvbub{position:absolute;font-size:10px;font-weight:600;padding:6px 9px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px -14px rgba(11,30,63,.4)}
.pvbub.b1{top:16px;left:16px;animation:mkFloat 4s ease-in-out infinite}
.pvbub.b2{bottom:16px;right:16px;color:#fff;background:linear-gradient(135deg,var(--acc),#1FA0E8);border:none;animation:mkFloat 4s ease-in-out infinite .6s}
.pv .bloom{transform:scale(.62)}.pv .esim{transform:scale(.7)}
.pv .chip-flags{display:flex;gap:8px}.pv .chip-flags span{width:26px;height:18px;border-radius:4px;background:linear-gradient(135deg,var(--acc),#5BC5F2);opacity:.5;animation:cellLit 2.4s ease-in-out infinite}
.pv .chip-flags span:nth-child(2){animation-delay:.4s}.pv .chip-flags span:nth-child(3){animation-delay:.8s}