/* Card → Code Scanner band (embedded version) — all classes namespaced cs- */
.cs-band{
  margin:34px 0 10px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:#04050a;
  border:1px solid rgba(120,100,255,.18);
  box-shadow:0 24px 60px -24px rgba(60,40,160,.35);
  background-image:
    radial-gradient(700px 400px at 12% 0%,rgba(110,80,255,.12),transparent 60%),
    radial-gradient(700px 400px at 92% 100%,rgba(60,110,255,.10),transparent 60%);
}
.cs-stage{
  position:relative;
  height:380px;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}
.cs-stage:active{cursor:grabbing}
.cs-hint{
  position:absolute;left:0;right:0;bottom:10px;
  text-align:center;font-size:11.5px;color:#6d7286;
  letter-spacing:.08em;pointer-events:none;z-index:3;
}
.cs-cards{position:absolute;inset:0}

.cs-card-wrapper{
  position:absolute;top:65px;
  width:400px;height:250px;
  will-change:transform;
}
.cs-card{
  position:absolute;inset:0;
  border-radius:15px;
  overflow:hidden;
  will-change:clip-path;
}
.cs-code-layer{
  background:#030309;
  border:1px solid rgba(140,110,255,.28);
}
.cs-code-layer pre{
  margin:0;padding:10px 12px;
  font-family:'Cascadia Code','JetBrains Mono',Consolas,'Courier New',monospace;
  font-size:10.5px;line-height:1.42;
  color:#c4b0ff;
  text-shadow:0 0 7px rgba(150,100,255,.4);
  white-space:pre;overflow:hidden;
  user-select:none;
}
.cs-image-layer img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;user-select:none;
  -webkit-user-drag:none;
}
.cs-image-layer{transition:filter .08s linear}

.cs-scanner{
  position:absolute;top:0;bottom:0;left:34%;
  width:3px;transform:translateX(-50%);
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(190,170,255,.55) 12%,
    #ffffff 26%, #ffffff 74%,
    rgba(190,170,255,.55) 88%,
    transparent 100%);
  box-shadow:
    0 0 10px 1px rgba(255,255,255,.55),
    0 0 26px 4px rgba(150,110,255,.55),
    0 0 70px 14px rgba(110,80,255,.30);
  pointer-events:none;
  transition:box-shadow .15s;
}
.cs-scanner::before,.cs-scanner::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:7px;height:22px;border-radius:50%;
  background:#fff;filter:blur(5px);
}
.cs-scanner::before{top:-8px}
.cs-scanner::after{bottom:-8px}
.cs-scanner.cs-active{
  box-shadow:
    0 0 14px 2px rgba(255,255,255,.85),
    0 0 38px 8px rgba(160,120,255,.75),
    0 0 110px 26px rgba(110,80,255,.45);
}
.cs-fx{position:absolute;inset:0;pointer-events:none}

@media (max-width:900px){
  .cs-stage{height:300px}
  .cs-card-wrapper{top:38px;width:340px;height:212px}
  .cs-code-layer pre{font-size:9.5px}
}

/* embedded full-bleed on the dark gift section of the homepage */
.gift-band{position:relative;padding:0;margin:0}
.gift-band .band-head{display:none}
.cs-band.cs-home{
  border:none;border-radius:0;box-shadow:none;margin:0;
  background:#04050a;
  border-top:1px solid rgba(120,100,255,.14);
  border-bottom:1px solid rgba(120,100,255,.14);
}
.cs-band.cs-home .cs-stage{height:400px}
@media (max-width:900px){.cs-band.cs-home .cs-stage{height:300px}}