/* =========================================================
   LiloCall AI · Design-System (LP-1 + Model-Seiten)
   ========================================================= */
:root{
  --sky-1:#1e9bf0; --sky-2:#38b6f7; --sky-3:#6fd3ff; --sky-4:#bfeaff;
  --navy:#0b2559; --navy-2:#1a3a7a; --ink:#0f2a5c; --muted:#4f6a92;
  --blue:#1676f3; --blue-2:#0f5fd8;
  --gold-1:#ffe14d; --gold-2:#ffb21e; --gold-3:#ff7a12;
  --btn:linear-gradient(180deg,#ffa63a 0%,#ff8a1f 45%,#ff6a10 100%);
  --gold-txt:linear-gradient(180deg,#ffe95a 0%,#ffc11f 45%,#ff8a14 100%);
  --glass:rgba(255,255,255,.78);
  --glass-b:rgba(255,255,255,.9);
  --card-sh:0 24px 50px -24px rgba(8,58,140,.45),0 2px 6px rgba(8,58,140,.06);
  --r:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1840px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Nunito Sans',system-ui,sans-serif;color:var(--ink);background:var(--sky-2);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.45}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input{font:inherit}
svg{width:1em;height:1em;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 4.6vw}

/* ---------- Type ---------- */
.h1,.h2{font-family:'Outfit',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;text-shadow:0 4px 24px rgba(0,60,140,.18)}
.h1{font-size:clamp(33.66px,4.05vw,70.38px)}
.h2{font-size:clamp(29.07px,3.52vw,61.2px)}
.gold{background:var(--gold-txt);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 10px rgba(255,120,0,.25))}
.lead{font-size:clamp(13.01px,1.19vw,19.89px);color:#fff;line-height:1.35;font-weight:500}
.lead b{font-weight:800}
.eyebrow{display:block;font-family:'Outfit';font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#fff;font-size:clamp(13px,0.88vw,15.3px);opacity:.95}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 22px;border-radius:999px;border:2px solid rgba(255,255,255,.75);background:rgba(255,255,255,.18);color:#fff;font-family:'Outfit';font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(13px,0.84vw,14.54px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pill--solid{background:rgba(160,225,255,.35)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;height:clamp(51px,3.82vw,64.6px);padding:0 clamp(27.2px,2.72vw,45.9px);border-radius:999px;background:var(--btn);color:#fff;font-family:'Outfit';font-weight:700;font-size:clamp(15.3px,1.49vw,26.01px);letter-spacing:-.01em;white-space:nowrap;border:0;cursor:pointer;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(200,70,0,.25),0 0 0 3px rgba(255,214,120,.55),0 18px 40px -14px rgba(255,100,0,.7);transition:filter .25s,box-shadow .25s;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%);animation:shine 5s var(--ease) infinite}
.btn:hover{filter:brightness(1.06);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(200,70,0,.25),0 0 0 3px rgba(255,224,150,.8),0 22px 46px -12px rgba(255,100,0,.85)}
.btn svg{width:.95em;height:.95em;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn--sm{height:60px;padding:0 40px;font-size:clamp(13.01px,1.07vw,18.36px)}
.btn--md{height:72px;padding:0 56px;font-size:clamp(14.54px,1.3vw,22.95px)}
@keyframes shine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.cta-sub{display:block;font-weight:800;color:#fff;font-size:clamp(13px,0.95vw,16.06px);margin-top:16px;letter-spacing:.005em}
.cta-c{display:flex;flex-direction:column;align-items:center;text-align:center}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:.22em;font-family:'Outfit';font-weight:800;letter-spacing:-.035em;font-size:clamp(29.07px,2.75vw,47.43px);line-height:1;color:#fff}
.logo svg{width:1.05em;height:1.05em}
.logo .ai{background:var(--gold-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo--txt{color:#fff}
.logo--txt span:first-child{background:linear-gradient(180deg,#fff,#e6f6ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Glass & cards ---------- */
.glass{background:var(--glass);border:1.5px solid rgba(255,255,255,.85);border-radius:var(--r);box-shadow:var(--card-sh);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.card{background:var(--glass-b);border-radius:var(--r);box-shadow:var(--card-sh)}
.ic{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;flex:none}
.ic svg{width:34px;height:34px}
.ic--blue{background:#ddeeff;color:var(--blue)}
.ic--orange{background:#ffeccc;color:#ff8a00}
.ic--green{background:#d8f8e6;color:#16b862}
.ic--purple{background:#ece5ff;color:#7d5cff}
.ic--red{background:#ffe1dc;color:#ff5a3a}
.ic--round{border-radius:50%;background:linear-gradient(180deg,#2c8cff,#0f5fd8);color:#fff;box-shadow:0 8px 18px -8px rgba(15,95,216,.8)}

/* ---------- Floating voice bubble ---------- */
.vbubble{position:absolute;z-index:3;width:clamp(91.8px,9.18vw,160.65px);aspect-ratio:1;pointer-events:none}
.vbubble__b{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,#f0fbff 45%,#c6ecff 100%);box-shadow:0 0 0 4px rgba(255,255,255,.6),0 0 40px rgba(170,230,255,.9),inset 0 -8px 20px rgba(120,200,255,.35)}
.vbubble__b::after{content:"";position:absolute;right:16%;bottom:-6%;width:22%;height:22%;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%);transform:rotate(10deg);filter:drop-shadow(0 0 8px rgba(170,230,255,.8))}
.vbubble svg{position:absolute;inset:24%;width:52%;height:52%}
.vbubble__arc{position:absolute;inset:-14%;border-radius:50%;border:4px solid transparent;border-left-color:rgba(255,255,255,.95);border-top-color:rgba(255,255,255,.55);filter:drop-shadow(0 0 8px rgba(255,255,255,.9));transform:rotate(-30deg)}
.vbubble__arc--2{inset:-30%;border-width:3px;opacity:.6}
.vbubble--lock svg{color:var(--blue)}
.float{animation:float 6s ease-in-out infinite}
.float--slow{animation-duration:8s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}

.chip-live{position:absolute;z-index:3;display:flex;align-items:center;gap:14px;padding:18px 26px;border-radius:20px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-family:'Outfit';box-shadow:0 0 30px rgba(255,255,255,.35)}
.chip-live b{display:block;font-size:clamp(13px,0.95vw,16.83px);font-weight:700}
.chip-live span{font-size:clamp(13px,0.77vw,13.01px)}
.dot{width:14px;height:14px;border-radius:50%;background:#2fe07a;box-shadow:0 0 0 0 rgba(47,224,122,.6);animation:pulse 1.8s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,224,122,.6)}70%{box-shadow:0 0 0 10px rgba(47,224,122,0)}100%{box-shadow:0 0 0 0 rgba(47,224,122,0)}}

/* ---------- Waveforms (JS fills bars) ---------- */
.wave{display:flex;align-items:center;gap:3px;height:40px}
.wave i{display:block;width:3px;border-radius:3px;height:var(--h);background:var(--c,var(--blue));transform-origin:50% 50%;animation:wv 1.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wv{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

/* ---------- Sections ---------- */
.s{position:relative;overflow:hidden;background:linear-gradient(160deg,#059ceb 0%,#0889db 40%,#0eb5ff 100%)}
.s__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.s--full{min-height:min(56.3vw,1080px);display:flex;align-items:center}
.s--full>.wrap{width:100%}
.streak{position:absolute;z-index:1;height:6px;border-radius:6px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);filter:blur(1px);pointer-events:none}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-r{opacity:0;transform:translateX(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-l.in,.rv-r.in{opacity:1;transform:none}
.rv-s{opacity:0;transform:scale(.92);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-s.in{opacity:1;transform:none}
.s.off *,.s.off *::before,.s.off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,.rv-l,.rv-r,.rv-s{opacity:1;transform:none}}

/* Buttons: ruhig – kein Glow, kein Glanz, nur leichter Farb-Hover */
.btn,.mbtn{box-shadow:none!important;transition:background .2s ease,filter .2s ease!important}
.btn::before,.mbtn::before{display:none!important;animation:none!important}
.btn:hover,.mbtn:hover{box-shadow:none!important;filter:brightness(1.07)}
.btn:hover svg{transform:none!important}
.cb--hang span{box-shadow:none!important}

/* Orange entschärft: heller/gelblicher (mehr Helligkeitsabstand zum Blau) + feine dunkle Trennkante */
:root{
  --gold-txt:linear-gradient(180deg,#fff3b0 0%,#ffd84d 45%,#ffb52e 100%);
  --btn:linear-gradient(180deg,#ffbe55 0%,#ffa233 55%,#f58a1f 100%);
}
.gold,.logo .ai{filter:drop-shadow(0 1px 0 rgba(10,50,120,.35)) drop-shadow(0 2px 6px rgba(10,50,120,.25))!important;text-shadow:none}
.btn{background:var(--btn)!important;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)!important;text-shadow:0 1px 1px rgba(150,60,0,.35)}
.btn:hover{filter:brightness(1.05)}

/* Goldener Verlauf für Buttons */
:root{--btn:linear-gradient(180deg,#ffe58a 0%,#f7c948 40%,#e2a62a 75%,#c98a1a 100%)}
.btn{background:var(--btn)!important;color:#3d2600!important;text-shadow:0 1px 0 rgba(255,240,190,.6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1.5px rgba(255,236,170,.8)!important}
.btn svg{color:#3d2600}
.btn:hover{filter:brightness(1.05) saturate(1.05)}

/* Chrome-Gold: mehrere Goldtöne mit metallischen Lichtkanten */
:root{--btn:linear-gradient(180deg,
  #fff6c8 0%,#f9dc7a 14%,#e8b84a 30%,#c8902a 46%,#f3cf6a 54%,#fbe7a3 62%,#d9a53e 78%,#a8701c 100%)}
.btn{background:var(--btn)!important;color:#3a2400!important;
  text-shadow:0 1px 0 rgba(255,246,210,.75)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(120,70,0,.45),inset 0 0 0 1.5px rgba(255,236,170,.7),0 0 0 1px rgba(150,95,20,.35)!important}
.btn svg{color:#3a2400}

/* Einfacher Gold-Verlauf (hell → dunkel), dezente Metallkante */
:root{--btn:linear-gradient(180deg,#fbe08a 0%,#e9bb4c 50%,#c9922a 100%)}
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,236,170,.6)!important}

/* Einheitliche Icon-Kacheln: alle im blauen Verlauf, Icon weiß */
.ic--blue,.ic--orange,.ic--green,.ic--purple,.ic--red,.sec__shield{
  background:linear-gradient(180deg,#2d8cff 0%,#0f5fd8 100%)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.ic--blue svg,.ic--orange svg,.ic--green svg,.ic--purple svg,.ic--red svg,.sec__shield svg{color:#fff}
.sec__shield svg{width:52%!important;height:52%!important}
.trust__ic svg,.trust__ic--g svg{color:#1676f3!important}

/* Gold-Schrift auf hellen Karten: kein Schatten/keine Umrandung, etwas satteres Gold für Lesbarkeit */
.step .gold,.thing .gold,.vs__col .ai,.card .gold,.glass .gold,.step3__live .gold{
  filter:none!important;text-shadow:none!important;
  background:linear-gradient(180deg,#ffcf3a 0%,#f2a91c 60%,#e08f10 100%);-webkit-background-clip:text;background-clip:text;color:transparent}