/* ============================================================
   Landing-Page Styles (V9 Feature Pages)
   Shared by tiefen-recherche, multi-chat, bond-levels, daily-checkin, talk-v2
   in DE + EN. Per-page color overrides via :root or wrapper class.
   ============================================================ */

/* HERO */
.lp-hero{width:100%;position:relative;padding:110px 24px 100px;overflow:hidden;background:radial-gradient(ellipse at top right,#fff5f5 0%,#fff 60%);}
.lp-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;width:100%;}
.lp-hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #ffcccc;color:#be0002;padding:6px 14px;border-radius:30px;font-size:.78rem;font-weight:700;letter-spacing:.5px;margin-bottom:22px;box-shadow:0 4px 12px rgba(190,0,2,.08);}
.lp-hero-badge::before{content:"●";color:#be0002;animation:lp-pulse 2s infinite;}
@keyframes lp-pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.lp-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.05;margin-bottom:22px;letter-spacing:-.025em;font-weight:700;}
.lp-hero h1 .accent{background:linear-gradient(135deg,#be0002,#ff6b6b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lp-hero .lp-lead{font-size:1.22rem;line-height:1.55;margin-bottom:32px;color:#444;max-width:560px;}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.lp-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#be0002,#ff4444);color:#fff;padding:16px 32px;border-radius:30px;font-weight:700;text-decoration:none;box-shadow:0 10px 30px rgba(190,0,2,.35);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;}
.lp-cta:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(190,0,2,.5);}
.lp-cta-ghost{display:inline-block;color:#222;padding:16px 26px;border-radius:30px;text-decoration:none;font-weight:600;border:1.5px solid #ddd;transition:all .2s;}
.lp-cta-ghost:hover{border-color:#be0002;color:#be0002;background:#fff5f5;}
.lp-rating{display:flex;gap:10px;align-items:center;margin-top:24px;color:#666;font-size:.92rem;}
.lp-rating .stars{color:#ffb400;letter-spacing:2px;font-size:1.05rem;}

.lp-hero-mockup{position:relative;display:flex;justify-content:center;align-items:center;}
.lp-hero-mockup-frame{position:relative;z-index:2;border-radius:36px;padding:8px;background:linear-gradient(135deg,#1a1a1a,#333);box-shadow:0 40px 80px rgba(0,0,0,.25),0 16px 32px rgba(0,0,0,.15);transform:rotate(-3deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.lp-hero-mockup-frame:hover{transform:rotate(0deg) translateY(-6px);}
.lp-hero-mockup-frame img{border-radius:28px;width:300px;height:auto;display:block;}
.lp-hero-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(190,0,2,.20) 0%,transparent 60%);z-index:0;border-radius:50%;animation:lp-float 8s ease-in-out infinite;}
@keyframes lp-float{0%,100%{transform:translate(0,0);}50%{transform:translate(20px,-15px);}}

.lp-hero-stats{display:flex;gap:36px;margin-top:38px;padding-top:28px;border-top:1px solid #eee;flex-wrap:wrap;}
.lp-hero-stat{display:flex;flex-direction:column;}
.lp-hero-stat strong{font-size:1.5rem;color:#222;font-weight:700;line-height:1.1;}
.lp-hero-stat span{font-size:.85rem;color:#888;}

/* DEVICES */
.lp-devices{width:100%;padding:20px 24px 80px;text-align:center;background:#fafafa;}
.lp-devices > *{max-width:1100px;margin-left:auto;margin-right:auto;}
.lp-devices p{color:#999;text-transform:uppercase;font-size:.78rem;letter-spacing:2px;margin-bottom:24px;font-weight:600;}
.lp-devices-row{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;align-items:flex-end;}
.lp-devices-row img{height:64px;width:auto;opacity:.75;filter:grayscale(20%);transition:opacity .3s,filter .3s;}
.lp-devices-row img:hover{opacity:1;filter:none;}

/* SECTIONS */
.lp-section{width:100%;padding:80px 24px;}
.lp-section > *{max-width:1200px;margin-left:auto;margin-right:auto;}
.lp-section.dark{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#fff;padding:100px 24px;position:relative;overflow:hidden;}
.lp-section.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(190,0,2,.18) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(190,0,2,.12) 0%,transparent 50%);pointer-events:none;}
.lp-section.dark .lp-section-inner{position:relative;max-width:1200px;margin:0 auto;width:100%;}
.lp-eyebrow{color:#be0002;font-size:.85rem;text-transform:uppercase;letter-spacing:2.5px;font-weight:700;margin-bottom:12px;display:inline-block;}
.lp-section.dark .lp-eyebrow{color:#ff8888;}
.lp-section h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.15;margin-bottom:18px;letter-spacing:-.02em;font-weight:700;}
.lp-section .lp-section-lead{color:#555;max-width:720px;margin-bottom:48px;font-size:1.08rem;line-height:1.6;}
.lp-section.dark .lp-section-lead{color:rgba(255,255,255,.85);}

.lp-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.lp-card{background:#fff;border:1px solid #f0f0f0;border-radius:22px;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,.04);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;}
.lp-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.08);border-color:#ffe0e0;}
.lp-card-icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#fff5f5,#ffe0e0);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.lp-card-icon svg{width:28px;height:28px;color:#be0002;stroke:#be0002;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.lp-card h3{color:#1a1a1a;font-size:1.22rem;margin-bottom:12px;letter-spacing:-.005em;font-weight:700;}
.lp-card p{color:#555;line-height:1.6;}
.lp-section.dark .lp-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(10px);}
.lp-section.dark .lp-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);}
.lp-section.dark .lp-card h3{color:#fff;}
.lp-section.dark .lp-card p{color:rgba(255,255,255,.78);}
.lp-section.dark .lp-card-icon{background:rgba(190,0,2,.25);}
.lp-section.dark .lp-card-icon svg{color:#ff8888;stroke:#ff8888;}

/* CHARACTER LENS / GRID with portraits */
.lp-section.lens-section{background:linear-gradient(180deg,#fafafa 0%,#fff 100%);padding:100px 24px;}
.lp-section.lens-section .lp-section-inner{max-width:1200px;margin:0 auto;width:100%;}
.lp-lens-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.lp-lens-card{background:#fff;border-radius:22px;overflow:hidden;border:1px solid #f0f0f0;box-shadow:0 8px 28px rgba(0,0,0,.05);transition:transform .3s,box-shadow .3s;}
.lp-lens-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.08);}
.lp-lens-avatar{height:200px;background:linear-gradient(135deg,var(--c1,#fff5f5),var(--c2,#ffe0e0));display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;}
.lp-lens-avatar::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 70%);pointer-events:none;}
.lp-lens-avatar img{width:auto;height:170px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15));}
.lp-lens-body{padding:26px 28px;}
.lp-lens-body h3{font-size:1.18rem;color:#1a1a1a;margin-bottom:6px;font-weight:700;}
.lp-lens-body .lp-lens-role{color:#be0002;font-size:.78rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:14px;display:block;}
.lp-lens-body p{color:#555;font-size:.95rem;line-height:1.6;}

/* IN-ACTION (with screenshots) */
.lp-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}
.lp-action-card{background:#fff;border-radius:24px;padding:30px;border:1px solid #f0f0f0;box-shadow:0 8px 28px rgba(0,0,0,.04);position:relative;overflow:hidden;}
.lp-action-card .lp-action-num{position:absolute;top:18px;right:24px;font-size:5rem;font-weight:700;color:#fff5f5;line-height:1;letter-spacing:-3px;}
.lp-action-card h3{position:relative;font-size:1.18rem;color:#1a1a1a;margin-bottom:12px;font-weight:700;}
.lp-action-card p{position:relative;color:#555;line-height:1.6;font-size:.96rem;}
.lp-action-card img{margin-top:18px;width:100%;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.1);}

/* STEPS (dark section) */
.lp-steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));counter-reset:stepcounter;}
.lp-step{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;background:rgba(255,255,255,.06);padding:24px 28px;border-radius:18px;border:1px solid rgba(255,255,255,.08);}
.lp-step::before{content:counter(stepcounter);counter-increment:stepcounter;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#be0002,#ff4444);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;}
.lp-step h3{font-size:1.08rem;color:#fff;margin-bottom:6px;font-weight:700;}
.lp-step p{color:rgba(255,255,255,.78);font-size:.95rem;}

/* FAQ */
.lp-faq details{background:#fff;border:1px solid #f0f0f0;border-radius:18px;padding:22px 28px;margin-bottom:14px;transition:border-color .2s,box-shadow .2s;}
.lp-faq details:hover{border-color:#ffd0d0;}
.lp-faq details[open]{border-color:#be0002;box-shadow:0 8px 24px rgba(190,0,2,.06);}
.lp-faq summary{font-weight:600;cursor:pointer;color:#1a1a1a;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:1.02rem;}
.lp-faq summary::after{content:"+";font-size:1.5rem;color:#be0002;transition:transform .2s;font-weight:300;}
.lp-faq details[open] summary::after{transform:rotate(45deg);}
.lp-faq details[open] summary{margin-bottom:14px;}
.lp-faq details p{color:#555;line-height:1.6;}

/* RELATED */
.lp-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.lp-related a{display:block;padding:24px 26px;background:#fff;border-radius:18px;border:1px solid #f0f0f0;color:#1a1a1a;font-weight:600;text-decoration:none;transition:all .25s;}
.lp-related a:hover{border-color:#be0002;color:#be0002;transform:translateY(-3px);box-shadow:0 12px 28px rgba(190,0,2,.08);}
.lp-related-arrow{color:#be0002;margin-left:6px;font-weight:400;}
.lp-related a small{font-weight:400;color:#888;font-size:.85rem;display:block;margin-top:6px;}

/* FINAL CTA */
.lp-cta-final{width:100%;text-align:center;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#fff;padding:100px 24px;position:relative;overflow:hidden;}
.lp-cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(190,0,2,.28) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(190,0,2,.18) 0%,transparent 50%);pointer-events:none;}
.lp-cta-final-inner{position:relative;max-width:880px;margin:0 auto;width:100%;}
.lp-cta-final h2{font-size:clamp(2rem,3.5vw,2.8rem);color:#fff;margin-bottom:18px;line-height:1.15;letter-spacing:-.02em;}
.lp-cta-final p{color:rgba(255,255,255,.85);margin-bottom:38px;font-size:1.15rem;}
.lp-badges{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.lp-badges img{height:64px;border-radius:10px;transition:transform .2s;}
.lp-badges a:hover img{transform:translateY(-2px);}

/* FOOTER */
.lp-footer{width:100%;padding:48px 24px;text-align:center;font-size:.92rem;background:#0a0a14;color:#888;}
.lp-footer a{color:#aaa;text-decoration:none;margin:0 10px;transition:color .2s;}
.lp-footer a:hover{color:#ff8888;}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .lp-hero-glow,.lp-hero-mockup-frame{animation:none!important;}
}

/* WAVE DIVIDERS */
.lp-wave-divider{display:block;width:100%;line-height:0;overflow:hidden;}
.lp-wave-divider svg{display:block;width:100%;height:80px;}

/* MOBILE */
@media (max-width: 900px){
  .lp-hero{padding:64px 20px 40px;}
  .lp-hero-inner{grid-template-columns:1fr;gap:36px;text-align:center;}
  .lp-hero .lp-lead{max-width:none;margin-left:auto;margin-right:auto;}
  .lp-cta-row{justify-content:center;}
  .lp-rating{justify-content:center;}
  .lp-hero-mockup-frame img{width:240px;}
  .lp-hero-stats{justify-content:center;}
  .lp-section{padding:48px 20px;}
  .lp-section.dark,.lp-section.lens-section{padding:64px 20px;}
  .lp-cta-final{padding:64px 20px;}
  .lp-steps{grid-template-columns:1fr;}
}