/* Animated 3D banners */
.banner{container-type:inline-size;position:relative;aspect-ratio:16/5;overflow:hidden;border-radius:16px;font-family:Poppins,Inter,system-ui,sans-serif;color:#fff;isolation:isolate;display:block}
.banner *{box-sizing:border-box}
.banner .bg{position:absolute;inset:0;z-index:-1}
.banner .copy{position:absolute;left:5.5cqw;top:50%;transform:translateY(-50%);width:44cqw;z-index:3}
.banner .tag{display:inline-block;font-size:1cqw;font-weight:600;letter-spacing:.25em;padding:.5cqw 1.1cqw;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px)}
.banner h2{color:#fff;font-size:4.3cqw;line-height:1.08;margin:1.3cqw 0 1.1cqw;font-weight:800;letter-spacing:-.02em}
.banner h2 em{font-style:normal;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a1));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bnShine 3s linear infinite}
.banner p{font-size:1.45cqw;line-height:1.5;margin:0 0 2cqw;opacity:.85;max-width:36cqw;font-weight:500}
.banner .cta{display:inline-flex;align-items:center;gap:.7cqw;font-size:1.3cqw;font-weight:600;padding:1cqw 2.2cqw;border-radius:99px;background:var(--a1);color:var(--ink);text-decoration:none;animation:bnCtaPulse 1.5s ease-in-out infinite}
.banner .cta i{font-style:normal;display:inline-block;animation:bnNudge 1s ease-in-out infinite}
.banner .scene{position:absolute;right:0;top:0;width:56%;height:100%;perspective:90cqw;z-index:2}
.banner .anchor{position:absolute;left:50%;top:55%;transform-style:preserve-3d}
.banner .p3d{transform-style:preserve-3d;position:absolute}
.banner .face{position:absolute;left:0;top:0;backface-visibility:visible}
.banner .gshadow{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(rgba(0,0,0,.45),transparent 70%)}
@keyframes bnShine{to{background-position:-200% 0}}
@keyframes bnCtaPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a1) 60%,transparent)}70%{box-shadow:0 0 0 1.2cqw transparent}}
@keyframes bnNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(.4cqw)}}
@keyframes bnSway{from{transform:rotateX(-18deg) rotateY(-32deg)}to{transform:rotateX(-18deg) rotateY(32deg)}}
@keyframes bnBob{from{transform:translateY(-1cqw)}to{transform:translateY(1cqw)}}
@keyframes bnSpin{to{transform:rotate(360deg)}}
@keyframes bnTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
@keyframes bnRing{from{transform:translate(-50%,-50%) scale(.2);opacity:.9}to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes bnBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}

/* 1. Network */
.b-net{--a1:#22d3ee;--a2:#a5f3fc;--ink:#082f49}
.b-net .bg{background:radial-gradient(60cqw 40cqw at 75% 50%,#1d4e89 0%,transparent 70%),linear-gradient(120deg,#0b2545,#0d2b52 60%,#0b1f3a)}
.b-net .bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(165,243,252,.25) 1px,transparent 1.5px);background-size:2cqw 2cqw;mask-image:linear-gradient(90deg,transparent 30%,#000);animation:bnGridDrift 3s linear infinite}
@keyframes bnGridDrift{to{background-position:2cqw 2cqw}}
.b-net .links{position:absolute;inset:0;width:100%;height:100%}
.b-net .links path{fill:none;stroke:#22d3ee;stroke-width:2;stroke-dasharray:6 10;opacity:.55;animation:bnDash 1s linear infinite}
.b-net .links circle{fill:#a5f3fc;animation:bnNodePulse 1.5s ease-in-out infinite alternate}
.b-net .links circle:nth-of-type(2n){animation-delay:-.75s}
@keyframes bnDash{to{stroke-dashoffset:-16}}
@keyframes bnNodePulse{from{r:3;opacity:.5}to{r:6;opacity:1}}
.b-net .wave{position:absolute;left:50%;top:-6cqw;width:26cqw;height:26cqw;border-radius:50%;border:.25cqw solid rgba(34,211,238,.7);animation:bnRing 3s ease-out infinite}
.b-net .wave:nth-child(2){animation-delay:-1s}.b-net .wave:nth-child(3){animation-delay:-2s}
.b-net .router{animation:bnSway 3s ease-in-out infinite alternate}
.b-net .router .face{background:linear-gradient(160deg,#1e293b,#0f172a);border:1px solid #334155}
.b-net .router .top{background:linear-gradient(135deg,#334155,#1e293b 60%)}
.b-net .router .front{display:flex;align-items:center;gap:.55cqw;padding:0 1.4cqw;background:linear-gradient(#1e293b,#111827)}
.b-net .port{width:1.5cqw;height:1.3cqw;background:#020617;border:.15cqw solid #475569;border-radius:.15cqw;position:relative}
.b-net .port::after{content:"";position:absolute;top:-.55cqw;left:.2cqw;width:.35cqw;height:.35cqw;border-radius:50%;background:#4ade80;box-shadow:0 0 .6cqw #4ade80;animation:bnBlink .5s steps(1) infinite}
.b-net .port:nth-child(2n)::after{animation-duration:.75s;background:#facc15;box-shadow:0 0 .6cqw #facc15}
.b-net .port:nth-child(3n)::after{animation-duration:1s}
.b-net .pwr{margin-left:auto;width:.7cqw;height:.7cqw;border-radius:50%;background:#22d3ee;box-shadow:0 0 1cqw #22d3ee}
.b-net .ant{position:absolute;width:.8cqw;height:10cqw;border-radius:.4cqw;background:linear-gradient(90deg,#334155,#0f172a);left:0;top:0}

/* 2. Fashion */
.b-fash{--a1:#fde68a;--a2:#fb7185;--ink:#431407}
.b-fash .bg{background:radial-gradient(50cqw 40cqw at 72% 55%,#b45309 0%,transparent 70%),linear-gradient(120deg,#7c2d12,#8a3414 55%,#5c1f0b)}
.b-fash .bg::after{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2cqw,transparent 2cqw 6cqw);animation:bnStripes 3s linear infinite}
@keyframes bnStripes{to{transform:translateX(6.6cqw)}}
.b-fash .bag .face{border-radius:.2cqw}
.b-fash .bagwrap{animation:bnBob 1.5s ease-in-out infinite alternate}
.b-fash .bag{animation:bnBagSway 3s ease-in-out infinite alternate}
@keyframes bnBagSway{from{transform:rotateX(-10deg) rotateY(-28deg)}to{transform:rotateX(-10deg) rotateY(28deg)}}
.b-fash .handle{position:absolute;left:50%;transform:translateX(-50%);border:.55cqw solid;border-bottom:none;border-radius:3cqw 3cqw 0 0}
.b-fash .bdg{position:absolute;width:12cqw;height:12cqw;animation:bnSpin 6s linear infinite}
.b-fash .bdg text{font:700 11px Poppins,sans-serif;letter-spacing:3.2px;fill:#fde68a}
.b-fash .bdg-core{position:absolute;width:6cqw;height:6cqw;border-radius:50%;background:#fde68a;color:#7c2d12;display:grid;place-items:center;font-weight:800;font-size:1.3cqw;line-height:1.05;text-align:center}
.b-fash .spark{position:absolute;width:1.6cqw;height:1.6cqw;background:#fde68a;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:bnTwinkle 1.5s ease-in-out infinite}

/* 3. Smart home */
.b-home{--a1:#6ee7b7;--a2:#fde047;--ink:#022c22}
.b-home .bg{background:radial-gradient(50cqw 40cqw at 72% 50%,#0f766e 0%,transparent 70%),linear-gradient(120deg,#064e3b,#065f46 55%,#033d2e)}
.b-home .bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 55%,transparent 0 8cqw,rgba(110,231,183,.08) 8cqw 8.2cqw,transparent 8.2cqw 14cqw,rgba(110,231,183,.06) 14cqw 14.2cqw,transparent 14.2cqw 20cqw,rgba(110,231,183,.05) 20cqw 20.2cqw,transparent 20.2cqw)}
.b-home .house{animation:bnHouseSway 3s ease-in-out infinite alternate}
@keyframes bnHouseSway{from{transform:rotateX(-14deg) rotateY(-40deg)}to{transform:rotateX(-14deg) rotateY(20deg)}}
.b-home .wall{background:linear-gradient(#f1f5f9,#cbd5e1)}
.b-home .wall.side{background:linear-gradient(#e2e8f0,#94a3b8)}
.b-home .roof{background:repeating-linear-gradient(0deg,#0f766e 0 1cqw,#115e59 1cqw 1.15cqw)}
.b-home .gable{background:#e2e8f0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.b-home .win{position:absolute;width:3.2cqw;height:3cqw;border-radius:.3cqw;border:.3cqw solid #475569;background:#fde047;box-shadow:0 0 1.5cqw #fde047;animation:bnLights 3s ease-in-out infinite}
.b-home .door{position:absolute;width:3.2cqw;height:5.2cqw;bottom:0;left:50%;transform:translateX(-50%);background:#0f766e;border-radius:1.6cqw 1.6cqw 0 0}
@keyframes bnLights{0%,40%{background:#fde047;box-shadow:0 0 1.6cqw #fde047}50%,90%{background:#334155;box-shadow:none}100%{background:#fde047;box-shadow:0 0 1.6cqw #fde047}}
.b-home .wifi{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;border:.45cqw solid transparent;border-top-color:#6ee7b7;animation:bnWifi 1.5s ease-in-out infinite}
@keyframes bnWifi{0%,100%{opacity:.2}50%{opacity:1}}
.b-home .orbit{animation:bnOrbit 6s linear infinite}
@keyframes bnOrbit{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}
.b-home .chip{position:absolute;width:4.4cqw;height:4.4cqw;margin:-2.2cqw;border-radius:1.2cqw;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.3)}
.b-home .chip svg{width:2.6cqw;height:2.6cqw}
.b-home .chip-in{animation:bnCounter 6s linear infinite;transform-origin:50% 50%}
@keyframes bnCounter{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}
@keyframes bnCounter120{from{transform:rotateY(-120deg)}to{transform:rotateY(-480deg)}}
@keyframes bnCounter240{from{transform:rotateY(-240deg)}to{transform:rotateY(-600deg)}}

/* 4. Grocery */
.b-groc{--a1:#facc15;--a2:#fb923c;--ink:#1a2e05}
.b-groc .bg{background:radial-gradient(50cqw 40cqw at 72% 55%,#15803d 0%,transparent 70%),linear-gradient(120deg,#14532d,#166534 55%,#0f3f22)}
.b-groc .leaf{position:absolute;top:-3cqw;width:1.8cqw;height:1cqw;border-radius:0 100% 0 100%;background:#4ade80;opacity:.7;animation:bnFall 3s linear infinite}
@keyframes bnFall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(38cqw) rotate(540deg)}}
.b-groc .bag{animation:bnSway 3s ease-in-out infinite alternate}
.b-groc .bag .face{background:linear-gradient(#d6a76c,#b07d43)}
.b-groc .bag .front{background:linear-gradient(#e0b47a,#c08a4d);display:grid;place-items:center}
.b-groc .bag .front span{font-weight:800;font-size:1.5cqw;color:#5b3a12;border:.2cqw dashed #5b3a12;padding:.4cqw .9cqw;border-radius:.6cqw;letter-spacing:.1em}
.b-groc .fruit{position:absolute;border-radius:50%;animation:bnFbob 1.5s ease-in-out infinite alternate}
@keyframes bnFbob{from{transform:translateY(-.8cqw) rotate(-8deg)}to{transform:translateY(.8cqw) rotate(8deg)}}
.b-groc .orange{background:radial-gradient(circle at 32% 30%,#fff7 0 6%,#fdba74 12%,#f97316 45%,#9a3412 100%)}
.b-groc .apple{background:radial-gradient(circle at 32% 30%,#fff8 0 6%,#fca5a5 12%,#dc2626 45%,#7f1d1d 100%)}
.b-groc .lime{background:radial-gradient(circle at 32% 30%,#fff8 0 6%,#d9f99d 12%,#65a30d 45%,#365314 100%)}
.b-groc .fruit .stem{position:absolute;left:46%;top:-12%;width:8%;height:22%;background:#713f12;border-radius:2px}
.b-groc .fruit .lf{position:absolute;left:52%;top:-14%;width:35%;height:20%;border-radius:0 100% 0 100%;background:#22c55e}
.b-groc .bdg{position:absolute;width:9cqw;height:9cqw;border-radius:50%;background:#facc15;color:#14532d;display:grid;place-items:center;text-align:center;font-weight:800;font-size:1.25cqw;line-height:1.1;box-shadow:0 0 0 .5cqw rgba(250,204,21,.3);animation:bnBadgeWob 1.5s ease-in-out infinite alternate}
@keyframes bnBadgeWob{from{transform:rotate(-10deg) scale(.95)}to{transform:rotate(8deg) scale(1.05)}}

/* 5. Gaming */
.b-game{--a1:#e879f9;--a2:#22d3ee;--ink:#2e1065}
.b-game .bg{background:linear-gradient(#1e1b4b 0%,#312e81 55%,#3b0764 100%)}
.b-game .sun{position:absolute;right:16cqw;top:3cqw;width:20cqw;height:20cqw;border-radius:50%;background:linear-gradient(#f0abfc,#e879f9 40%,#7c3aed);mask-image:repeating-linear-gradient(#000 0 1.6cqw,transparent 1.6cqw 2.1cqw);opacity:.55;filter:blur(.1cqw)}
.b-game .floor{position:absolute;left:-50%;right:-50%;bottom:-6cqw;height:22cqw;transform-origin:50% 100%;transform:perspective(30cqw) rotateX(62deg);background-image:linear-gradient(#e879f9 .15cqw,transparent .15cqw),linear-gradient(90deg,#22d3ee .12cqw,transparent .12cqw);background-size:4cqw 4cqw;animation:bnFloor 1s linear infinite;mask-image:linear-gradient(transparent,#000 60%);opacity:.7}
@keyframes bnFloor{to{background-position:0 4cqw}}
.b-game .cube{animation:bnCubeSpin 6s linear infinite}
@keyframes bnCubeSpin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
.b-game .cube .face{border:.3cqw solid #e879f9;background:rgba(232,121,249,.12);box-shadow:0 0 1.5cqw #e879f9,inset 0 0 2cqw rgba(232,121,249,.5)}
.b-game .inner{animation:bnInnerSpin 3s linear infinite}
@keyframes bnInnerSpin{from{transform:rotateX(0) rotateZ(0)}to{transform:rotateX(-360deg) rotateZ(360deg)}}
.b-game .inner .face{border:.25cqw solid #22d3ee;background:rgba(34,211,238,.25);box-shadow:0 0 1.2cqw #22d3ee}
.b-game .gfloat{animation:bnBob 1.5s ease-in-out infinite alternate}
.b-game .gbtn{position:absolute;width:3cqw;height:3cqw;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.3cqw;border:.25cqw solid currentColor;box-shadow:0 0 1cqw currentColor;animation:bnBob 1.5s ease-in-out infinite alternate}
.b-game h2 em{animation:bnShine 3s linear infinite,bnFlick 3s steps(1) infinite}
@keyframes bnFlick{0%,100%{opacity:1}31%{opacity:.4}33%{opacity:1}64%{opacity:.6}65%{opacity:1}}

/* Phones: taller banner, bigger text */
@media (max-width:640px){
  .banner{aspect-ratio:16/9;border-radius:12px}
  .banner .copy{width:62cqw;left:5cqw}
  .banner .tag{font-size:2.3cqw;padding:.8cqw 2cqw}
  .banner h2{font-size:7.2cqw}
  .banner p{display:none}
  .banner .cta{font-size:3cqw;padding:1.8cqw 3.6cqw}
  .banner .scene{width:52%;transform:translateX(6%)}
}
@media (prefers-reduced-motion:reduce){.banner *,.banner *::before,.banner *::after{animation:none!important}}