:root{
  --bg:#0a0b0e; --surface:#0f1116; --glass:rgba(255,255,255,.06);
  --line:#1b2130; --text:#eef2ff; --muted:#9aa2b2; --gold:#f6d070; --gold2:#ffdf8a; --accent:#22d4a4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth;line-height:1.6}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin:0 auto}
.header{position:sticky;top:0;background:rgba(10,11,14,.75);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:60}
.header .row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{width:40px;height:40px;border-radius:10px;box-shadow:0 0 28px rgba(246,208,112,.22)}
.brand b{font-weight:900}
.nav a{padding:.55rem .8rem;border-radius:10px}
.nav a:hover{background:var(--glass)}
.btn{display:inline-flex;align-items:center;gap:.6rem;border:none;border-radius:12px;padding:.9rem 1.15rem;font-weight:900;cursor:pointer}
.btn-primary{color:#161616;background:linear-gradient(90deg,var(--gold),var(--gold2));box-shadow:0 10px 28px rgba(246,208,112,.22)}
.btn-outline{border:1px solid var(--line);color:#fff;background:transparent}
/* CTA animation */
.btn-glow{position:relative;overflow:hidden}
.btn-glow::before{content:"";position:absolute;inset:-2px;background:linear-gradient(90deg,var(--gold),var(--accent),var(--gold2),var(--accent));background-size:300% 100%;filter:blur(8px);opacity:.7;z-index:-1;animation:shine 4s linear infinite}
@keyframes shine{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.btn-pulse{animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.section{padding:58px 0;border-bottom:1px solid var(--line)}
.hero{min-height:520px;padding:90px 0 50px;position:relative}
.hero:before{content:"";position:absolute;inset:-20% -20% auto -20%;height:60vh;background:radial-gradient(900px 500px at 20% -10%, rgba(246,208,112,.25), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(34,212,164,.18), transparent 60%);filter:blur(30px);z-index:-1}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:16px;padding:1.2rem;box-shadow:0 10px 28px rgba(0,0,0,.3)}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.badge{display:inline-flex;gap:.4rem;align-items:center;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));padding:.28rem .6rem;border-radius:999px;color:var(--gold)}
.trust{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem;align-items:center}
.stars{display:inline-flex;gap:.15rem;filter:drop-shadow(0 4px 14px rgba(246,208,112,.25))}
.list{display:grid;gap:.45rem}
.notice{color:var(--muted);font-size:.95rem}
.price{font-size:28px;font-weight:900}
.tag{font-size:.8rem;color:#161616;background:var(--gold);padding:.2rem .6rem;border-radius:8px;margin-left:.5rem}
.video-box{aspect-ratio:16/9;background:#0e1219;border:1px dashed #2a3242;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.footer{padding:28px 0;color:var(--muted)}
.footer a{color:var(--muted)}
/* Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}
/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:16px;padding:1rem;text-align:center}
.stat .num{font-size:34px;font-weight:900}
@media(max-width:960px){.hero .grid{grid-template-columns:1fr}.nav{display:none}.stats{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.stats{grid-template-columns:1fr}}

/* ==== Animated Background (gradient + soft grain overlay) ==== */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(10,11,14,.40);}
@keyframes bgShift{
  0%{ background-position: 0% 0%, 100% 0%, 0% 0%; }
  100%{ background-position: 20% 10%, 80% 5%, 0% 0%; }
}
/* Subtle noise layer */
.bg-noise{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'120\' height=\'120\'><filter id=\'n\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'.8\' numOctaves=\'2\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feComponentTransfer><feFuncA type=\'table\' tableValues=\'0 0.03\'/></feComponentTransfer></filter><rect width=\'100%\' height=\'100%\' filter=\'url(#n)\'/></svg>');
  opacity:.25;
}

/* ==== Social bar ==== */
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  padding:.55rem .8rem;border-radius:999px}
.socials img{width:16px;height:16px}

/* ==== Floating WhatsApp Button ==== */
.whatsfloat{position:fixed;right:18px;bottom:22px;z-index:80;display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:#25D366;border:2px solid #eafaf0;box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 24px rgba(37,211,102,.35);animation:float 3.2s ease-in-out infinite;cursor:pointer}.whatsfloat:hover{transform:scale(1.06)}.whatsfloat img{width:30px;height:30px}
.whatsfloat:hover{ transform:scale(1.05); }
.whatsfloat img{ width:28px; height:28px; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ==== Cookie Banner ==== */
.cookie-banner{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:100; width:min(960px,92%);
  display:none; gap:1rem; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid var(--line); border-radius:14px; padding:12px 14px; backdrop-filter:blur(12px);
}
.cookie-banner p{ margin:0; color:var(--muted); }
.cookie-actions{ display:flex; gap:.6rem; flex-wrap:wrap }
.cookie-accept{ background:linear-gradient(90deg,var(--gold),var(--gold2)); color:#161616; border:none; padding:.6rem .9rem; border-radius:10px; font-weight:800; cursor:pointer }
.cookie-decline{ background:transparent; border:1px solid var(--line); color:#fff; padding:.6rem .9rem; border-radius:10px; font-weight:700; cursor:pointer }

/* === Video background in hero === */
.hero-video{position:absolute; inset:0; z-index:-1; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-video video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);filter:brightness(.8)}
.hero-overlay{position:relative; z-index:1}

/* === Twin feature cards at top === */
.top-features{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
@media(max-width:900px){.top-features{grid-template-columns:1fr}}

/* === Mockups float section === */
.mockups{position:relative; display:flex; align-items:center; justify-content:center; gap:2rem; padding:20px 0}
.mockups img{max-width:360px; width:42vw; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));}
.mock1{transform:rotate(-10deg) translateY(6px); animation:floatA 6s ease-in-out infinite}
.mock2{transform:rotate(12deg) translateY(-6px); animation:floatB 7s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:rotate(-10deg) translateY(6px)}50%{transform:rotate(-10deg) translateY(-6px)}}
@keyframes floatB{0%,100%{transform:rotate(12deg) translateY(-6px)}50%{transform:rotate(12deg) translateY(6px)}}

/* ==== Global Background Video (fixed) ==== */
.bgvid{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;opacity:.85;filter:brightness(.7) saturate(1.05)}
/* Keep gold particles canvas above video but below content */
#bgp{z-index:-2}

/* ==== Pricing with mockups sidebar ==== */
.pricing-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem}
@media(max-width:1000px){.pricing-wrap{grid-template-columns:1fr}}
.pricing-mock{display:flex;align-items:center;justify-content:center;gap:1.4rem;padding:10px 0}
.pricing-mock img{max-width:360px;width:42vw;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.pricing-mock .m1{transform:rotate(-10deg) translateY(6px);animation:floatA 6s ease-in-out infinite}
.pricing-mock .m2{transform:rotate(12deg) translateY(-6px);animation:floatB 7s ease-in-out infinite}

/* Hard-enforce background + stacking */
.bgvid{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;opacity:.85;filter:brightness(.7) saturate(1.05)}
.particles,.hero-video,#bgp{z-index:-3}
.hero .grid{grid-template-columns:1.05fr .95fr;align-items:flex-start}
.hero .card{margin-top:.6rem}

body{background:transparent !important;}

.header,.hero,.section,.footer{position:relative;z-index:1}


/* ================= Responsive enhancements ================= */
:root{ --gap:1rem }
.container{ width:min(1180px,92%); margin:0 auto }

/* Headings scale */
h1{ font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem); line-height:1.2 }
h2{ font-size: clamp(1.3rem, 2vw + .6rem, 1.8rem) }
.price{ font-size: clamp(1.4rem, 2vw + .6rem, 1.8rem) }

/* Grids */
.grid-3{ grid-template-columns: repeat(3,1fr) }
.grid-2{ grid-template-columns: repeat(2,1fr) }

@media (max-width: 1024px){
  .hero .grid{ grid-template-columns: 1fr; gap:1rem }
  .pricing-wrap{ grid-template-columns: 1fr }
  .grid-3{ grid-template-columns: repeat(2,1fr) }
  .nav{ display:none } /* desktop nav hidden on tablet/mobile */
  .hamburger{ display:inline-flex }
}

@media (max-width: 768px){
  .grid-3, .grid-2{ grid-template-columns: 1fr }
  .btn{ width:100%; justify-content:center }
  .stats{ grid-template-columns: 1fr 1fr }
  .pricing-mock{ gap:.8rem }
  .mockups img, .pricing-mock img{ width:80vw; max-width:420px }
  .header .row{ padding:10px 0 }
}

@media (max-width: 480px){
  .stats{ grid-template-columns: 1fr }
  .card{ padding: .9rem }
}

/* Mobile menu */
.hamburger{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); cursor:pointer;
}
.hamburger span{ width:18px; height:2px; background:#fff; position:relative; display:block }
.hamburger span::before,.hamburger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff }
.hamburger span::before{ top:-6px } .hamburger span::after{ top:6px }

.mobile-nav{
  position:fixed; inset:auto 0 0 0; transform:translateY(100%);
  background:rgba(10,11,14,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:12px; display:flex; flex-direction:column; gap:.4rem; z-index:50;
  transition:transform .3s ease;
}
.mobile-nav a{ padding:.7rem; border-radius:10px }
.mobile-nav.show{ transform:translateY(0) }

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .btn-pulse, .mock1, .mock2, .whatsfloat{ animation:none !important }
  .bgvid{ animation:none }
}


/* Prevent horizontal scroll on mobile */
html, body{overflow-x:hidden; width:100%}


/* === Mobile "locked" feel: vertical-only === */
html, body{
  overflow-x:hidden;
  width:100%;
  touch-action: pan-y;            /* allow only vertical panning */
  overscroll-behavior-x: none;    /* stop side-swipe back/forward on Android Chrome */
  overscroll-behavior-y: contain; /* prevent bounce chaining */
  -webkit-text-size-adjust: 100%;
}
/* clip any accidental overflow from animated elements */
.container{ overflow-x: clip; }
.mockups, .pricing-mock, .testi{ overflow: hidden; }
img{ -webkit-user-drag: none; user-drag: none; }
a, button{ -webkit-tap-highlight-color: transparent; }


.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(246,208,112,.35);
}

.btn-outline:hover {
  background: var(--glass);
  color: var(--gold);
  border-color: var(--gold);
}



.btn-outline {
  border: 1px solid var(--line);
  color: #fff;
  background: transparent;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--glass);
  color: var(--gold);
  border-color: var(--gold);
}



/* Ensure nav links are always clickable and above overlays */
.header{ z-index: 100 !important; }
.header .nav a, .mobile-nav a { pointer-events: auto !important; cursor: pointer; }



/* Full-width mockup image */
.mockups {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.mockups img {
  transform: none !important;
  max-width: 100%;
  width: 100%;
  height: auto;
}



/* Nach oben Button */
.topfloat {
  position: fixed;
  bottom: 90px;   /* etwas über WhatsApp */
  right: 20px;
  background: var(--gold);
  color: #000;
  font-size: 20px;
  font-weight: bold;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s ease;
}

.topfloat:hover {
  background: #fff4c2;
  transform: translateY(-3px);
}



.topfloat img {
  filter: invert(0);
}


/* White arrow styling */
.topfloat img { filter: none; }


/* Move topfloat button to bottom-left */
.topfloat {
  position: fixed;
  bottom: 20px;   /* Abstand vom unteren Rand */
  left: 20px;     /* auf der linken Seite */
  background: var(--gold);
  color: #000;
  font-size: 20px;
  font-weight: bold;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s ease;
}

.topfloat:hover {
  background: #fff4c2;
  transform: translateY(-3px);
}