/* =========================================================
   LiloCall AI · Native Szenen (CSS statt Hintergrundbild)
   Raum, Licht, Bokeh und Schreibtisch sind reines CSS,
   nur die Frau ist ein freigestelltes Bild (transparent).
   ========================================================= */
.scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(38% 46% at 78% 30%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(60% 70% at 15% 40%,rgba(90,180,240,.4) 0%,rgba(120,215,255,0) 70%),
    linear-gradient(160deg,#13bbff 0%,#059aed 45%,#0c80d4 100%)}
.scene--l{background:
    radial-gradient(38% 46% at 22% 30%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(60% 70% at 85% 40%,rgba(90,180,240,.4) 0%,rgba(120,215,255,0) 70%),
    linear-gradient(200deg,#13bbff 0%,#059aed 45%,#0c80d4 100%)}
.scene--c{background:
    radial-gradient(40% 50% at 55% 30%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(170deg,#13bbff 0%,#0696e9 50%,#0c80d4 100%)}

/* weiche Bokeh-Lichter (nur Verläufe, kein Blur-Filter → performant) */
.scene__bokeh{position:absolute;inset:0;background:
  radial-gradient(circle at 70% 18%,rgba(255,236,190,.75) 0 1.6%,rgba(255,236,190,0) 4.5%),
  radial-gradient(circle at 92% 30%,rgba(255,226,170,.6) 0 1.8%,rgba(255,226,170,0) 5%),
  radial-gradient(circle at 60% 52%,rgba(255,240,210,.55) 0 1.2%,rgba(255,240,210,0) 3.6%),
  radial-gradient(circle at 86% 62%,rgba(255,255,255,.5) 0 1.4%,rgba(255,255,255,0) 4%),
  radial-gradient(circle at 96% 8%,rgba(255,255,255,.45) 0 2.4%,rgba(255,255,255,0) 6%)}
.scene--l .scene__bokeh{transform:scaleX(-1)}

/* Regal-Silhouette + Neon-Lichtleiste */
.scene__shelf{position:absolute;right:2%;top:12%;width:26%;height:58%;border-radius:6px;opacity:.55;
  background:
    linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) 0 32%/100% 3px no-repeat,
    linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) 0 64%/100% 3px no-repeat,
    linear-gradient(90deg,rgba(255,255,255,.55) 0 3px,transparent 3px calc(100% - 3px),rgba(255,255,255,.55) calc(100% - 3px));
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.scene--l .scene__shelf{right:auto;left:2%}
.scene__neon{position:absolute;right:-4%;top:9%;width:30%;height:6px;border-radius:6px;transform:rotate(-6deg);
  background:linear-gradient(90deg,rgba(130,240,255,0),#8ff0ff 40%,#d6fbff);box-shadow:0 0 18px 4px rgba(120,235,255,.75)}
.scene--l .scene__neon{right:auto;left:-4%;transform:rotate(6deg) scaleX(-1)}

/* Schreibtisch */
.scene__desk{position:absolute;left:0;right:0;bottom:0;height:16%;
  background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(225,242,255,.92) 18%,rgba(160,215,250,.55) 100%);
  box-shadow:0 -2px 0 rgba(255,255,255,.9),0 -30px 60px -20px rgba(255,255,255,.6)}
.scene__desk::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65) 50%,transparent)}

/* Die Frau */
.woman{position:absolute;bottom:9%;height:88%;width:auto;max-width:none;filter:drop-shadow(0 30px 40px rgba(10,70,150,.28));user-select:none}
.scene--r .woman{right:4%}
.scene--l .woman{left:3%}
.scene--c .woman{left:50%;translate:-34% 0}

/* Section-spezifisch */
.hero .woman{right:5%;height:94%;bottom:6%}
.earn .woman{right:3%;height:90%}
.bind .woman{right:9%;height:96%;bottom:4%}
.two .woman{left:1%;height:90%}
.sec .woman{right:24%;height:84%}
.faq .woman{right:5%;height:90%}
.demo .woman{left:47%;translate:-20% 0;height:88%}

/* Schritt 3 – Karte */
.step3__bg{position:absolute;inset:0;border-radius:0 0 26px 26px;overflow:hidden;
  background:radial-gradient(60% 60% at 70% 30%,rgba(255,255,255,.6),transparent 70%),linear-gradient(170deg,#33c1ff,#089aee)}
.step3__bg .woman{right:auto;left:-6%;bottom:0;height:96%;filter:drop-shadow(0 20px 30px rgba(10,70,150,.25))}

@media (max-width:1180px){
  .scene .woman{opacity:.4}
  .hero .woman,.earn .woman,.bind .woman,.faq .woman,.sec .woman,.demo .woman,.two .woman{right:-6%;left:auto;translate:0 0;height:80%}
}
@media (max-width:760px){
  .scene__shelf,.scene__neon{display:none}
  .scene .woman{opacity:.28;height:62%}
}
/* weiche Übergänge zwischen Sections + Tisch auf Laptop-Höhe */
.scene{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.hero .scene{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 93%,transparent 100%)}
.scene__desk{height:24%;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(232,246,255,.85) 20%,rgba(150,210,250,.35) 100%)}
.woman{bottom:17%}
.hero .woman{bottom:15%;height:90%}
.bind .woman{bottom:13%;height:94%}
/* Tisch nur unter der Frau, weich auslaufend (keine harte Linie durch Inhalte) */
.scene__desk{left:auto;right:-4%;width:62%;height:26%;border-radius:50% 50% 0 0/22% 22% 0 0;box-shadow:none;
  background:radial-gradient(70% 90% at 50% 20%,rgba(255,255,255,.9) 0%,rgba(236,248,255,.75) 35%,rgba(170,220,250,0) 75%)}
.scene__desk::after{display:none}
.scene--l .scene__desk{right:auto;left:-4%}
.scene--c .scene__desk{right:auto;left:22%;width:56%}
.sec .scene__desk{left:30%;width:46%}

/* Frau ohne Tisch: steigt unten weich aus der Section auf */
.scene__desk{display:none}
.woman{bottom:0!important;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%);filter:drop-shadow(0 20px 40px rgba(5,40,100,.35))}
.hero .woman{height:96%;right:6%}
.earn .woman{height:92%;right:6%}
.bind .woman{height:98%;right:12%}
.two .woman{height:92%;left:2%}
.sec .woman{height:88%;right:26%}
.faq .woman{height:94%;right:8%}
.demo .woman{height:90%}
.step3__bg .woman{left:-2%;height:100%}
.hero .woman{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 92%);mask-image:linear-gradient(180deg,#000 55%,transparent 92%)}