/* ============ Base ============ */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
  max-width: 100vw;
}

::selection { background: #4166ee; color: #fff; }

/* ============ Scroll progress bar ============ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4166ee 0%, #a5b4fc 50%, #FCD34D 100%);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(65, 102, 238, 0.6);
  transition: transform 0.08s linear;
}

/* ============ Custom cursor ============ */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * { cursor: none !important; }

  #cursor-ring, #cursor-dot {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    will-change: transform, width, height;
  }
  #cursor-ring {
    width: 32px; height: 32px;
    border: 1.5px solid #fff;
    transition: width 0.28s cubic-bezier(0.16,1,0.3,1),
                height 0.28s cubic-bezier(0.16,1,0.3,1),
                background 0.25s, border-color 0.25s, opacity 0.25s;
  }
  #cursor-dot {
    width: 6px; height: 6px;
    background: #fff;
  }
  html.has-custom-cursor.cursor-hover #cursor-ring {
    width: 60px; height: 60px;
    background: rgba(255,255,255,0.15);
    border-color: #FCD34D;
    border-width: 2px;
  }
  html.has-custom-cursor.cursor-hover #cursor-dot { opacity: 0; }
  html.has-custom-cursor.cursor-hidden #cursor-ring,
  html.has-custom-cursor.cursor-hidden #cursor-dot { opacity: 0; }
}
@media not all and (hover: hover) {
  #cursor-ring, #cursor-dot { display: none; }
}

/* ============ Blob background ============ */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: blob-float 20s ease-in-out infinite;
}
.blob-1 { width: 600px; height: 600px; background: #4166ee; top: -100px; left: -100px; }
.blob-2 { width: 500px; height: 500px; background: #7c3aed; top: 40%; right: -100px; animation-delay: -5s; }
.blob-3 { width: 400px; height: 400px; background: #FCD34D; bottom: -100px; left: 30%; opacity: 0.12; animation-delay: -10s; }

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, -40px) scale(1.1); }
  66%      { transform: translate(-40px, 60px) scale(0.95); }
}

.noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ============ Reveal animation ============ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
[data-reveal] + [data-reveal] { transition-delay: 0.08s; }
[data-reveal] + [data-reveal] + [data-reveal] { transition-delay: 0.16s; }
[data-reveal] + [data-reveal] + [data-reveal] + [data-reveal] { transition-delay: 0.24s; }

/* Scroll-linked slide-in: JS drives --p from 0 → 1 as element enters viewport */
[data-slide-in] {
  --p: 0;
  opacity: var(--p);
  transform: translateX(calc((1 - var(--p)) * -160px)) rotate(calc((1 - var(--p)) * -4deg));
  will-change: transform, opacity;
}
/* On mobile: smaller translation + no rotation to avoid horizontal overflow */
@media (max-width: 767px) {
  [data-slide-in] {
    transform: translateY(calc((1 - var(--p)) * 30px));
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-slide-in] { --p: 1 !important; }
}

/* ============ Hand scribble under "Einfach" ============ */
.hand-scribble {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  height: 0.2em;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 15 Q 100 -2 200 12 T 398 8' stroke='%23FCD34D' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  animation: draw-underline 1.4s ease-out 0.6s both;
}
@keyframes draw-underline {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ============ Floating animations ============ */
.float-slow   { animation: float 6s ease-in-out infinite; }
.float-medium { animation: float 4.5s ease-in-out infinite; animation-delay: -1s; }
.float-fast   { animation: float 3.5s ease-in-out infinite; animation-delay: -2s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
@keyframes pulse-slow {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.55; }
}

/* ============ Tilt card ============ */
.tilt-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.tilt-card:hover {
  transform: perspective(1000px) rotateY(-6deg) rotateX(3deg) translateZ(0);
}

/* ============ Marquee (topic band) ============ */
.marquee {
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ Videos horizontal carousel ============ */
.videos-track.is-scrolling {
  animation: videos-marquee var(--marquee-duration, 45s) linear infinite;
}
.videos-carousel:hover .videos-track.is-scrolling {
  animation-play-state: paused;
}
@keyframes videos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); } /* 12px = half of gap-6 */
}


/* ============ Video card ============ */
.video-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgb(10 15 40 / 0.9);
  border: 1px solid rgb(255 255 255 / 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
}
.video-card:hover {
  transform: translateY(-6px);
  border-color: rgb(65 102 238 / 0.6);
  box-shadow: 0 20px 60px -20px rgb(65 102 238 / 0.4);
}
.video-card .thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0f28;
  position: relative;
}
.video-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-card:hover .thumb img { transform: scale(1.08); }
.video-card .play-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  background: linear-gradient(to top, rgb(5 8 24 / 0.6), transparent 60%);
}
.video-card:hover .play-btn { opacity: 1; }
.video-card .play-btn svg {
  width: 60px; height: 60px;
  color: #fff;
  background: rgb(239 68 68);
  border-radius: 999px;
  padding: 18px;
  box-shadow: 0 10px 30px rgb(239 68 68 / 0.5);
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============ Banner (Klar & Simple) animation ============ */
.banner-title .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotate(-8deg) scale(0.7);
  animation: letter-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--i) * 0.06s + 0.2s);
}
.banner-title .letter.amp {
  color: #FCD34D;
  animation-name: letter-in-amp;
  font-size: 1.15em;
  margin: 0 0.05em;
}
@keyframes letter-in {
  0%   { opacity: 0; transform: translateY(30px) rotate(-8deg) scale(0.7); }
  60%  { opacity: 1; transform: translateY(-6px) rotate(4deg) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes letter-in-amp {
  0%   { opacity: 0; transform: translateY(30px) rotate(-30deg) scale(0.5); }
  60%  { opacity: 1; transform: translateY(-10px) rotate(15deg) scale(1.2); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.banner-title .letter:hover {
  animation: letter-wiggle 0.5s ease;
  cursor: default;
}
@keyframes letter-wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-8deg) scale(1.15); }
  75%      { transform: rotate(8deg) scale(1.15); }
}

.banner-sub {
  opacity: 0;
  transform: translateY(15px);
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.1s;
}
.banner-btn {
  opacity: 0;
  transform: translateY(15px) scale(0.9);
  animation: btn-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.4s;
  cursor: pointer;
  transition: transform 0.2s;
}
.banner-btn:hover { transform: scale(1.05); }
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes btn-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sparkles */
.sparkle-1, .sparkle-2, .sparkle-3 {
  opacity: 0;
  animation: sparkle 2s ease-in-out infinite;
}
.sparkle-1 { animation-delay: 1.6s; }
.sparkle-2 { animation-delay: 2.1s; }
.sparkle-3 { animation-delay: 2.6s; }
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0); }
  50%      { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* ============ Product flip cards ============ */
.flip-card {
  perspective: 1600px;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner,
.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}
.flip-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: inherit;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
}
.flip-front {
  z-index: 2;
  transform: rotateY(0deg);
}
.flip-back {
  transform: rotateY(180deg);
}

/* subtle idle hint for the front */
.flip-hint {
  transition: transform 0.3s;
}
.flip-card:hover .flip-hint {
  transform: rotate(180deg);
}

.product-number {
  position: absolute;
  bottom: -2rem;
  right: -1rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 900;
  font-size: 14rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  z-index: 1;
  pointer-events: none;
}

.flip-check {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
}
.flip-check-dark {
  background: rgba(5, 8, 24, 0.15);
  color: #050818;
}

/* ============ Avatar section ============ */
.avatar-wrap { perspective: 1200px; }

.avatar-card {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  animation: avatar-idle 6s ease-in-out infinite;
}
.avatar-wrap:hover .avatar-card {
  transform: perspective(1200px) rotateY(-8deg) rotateX(4deg) scale(1.02);
  animation-play-state: paused;
}
@keyframes avatar-idle {
  0%, 100% { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
  50%      { transform: perspective(1200px) rotateY(2deg) rotateX(-1deg); }
}
.avatar-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.avatar-glow {
  background: radial-gradient(circle, rgba(65,102,238,0.5), transparent 70%);
  filter: blur(40px);
  animation: pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.08); }
}

.avatar-spin { animation: spin-slow 30s linear infinite; }
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.avatar-orbit {
  animation: spin-slow 20s linear infinite;
}
.orbit-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 20px currentColor;
}
.orbit-dot-1 { top: -4px; left: 50%; transform: translateX(-50%); background: #FCD34D; color: #FCD34D; }
.orbit-dot-2 { bottom: -4px; left: 50%; transform: translateX(-50%); background: #4166ee; color: #4166ee; }
.orbit-dot-3 { top: 50%; right: -4px; transform: translateY(-50%); background: #a5b4fc; color: #a5b4fc; width: 10px; height: 10px; }

.speech-bubble {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar-wrap:hover .speech-bubble {
  transform: scale(1.08) rotate(-3deg);
}

/* ============ Newsletter ============ */
.newsletter-gradient {
  background: linear-gradient(120deg, #4166ee, #22348c, #4166ee, #2b40b0);
  background-size: 300% 300%;
  animation: gradient-shift 12s ease infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.newsletter-blob-1 { animation: blob-move 15s ease-in-out infinite; }
.newsletter-blob-2 { animation: blob-move 15s ease-in-out infinite reverse; animation-delay: -5s; }
.newsletter-blob-3 { animation: blob-move 10s ease-in-out infinite; animation-delay: -2s; }
@keyframes blob-move {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-20px) scale(1.15); }
  66%      { transform: translate(-20px,30px) scale(0.9); }
}
.check-tick {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(252, 211, 77, 0.2);
  color: #FCD34D;
  font-weight: bold;
  font-size: 12px;
  border: 1px solid rgba(252, 211, 77, 0.4);
}
.newsletter-box:hover .newsletter-gradient { animation-duration: 6s; }

/* ============ Testimonials marquee ============ */
.testimonial-marquee { overflow: hidden; }
.testi-track {
  width: max-content;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.testi-track-1 { animation-name: testi-scroll-left; }
.testi-track-2 { animation-name: testi-scroll-right; animation-duration: 50s; }
.testimonial-marquee:hover .testi-track { animation-play-state: paused; }
@keyframes testi-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); }
}
@keyframes testi-scroll-right {
  from { transform: translateX(calc(-50% - 12px)); }
  to   { transform: translateX(0); }
}

.testi-card {
  width: 280px;
  flex-shrink: 0;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: rgb(10 15 40 / 0.9);
  border: 1px solid rgb(255 255 255 / 0.08);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}
.testi-card:hover {
  transform: translateY(-4px);
  border-color: rgb(65 102 238 / 0.5);
}
@media (min-width: 640px) {
  .testi-card { width: 340px; padding: 1.75rem; }
}
.testi-blue {
  background: linear-gradient(135deg, #3651d6, #22348c);
  border-color: rgb(65 102 238 / 0.5);
}
.testi-yellow {
  background: #FCD34D;
  color: #050818;
  border-color: rgb(252 211 77 / 0.6);
}
.testi-plain { }

.testi-quote {
  width: 32px; height: 32px;
  color: rgb(255 255 255 / 0.25);
  margin-bottom: 0.75rem;
}
.testi-yellow .testi-quote { color: rgb(5 8 24 / 0.2); }

.testi-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: inherit;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testi-plain .testi-text { color: rgb(255 255 255 / 0.85); }
.testi-blue .testi-text  { color: #fff; }

.testi-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.testi-yellow .testi-user { border-top-color: rgb(5 8 24 / 0.15); }

.testi-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: #4166ee;
  color: #fff;
  flex-shrink: 0;
}
.testi-yellow .testi-avatar { background: #050818; color: #FCD34D; }
.testi-blue .testi-avatar   { background: #FCD34D; color: #050818; }

.testi-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: inherit;
}
.testi-plain .testi-name { color: #fff; }

.testi-source {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgb(255 255 255 / 0.45);
}
.testi-yellow .testi-source { color: rgb(5 8 24 / 0.55); }
.testi-blue .testi-source   { color: rgb(255 255 255 / 0.7); }

/* ============ Nav scrolled state ============ */
#nav.is-scrolled {
  background: rgb(10 15 40 / 0.9);
  box-shadow: 0 10px 40px -10px rgb(0 0 0 / 0.5);
}