:root{
  --bg:#07060f; --line:rgba(255,255,255,.12); --txt:#f2f0ff; --muted:#9a94bd;
  --acc:#7c5cff; --acc2:#00e5ff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  min-height:100vh;overflow:hidden}
.scene{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;
  display:grid;place-items:center;perspective:1000px}
.layer{position:absolute;inset:-6%;will-change:transform;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.scene.dragging .layer{transition:none}

/* Hintergrund */
.l-bg{background:radial-gradient(120% 90% at 50% 0%, #140c2b 0%, #07060f 65%)}
.grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(124,92,255,.14) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(124,92,255,.14) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent);
  mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent)}

/* Orbs */
.l-orbs .orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.75}
.o1{width:340px;height:340px;left:6%;top:12%;background:radial-gradient(circle,#7c5cff,transparent 70%)}
.o2{width:280px;height:280px;right:8%;top:52%;background:radial-gradient(circle,#00e5ff,transparent 70%)}
.o3{width:220px;height:220px;left:56%;top:8%;background:radial-gradient(circle,#ff2d95,transparent 70%)}

/* Bild */
.l-img{display:grid;place-items:center}
.l-img img{width:min(72vw,760px);aspect-ratio:16/10;object-fit:cover;border-radius:34px;opacity:.42;
  box-shadow:0 60px 140px rgba(0,0,0,.7);border:1px solid var(--line)}

/* Text */
.l-text{display:grid;place-items:center;text-align:center;padding:0 18px}
.pill{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc2);
  border:1px solid var(--line);padding:7px 16px;border-radius:99px;background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px)}
h1{font-size:clamp(40px,11vw,110px);letter-spacing:-.035em;margin:18px 0 12px;line-height:.95}
h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 40px rgba(124,92,255,.5))}
.l-text p{max-width:52ch;color:#cdc7e8;font-size:clamp(14px,2.4vw,17px);line-height:1.65;
  text-shadow:0 4px 24px rgba(0,0,0,.8)}

/* Vordergrund */
.chip{position:absolute;padding:13px 20px;border-radius:15px;font-size:13.5px;font-weight:600;
  background:rgba(14,10,28,.72);border:1px solid var(--line);backdrop-filter:blur(14px);
  box-shadow:0 20px 44px rgba(0,0,0,.55)}
.c1{left:7%;top:74%}
.c2{right:9%;top:22%}
.c3{right:16%;bottom:16%}
.badge{position:absolute;left:9%;top:20%;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;letter-spacing:.06em;font-size:14px;color:#08060f;
  background:conic-gradient(from 180deg,var(--acc),var(--acc2),var(--acc));
  box-shadow:0 24px 60px rgba(0,229,255,.4);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.l-canvas{pointer-events:none}

.hud{position:absolute;left:0;right:0;bottom:0;display:flex;gap:12px;align-items:center;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));z-index:10;
  background:linear-gradient(to top, rgba(5,4,12,.85), transparent)}
.hud span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.btn{padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);
  color:var(--txt);font-family:inherit;font-size:13px;cursor:pointer;transition:.3s;backdrop-filter:blur(10px)}
.btn:hover{background:linear-gradient(90deg,var(--acc),var(--acc2));border-color:transparent;color:#07060f;
  transform:translateY(-2px)}
.hud .btn:first-of-type{margin-left:auto}

@media (max-width:760px){
  .l-img img{width:88vw}
  .chip{padding:10px 14px;font-size:12.5px}
  .c1{left:5%;top:78%}
  .c2{right:5%;top:14%}
  .c3{display:none}
  .badge{width:72px;height:72px;font-size:12px;left:6%;top:14%}
}
@media (prefers-reduced-motion:reduce){.layer{transition:none!important}}