* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    :root {
      --primary: #4000FF;
      --primary-dark: #3200CC;
      --primary-light: #5A1FFF;
      --bg-light: #F8F9FA;
      --bg-white: #FFFFFF;
      --text-dark: #1A1A1A;
      --text-medium: #4A5568;
      --text-light: #718096;
      --border: #E2E8F0;
      --shadow: 0 4px 16px rgba(64, 0, 255, 0.08);
      --shadow-hover: 0 8px 24px rgba(64, 0, 255, 0.12);
    }

    body {
      margin: 0;
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      line-height: 1.7;
      color: var(--text-dark);
      background: var(--bg-white);
      font-size: 18px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    /* Smooth Scroll */
    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    /* Typography */
    h1, h2, h3 {
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    h1 { 
      font-size: clamp(2.25rem, 5vw, 3.125rem);
      margin-bottom: 28px;
      color: var(--text-dark);
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    h2 { 
      font-size: clamp(2rem, 4.5vw, 2.875rem);
      margin-bottom: 28px;
      color: var(--text-dark);
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    /* Standardize spacing after section headings */
    section .content-wrapper > h2,
    section > .section-inner > .content-wrapper > h2,
    section > .section-inner > h2 {
      margin-bottom: 28px; /* base spacing */
    }

    /* Consistent lead paragraph spacing after h2 */
    section .content-wrapper > h2 + p,
    section > .section-inner > .content-wrapper > h2 + p,
    section > .section-inner > h2 + p {
      margin-top: 8px;  /* small breathing space */
      margin-bottom: 40px; /* uniform distance to next content */
    }

    @media (max-width: 768px) {
      section .content-wrapper > h2,
      section > .section-inner > .content-wrapper > h2,
      section > .section-inner > h2 { margin-bottom: 20px; }

      section .content-wrapper > h2 + p,
      section > .section-inner > .content-wrapper > h2 + p,
      section > .section-inner > h2 + p { margin-bottom: 28px; }
    }

    h3 {
      font-size: 1.375rem;
      margin-bottom: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    /* Utility: Primary gradient text (animated, subtle) */
    .text-gradient-primary {
      /* Premium gradient with stronger contrast (dark → base → light → base) */
      background: linear-gradient(90deg,
        var(--primary-dark) 0%,
        var(--primary) 35%,
        var(--primary-light) 65%,
        var(--primary) 100%
      );
      background-size: 300% 300%; /* more range for visible motion */
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent; /* Safari */
      animation: gradientPulse 12s ease-in-out infinite;
    }

    @keyframes gradientPulse {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Respect reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {
      .text-gradient-primary { animation: none; }
    }

    p { 
      margin-bottom: 20px;
      color: var(--text-medium);
      font-size: 1.0625rem;
      line-height: 1.75;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    strong {
      color: var(--text-dark);
      font-weight: 600;
    }

    /* Layout */
    section {
      padding: 140px 0;
      position: relative;
      overflow: hidden;
    }

    /* Allow sticky inside this section (Safari fix: ancestor overflow must be visible) */
    #kurzloesung,
    #kurzloesung .section-inner {
      overflow: visible !important;
    }

    section > * {
      position: relative;
      z-index: 1;
    }

    .section-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 40px;
    }

    @media (max-width: 768px) {
      section {
        padding: 80px 0;
      }
      
      .section-inner {
        padding: 0 20px;
      }
    }

    .center { 
      text-align: center; 
    }

    /* Content Container for better spacing */
    .content-wrapper {
      max-width: 900px;
      margin: 0 auto;
      width: 100%;
    }

    /* Header */
    header {
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      border-bottom: 1px solid transparent;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      max-width: 100%;
      opacity: 0;
      transform: translateY(-100%);
      overflow: hidden;
      will-change: backdrop-filter, background, border-bottom;
    }

    header.scrolled {
      background: rgba(255, 255, 255, 0.55); /* subtler, translucent */
      backdrop-filter: saturate(140%) blur(16px);
      -webkit-backdrop-filter: saturate(140%) blur(16px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(64, 0, 255, 0.03);
      padding: 16px 40px;
      opacity: 1;
      transform: translateY(0);
    }

    /* Premium Aurora Inset Shadows - Animated */
    header.scrolled::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: 
        inset 80px 0 100px -40px rgba(64, 0, 255, 0.15),
        inset -80px 0 100px -40px rgba(90, 31, 255, 0.12),
        inset 0 60px 80px -30px rgba(64, 0, 255, 0.10);
      opacity: 0;
      animation: auroraInsetFadeIn 0.8s ease-out 0.2s forwards, auroraInsetGlowLeft 8s ease-in-out infinite;
      z-index: 1;
    }

    header.scrolled::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: 
        inset -100px 0 120px -50px rgba(90, 31, 255, 0.14),
        inset 100px 0 120px -50px rgba(64, 0, 255, 0.11),
        inset 0 70px 90px -35px rgba(90, 31, 255, 0.08);
      opacity: 0;
      animation: auroraInsetFadeIn 0.8s ease-out 0.4s forwards, auroraInsetGlowRight 11s ease-in-out infinite;
      z-index: 1;
    }

    /* Ensure header content stays above aurora shadows */
    header > * {
      position: relative;
      z-index: 2;
    }

    header a.logo { display: inline-flex; align-items: center; text-decoration: none; transition: all 0.3s ease; }
    header a.logo img { height: 28px; width: auto; display: block; }

    header.scrolled a.logo img { height: 26px; }

    header a.logo:hover {
      opacity: 0.8;
    }

    /* Header Navigation Links */
    header nav {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .header-nav-link {
      color: var(--text-dark);
      text-decoration: none;
      font-size: 0.9375rem;
      font-weight: 500;
      position: relative;
      transition: color 0.2s ease;
    }

    .header-nav-link:hover {
      color: var(--primary);
    }

    header .btn {
      padding: 12px 28px;
      font-size: 0.95rem;
      margin-top: 0;
    }

    /* Buttons */
    .btn {
      display: inline-block;
      background: var(--primary);
      color: #fff;
      text-decoration: none;
      padding: 18px 40px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 1.0625rem;
      margin-top: 24px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(64, 0, 255, 0.2);
      position: relative;
      overflow: hidden;
    }

    /* Slightly smaller hero buttons only */
    #hero .btn { padding: 14px 32px; font-size: 1rem; border-radius: 10px; }
    #hero .btn.btn-secondary { 
      background: rgba(64, 0, 255, 0.06); 
      color: var(--primary); 
      box-shadow: 0 0 0 1px rgba(64, 0, 255, 0.15) inset;
      border: none;
    }
    #hero .btn.btn-secondary:hover {
      background: var(--primary);
      color: white;
      box-shadow: 0 8px 28px rgba(64, 0, 255, 0.25);
    }

    /* Dynamic Aurora Wave Effect - Inset Shadows that flow like a wave */
    #hero {
      position: relative;
      overflow: hidden;
      background: var(--bg-white);
    }

    /* Bottom gradient overlay for seamless transition to next section */
    #hero::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 0.3) 40%, rgba(248, 249, 250, 0.7) 70%, var(--bg-light) 100%);
      pointer-events: none;
      z-index: 2;
    }

    /* Flowing Wave - Left Side Peak */
    #hero::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: 
        inset 140px 0 160px -60px rgba(64, 0, 255, 0.20),
        inset -100px 0 140px -55px rgba(90, 31, 255, 0.12),
        inset 0 120px 140px -50px rgba(64, 0, 255, 0.16);
      opacity: 1;
      animation: auroraWaveFlow 16s ease-in-out infinite;
      z-index: 0;
    }

    /* Ensure hero content stays above aurora */
    #hero > .section-inner {
      position: relative;
      z-index: 1;
    }

    /* Hero Video Container & Play Button */
    .hero-video-container {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hero-video-container:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.12) !important;
    }

    .hero-video-container .hero-icon {
      transition: opacity 0.3s ease;
    }

    .hero-video-container:hover .hero-icon {
      opacity: 0.6;
    }

    .hero-play-button {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--primary);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 24px rgba(64, 0, 255, 0.3);
    }

    .hero-play-button:hover {
      transform: scale(1.1);
      background: var(--primary-light);
      box-shadow: 0 12px 32px rgba(64, 0, 255, 0.4);
    }

    .hero-play-button:active {
      transform: scale(0.95);
    }

    .hero-play-button svg {
      margin-left: 3px;
      transition: transform 0.3s ease;
    }

    .hero-play-button:hover svg {
      transform: scale(1.1);
    }

    @media (max-width: 768px) {
      .hero-play-button {
        width: 60px;
        height: 60px;
      }

      .hero-play-button svg {
        width: 18px;
        height: 18px;
      }
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .btn:hover::before {
      width: 300px;
      height: 300px;
    }

    .btn:hover {
      background: var(--primary-dark);
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(64, 0, 255, 0.35);
    }

    .btn-secondary {
      background: transparent;
      color: var(--primary);
      border: 2px solid var(--primary);
      box-shadow: none;
    }

    .btn-secondary:hover {
      background: var(--primary);
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(64, 0, 255, 0.2);
    }

    /* Bento Grid */
    .bento {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 32px;
      margin-top: 80px;
      width: 100%;
    }

    /* Special grid for 3 items - makes them equal width */
    .bento-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 80px;
      width: 100%;
    }

    @media (max-width: 1024px) {
      .bento-3 {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .bento-3 {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    .bento-item {
      background: var(--bg-white);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 40px;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.02),
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.03);
      position: relative;
      overflow: hidden;
      transform-style: preserve-3d;
      will-change: transform;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* Subtle inner glow for depth */
    .bento-item::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0) 50%
      );
      pointer-events: none;
      opacity: 0.5;
      z-index: 0;
    }

    /* Loading bar removed: no ::before indicator on Bento cards */

    .bento-item h3 {
      display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 14px 0;
      margin-bottom: 20px;
      color: var(--text-dark);
      transition: color 0.3s ease;
    }

  /* No hover color shifts on Bento headlines */

    .bento-item .icon {
      font-size: 2rem;
      color: var(--primary);
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, rgba(64, 0, 255, 0.1), rgba(90, 31, 255, 0.1));
      border-radius: 12px;
      flex-shrink: 0;
    }

  /* No hover animation for icons inside Bento */

  /* Remove variant-specific hovers for Bento items (no background/border changes on hover) */

    /* Headline pills remain static on hover */

    .bento-item .icon svg {
      width: 28px;
      height: 28px;
      stroke: var(--primary);
      stroke-width: 2;
      fill: none;
    }

    .bento-item p {
      color: var(--text-medium);
      font-size: 1.0625rem;
      line-height: 1.7;
      margin: 0;
    }

    /* Force white icon stroke when needed */
    .bento-item .icon.icon-white svg {
      stroke: #fff;
    }

    /* Consistent minimal hover outline + scale for premium cards */
    .uptime-card,
    .insight-card,
    .compliance-card {
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

  /* Neutralize specific card hover transforms in Bento area and keep original borders */
  #kurzloesung .uptime-card:hover,
  #kurzloesung .insight-card:hover,
  #kurzloesung .compliance-card:hover { transform: none; box-shadow: inherit; border-color: var(--border); outline: none; }

  /* Keep variant backgrounds/borders unchanged on hover */
  #kurzloesung .bento-item-primary:hover { background: var(--primary); border-color: rgba(255,255,255,0.2); box-shadow: inherit; }
  #kurzloesung .bento-item-white:hover { background: #fff; border-color: var(--border); box-shadow: inherit; }
  #kurzloesung .tamper-card:hover { background: var(--primary); }

  /* Badge spacing and centering inside compliance cards - Enhanced */
  .compliance-card .compliance-row { 
    margin: 0 0 20px; 
    justify-content: center; 
    gap: 12px;
  }

    /* Small helper styles for compliance row and subtext */
    .compliance-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 20px;
      flex-wrap: wrap;
      justify-content: center;
    }

    /* Uptime Card – simplified to match minimal style */
    .uptime-card {
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 24px;
    }

    .uptime-card .uptime-halo { display: none; }

    .uptime-card::before { content: none; }

    .uptime-card::after { content: none; }

    .uptime-card .uptime-value {
      font-size: clamp(2.25rem, 2.8vw + 0.5rem, 3rem);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--primary);
      margin-bottom: 6px;
    }

    .uptime-card .uptime-label {
      position: relative;
      z-index: 2;
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--text-dark);
      opacity: 0.95;
      letter-spacing: 0.02em;
      margin-bottom: 8px;
    }

    .uptime-card .uptime-desc {
      position: relative;
      z-index: 2;
      font-size: 0.95rem;
      color: var(--text-medium);
      line-height: 1.65;
      max-width: 440px;
      margin: 0 auto;
    }

    /* No hover transforms to keep it calm */

    /* Removed halo animation for a simpler look */

    @media (max-width: 768px) {
      .uptime-card .uptime-value { font-size: clamp(2rem, 6vw, 2.5rem); }
      .uptime-card .uptime-desc { max-width: 360px; }
    }

    .compliance-row .lock-icon {
      display: inline-flex;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(255,255,255,0.18);
      align-items: center;
      justify-content: center;
    }

    .bento-item-primary .compliance-row .lock-icon {
      background: rgba(255,255,255,0.18);
    }

    .bento-item-white .compliance-row .lock-icon {
      background: rgba(64, 0, 255, 0.08);
    }

    .compliance-row .lock-icon svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      color: var(--primary);
    }

    .bento-item-primary .compliance-row .lock-icon svg { color: #fff; }

    .badge {
      display: inline-block;
      font-size: 0.85rem;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      color: white;
      background: rgba(255, 255, 255, 0.12);
    }

    /* Large pill variant used as headline - Premium Enhanced */
    .badge-lg {
      font-size: 1.125rem;
      font-weight: 700;
      padding: 12px 24px;
      border-width: 2px;
      line-height: 1.1;
      border-radius: 999px;
      box-shadow: 
        0 2px 8px rgba(64,0,255,0.08),
        0 4px 16px rgba(64,0,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      cursor: default;
      position: relative;
      letter-spacing: 0.02em;
    }

    .badge-lg:hover,
    .badge-lg:focus-visible {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 
        0 4px 12px rgba(64,0,255,0.12),
        0 8px 24px rgba(64,0,255,0.08),
        inset 0 1px 0 rgba(255,255,255,0.4);
    }

    .bento-item-white .badge {
      color: var(--primary);
      background: rgba(64,0,255,0.06);
      border-color: rgba(64,0,255,0.2);
    }

    .bento-item-white .badge-lg {
      color: var(--primary);
      background: linear-gradient(135deg, rgba(64,0,255,0.08), rgba(90,31,255,0.12));
      border-color: rgba(64,0,255,0.3);
      box-shadow: 
        0 2px 8px rgba(64,0,255,0.08),
        0 4px 16px rgba(64,0,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .bento-item-white .badge-lg:hover,
    .bento-item-white .badge-lg:focus-visible {
      background: linear-gradient(135deg, rgba(64,0,255,0.12), rgba(90,31,255,0.16));
      border-color: rgba(64,0,255,0.4);
      box-shadow: 
        0 4px 12px rgba(64,0,255,0.12),
        0 8px 24px rgba(64,0,255,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
    }

    /* Premium polish: Tamper-proof left card */
    .tamper-card {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      min-height: 210px;
    }

    .tamper-card h3 {
      color: #fff;
      font-weight: 800;
      letter-spacing: -0.01em;
      font-size: clamp(1.5rem, 2.2vw + 0.3rem, 2.25rem);
      margin: 0 0 8px 0;
    }

    .tamper-card p {
      color: rgba(255,255,255,0.92);
      font-size: clamp(1rem, 0.35vw + 0.9rem, 1.125rem);
      line-height: 1.7;
      max-width: 820px;
      margin: 0 auto;
    }

    /* Premium polish: Insight (BI) card */
    .insight-card { text-align: left; }
    .insight-card .icon { margin-bottom: 18px; }
    .insight-card h3 {
      font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
      font-weight: 700;
      color: var(--text-dark);
      letter-spacing: -0.01em;
      margin: 0 0 10px 0;
      text-align: center;
    }
    .insight-card p {
      color: var(--text-medium);
      font-size: clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
      line-height: 1.7;
      margin: 0 auto;
      max-width: 760px;
      text-align: center;
    }

    /* Premium polish: Compliance right card - Enhanced */
  .compliance-card .compliance-row { 
    gap: 16px; 
    margin: 0 0 24px; 
  }
    .compliance-card p {
      color: var(--text-medium);
      font-size: clamp(1rem, 0.35vw + 0.9rem, 1.125rem);
      line-height: 1.75;
      max-width: 600px;
      margin: 0 auto;
      letter-spacing: 0.01em;
    }

    @media (max-width: 768px) {
      .tamper-card { min-height: 190px; padding: 28px 24px; }
      .compliance-card .compliance-row { gap: 10px; margin: 0 0 18px; }
      .compliance-card p { font-size: 0.95rem; line-height: 1.65; }
    }

    .bento-item .subtext {
      font-size: 0.95rem;
      color: var(--text-muted, #6b7280);
      margin-top: 10px;
    }

    .bento-item-primary .subtext { color: rgba(255,255,255,0.9); }

    /* Global explicit variants for bento items - Premium Enhanced */
    .bento-item-primary {
      background: linear-gradient(135deg, #4000FF 0%, #5A1FFF 100%);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: white;
      box-shadow: 
        0 4px 16px rgba(64, 0, 255, 0.20),
        0 8px 32px rgba(64, 0, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      position: relative;
    }

    /* Subtle shimmer overlay for primary cards */
    .bento-item-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(0, 0, 0, 0.05) 100%
      );
      pointer-events: none;
      z-index: 0;
      border-radius: inherit;
      transition: opacity 0.4s ease;
      opacity: 0.6;
    }

    .bento-item-primary:hover::before {
      opacity: 0.8;
    }

    .bento-item-primary h3,
    .bento-item-primary p { 
      color: white; 
      position: relative;
      z-index: 1;
    }

    .bento-item-primary .icon {
      background: rgba(255, 255, 255, 0.15);
      position: relative;
      z-index: 1;
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .bento-item-primary .icon svg {
      stroke: #fff;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }

    .bento-item-primary:hover {
      background: linear-gradient(135deg, #5A1FFF 0%, #6B2FFF 100%);
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow: 
        0 6px 20px rgba(64, 0, 255, 0.25),
        0 12px 40px rgba(64, 0, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .bento-item-white {
      background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
      border: 1px solid rgba(0, 0, 0, 0.06);
      color: var(--text-dark);
      box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.02),
        0 4px 12px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .bento-item-white h3 { color: var(--text-dark); }
    .bento-item-white p { color: var(--text-medium); }

    .bento-item-white .icon {
      background: linear-gradient(135deg, rgba(64, 0, 255, 0.06), rgba(90, 31, 255, 0.08));
      border: 1px solid rgba(64, 0, 255, 0.1);
      box-shadow: 
        0 2px 8px rgba(64, 0, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .bento-item-white .icon svg {
      stroke: var(--primary);
      filter: drop-shadow(0 1px 2px rgba(64, 0, 255, 0.1));
    }

    .bento-item-white:hover {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      border-color: rgba(64, 0, 255, 0.15);
      box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.03),
        0 8px 20px rgba(0, 0, 0, 0.06),
        0 16px 40px rgba(64, 0, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    /* Images */
    img.resp {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
      box-shadow: var(--shadow);
    }

    /* Background Sections */
    .bg-light {
      background: var(--bg-light);
    }

    .bg-light::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg-light);
      z-index: 0;
    }

    .bg-primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
      color: white;
    }

    .bg-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
      z-index: 0;
    }

    /* Ensure the last section and footer share exactly the same solid primary background */
    #kontakt.bg-primary { background: var(--primary) !important; padding-bottom: 80px !important; }
    #kontakt.bg-primary::before { background: var(--primary) !important; }
    footer.bg-primary { background: var(--primary) !important; }
    footer.bg-primary::before { background: var(--primary) !important; }

    .bg-dark {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      color: white;
    }

    .bg-dark::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      z-index: 0;
    }

    .bg-dark h2,
    .bg-dark h3,
    .bg-dark p,
    .bg-dark strong {
      color: white;
    }

    .bg-primary h2,
    .bg-primary h3,
    .bg-primary p,
    .bg-primary strong {
      color: white;
    }

    .bg-primary .bento-item {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
    }

    .bg-primary .bento-item:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.4);
    }

    /* Individual card styles - Keine Fixkosten with primary color */
    .bg-primary .bento-item-primary {
      background: #4000FF;
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: none;
    }

    .bg-primary .bento-item-primary:hover {
      background: #5A1FFF;
      border-color: rgba(255, 255, 255, 0.4);
    }

    .bg-primary .bento-item-primary h3,
    .bg-primary .bento-item-primary p {
      color: white;
    }

    .bg-primary .bento-item-primary .icon {
      background: rgba(255, 255, 255, 0.15);
    }

    .bg-primary .bento-item-primary:hover .icon {
      background: rgba(255, 255, 255, 0.25);
    }

    /* 24/7 Support with white background */
    .bg-primary .bento-item-white {
      background: white;
      border: 1px solid rgba(64, 0, 255, 0.1);
      backdrop-filter: none;
    }

    .bg-primary .bento-item-white:hover {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(64, 0, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

    .bg-primary .bento-item-white h3,
    .bg-primary .bento-item-white p {
      color: #1a1a1a;
    }

    .bg-primary .bento-item-white .icon {
      background: rgba(64, 0, 255, 0.1);
      color: #4000FF;
    }

    .bg-primary .bento-item-white:hover .icon {
      background: rgba(64, 0, 255, 0.15);
    }

    .bg-primary .bento-item-white .icon svg {
      stroke: #4000FF;
    }

    /* Premium Security Cards - Vertical Layout */
    .security-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 80px;
      width: 100%;
    }

    .security-card {
      background: rgba(255, 255, 255, 0.98);
      border-radius: 24px;
      padding: 60px 40px;
      text-align: center;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      position: relative;
      overflow: hidden;
      min-height: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      border: 2px solid rgba(255, 255, 255, 0.3);
      transform-style: preserve-3d;
      perspective: 1000px;
      will-change: transform;
    }

    @media (hover: hover) {
      .security-card:hover {
        box-shadow: 0 20px 56px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 1);
      }

      .security-card:hover .security-icon {
        transform: translateZ(15px) scale(1.03);
        box-shadow: 0 14px 40px rgba(64, 0, 255, 0.3);
      }

      .security-card:hover .security-icon::before {
        opacity: 0.35;
      }

      .security-card:hover h3 {
        color: var(--primary);
        transform: translateZ(8px);
      }

      .security-card:hover p {
        transform: translateZ(4px);
      }
    }

    .security-icon {
      width: 96px;
      height: 96px;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 32px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 12px 32px rgba(64, 0, 255, 0.25);
      position: relative;
      transform-style: preserve-3d;
    }

    .security-icon::before {
      content: '';
      position: absolute;
      inset: -8px;
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
      border-radius: 28px;
      opacity: 0;
      filter: blur(20px);
      transition: opacity 0.4s ease;
      z-index: -1;
    }

    .security-icon svg {
      width: 48px;
      height: 48px;
      stroke: white;
      stroke-width: 2.5;
      fill: none;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    .security-card h3 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-dark);
      margin: 0 0 20px 0;
      line-height: 1.3;
      letter-spacing: -0.02em;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
    }

    .security-card p {
      font-size: 1.125rem;
      line-height: 1.7;
      color: var(--text-medium);
      margin: 0;
      max-width: 100%;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
    }

    /* Ensure emphasis is readable on white cards inside .bg-primary sections */
    .security-card strong {
      color: var(--text-dark);
    }

    @media (max-width: 1024px) {
      .security-cards {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .security-card {
        min-height: auto;
        padding: 48px 32px;
      }

      .security-icon {
        width: 80px;
        height: 80px;
      }

      .security-icon svg {
        width: 40px;
        height: 40px;
      }
    }

    @media (max-width: 768px) {
      .security-card {
        padding: 40px 24px;
      }

      .security-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 24px;
      }

      .security-icon svg {
        width: 36px;
        height: 36px;
      }

      .security-card h3 {
        font-size: 1.25rem;
      }

      .security-card p {
        font-size: 1rem;
      }
    }

    .bg-primary .bento-item h3,
    .bg-primary .bento-item p {
      color: white;
    }

    .bg-primary .bento-item .icon {
      color: white;
    }

    /* 5¢ Coin Container with Realistic Soap Bubble Physics */
    .coin-container {
      width: 240px;
      height: 240px;
      border-radius: 50%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      opacity: 0;
      transform: translateY(-100px);
      animation: coinDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      animation-delay: 0.3s;
      
      /* Default light position */
      --light-x: 30%;
      --light-y: 30%;
      
      /* Dynamic Background: Reacts to light source - Brighter center to replace highlight */
      background: radial-gradient(
        circle at var(--light-x) var(--light-y), 
        #9d7dff 0%, 
        #7045ff 30%, 
        #4000ff 60%, 
        #2a00aa 100%
      );
      
      /* Deep realistic shadow */
      box-shadow: 
        0 40px 80px -20px rgba(64, 0, 255, 0.6),
        inset 0 -10px 40px rgba(0, 0, 0, 0.4);
    }

    /* Rainbow Interference Layer (Thin Film Physics) */
    .coin-container::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      /* Complex gradient simulating soap film interference */
      background: radial-gradient(
        circle at var(--light-x) var(--light-y), 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 0, 255, 0.15) 30%,
        rgba(0, 255, 255, 0.15) 50%,
        rgba(255, 255, 0, 0.15) 70%,
        rgba(255, 255, 255, 0.05) 90%
      );
      mix-blend-mode: overlay;
      z-index: 2;
      pointer-events: none;
      filter: blur(8px); /* Softer blur */
    }

    /* Specular Highlight REMOVED as requested */
    .coin-container::after {
      content: none;
    }

    /* Inner Glow/Rim Light */
    .coin-glow {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      /* Subtle rim light */
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
      z-index: 4;
      pointer-events: none;
    }

    .coin-value {
      font-size: 5.5rem;
      color: white;
      font-weight: 700;
      z-index: 5; /* Ensure icon is above effects */
      position: relative;
    }

    @keyframes coinDrop {
      0% {
        opacity: 0;
        transform: translateY(-100px) scale(0.8);
      }
      60% {
        transform: translateY(10px) scale(1.05);
      }
      80% {
        transform: translateY(-5px) scale(0.98);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .coin-glow {
      position: absolute;
      inset: -40px;
      background: radial-gradient(circle, rgba(90, 31, 255, 0.4) 0%, rgba(64, 0, 255, 0) 70%);
      border-radius: 50%;
      opacity: 0.6;
      filter: blur(30px);
      animation: glowPulse 4s ease-in-out infinite;
      z-index: -1;
    }

    @keyframes glowPulse {
      0%, 100% {
        opacity: 0.15;
        transform: scale(1);
      }
      50% {
        opacity: 0.25;
        transform: scale(1.05);
      }
    }

    .coin-value {
      font-size: 5.5rem;
      color: white;
      font-weight: 700;
      position: relative;
      z-index: 1;
    }

    @media (max-width: 768px) {
      .coin-container {
        width: 180px;
        height: 180px;
      }

      .coin-value {
        font-size: 4rem;
      }
    }

    /* Premium Payment Card - Luxurious Design */
    .premium-payment-card {
      background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
      border-radius: 28px;
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.03),
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 16px 64px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(0, 0, 0, 0.04);
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
      will-change: transform;
    }

    .premium-payment-card:hover {
      box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 12px 40px rgba(0, 0, 0, 0.08),
        0 20px 80px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
      border-color: rgba(64, 0, 255, 0.08);
    }

    /* Enhanced Gradient Fade Overlay with subtle shimmer */
    .premium-payment-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 25%,
        rgba(255, 255, 255, 0.6) 40%,
        rgba(255, 255, 255, 0.3) 55%,
        rgba(255, 255, 255, 0.1) 70%,
        rgba(64, 0, 255, 0.02) 85%,
        rgba(64, 0, 255, 0.04) 100%
      );
      z-index: 2;
      pointer-events: none;
      opacity: 0.7;
      transition: opacity 0.6s ease;
    }

    .premium-payment-card:hover::before {
      opacity: 0.9;
    }

    .payment-content {
      position: relative;
      z-index: 3;
      padding: 48px;
      padding-bottom: 32px;
    }

    .payment-content h3 {
      font-size: 2.25rem;
      font-weight: 700;
      color: var(--text-dark);
      margin: 0 0 20px 0;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .payment-content p {
      font-size: 1.125rem;
      line-height: 1.7;
      color: var(--text-medium);
      margin: 0;
      max-width: 480px;
    }

    /* Payment Logos Container */
    .payment-logos-container {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 40px;
    }

    .payment-logos-scroll {
      display: flex;
      gap: 24px;
      /* JS-controlled seamless marquee: disable CSS keyframe animation */
      animation: none !important;
      will-change: transform;
    }

    .payment-logos-scroll-reverse {
      /* JS-controlled seamless marquee: disable CSS keyframe animation */
      animation: none !important;
    }

    @keyframes scrollLogos {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    @keyframes scrollLogosReverse {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0);
      }
    }

    .payment-logo {
      height: 48px;
      width: auto;
      object-fit: contain;
      flex-shrink: 0;
      opacity: 0.25;
      filter: grayscale(0%) brightness(1.1);
      transition: all 0.3s ease;
    }

    .premium-payment-card:hover .payment-logo {
      opacity: 0.35;
    }

    /* Add multiple rows for depth */
    .payment-logos-container::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: linear-gradient(to top, white 0%, transparent 100%);
      pointer-events: none;
      z-index: 2;
    }

    @media (max-width: 1024px) {
      .premium-payment-card {
        grid-column: 1 / -1 !important;
        min-height: 320px;
      }

      .payment-content {
        padding: 36px;
      }

      .payment-content h3 {
        font-size: 1.875rem;
      }

      .payment-logo {
        height: 40px;
      }
    }

    @media (max-width: 768px) {
      .payment-content {
        padding: 28px;
      }

      .payment-content h3 {
        font-size: 1.625rem;
      }

      .payment-content p {
        font-size: 1rem;
      }

      .payment-logo {
        height: 32px;
        gap: 16px;
      }

      .payment-logos-container {
        padding: 24px;
      }
    }

    /* Premium Weather-Proof Glass Card with Realistic Rain Drops */
    .weather-glass-card {
      background: linear-gradient(135deg, #4000FF 0%, #5A1FFF 100%);
      border-radius: 28px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 190px;
      box-shadow: 
        0 4px 16px rgba(64, 0, 255, 0.25),
        0 12px 40px rgba(64, 0, 255, 0.20),
        0 20px 64px rgba(64, 0, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transform-style: preserve-3d;
      will-change: transform;
    }

    .weather-glass-card:hover {
      box-shadow: 
        0 6px 20px rgba(64, 0, 255, 0.30),
        0 16px 48px rgba(64, 0, 255, 0.25),
        0 24px 80px rgba(64, 0, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.15);
    }

    /* Enhanced frosted glass backdrop filter with shimmer */
    .weather-glass-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(0, 0, 0, 0.05) 100%
      );
      backdrop-filter: blur(12px) saturate(120%);
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      z-index: 2;
      border-radius: 28px;
      pointer-events: none;
      transition: backdrop-filter 0.6s ease;
    }

    .weather-glass-card:hover::before {
      backdrop-filter: blur(14px) saturate(130%);
      -webkit-backdrop-filter: blur(14px) saturate(130%);
    }

    /* Animated Rain Drops Container */
    .glass-raindrops {
      position: absolute;
      inset: 0;
      z-index: 3;
      overflow: hidden;
      border-radius: 24px;
    }

    /* Realistic raindrops with zigzag movement */
    .glass-raindrops::before,
    .glass-raindrops::after {
      content: '';
      position: absolute;
      background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 15%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 70%);
      border-radius: 50% 50% 50% 60%;
      filter: blur(0.3px);
      box-shadow: 
        inset -1px -2px 3px rgba(255, 255, 255, 0.35),
        inset 1px 1px 2px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .glass-raindrops::before {
      width: 13px;
      height: 17px;
      animation: raindropZigzag1 2.8s ease-in-out infinite;
    }

    .glass-raindrops::after {
      width: 11px;
      height: 15px;
      animation: raindropZigzag2 3.2s ease-in-out infinite;
      animation-delay: 1s;
    }

    /* Additional falling drops */
    .weather-content::before,
    .weather-content::after {
      content: '';
      position: absolute;
      background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.45) 15%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 40%, transparent 70%);
      border-radius: 50% 50% 50% 60%;
      filter: blur(0.3px);
      box-shadow: 
        inset -1px -2px 3px rgba(255, 255, 255, 0.3),
        inset 1px 1px 2px rgba(255, 255, 255, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.08);
      z-index: -1;
    }

    .weather-content::before {
      width: 12px;
      height: 16px;
      animation: raindropZigzag3 2.6s ease-in-out infinite;
      animation-delay: 0.5s;
    }

    .weather-content::after {
      width: 14px;
      height: 18px;
      animation: raindropZigzag4 3s ease-in-out infinite;
      animation-delay: 1.8s;
    }

    /* Zigzag falling animations - 4 drops */
    @keyframes raindropZigzag1 {
      0% {
        top: -20px;
        left: 18%;
        transform: translateX(0) scaleY(1);
        opacity: 0;
        filter: blur(1.5px);
      }
      5% {
        opacity: 0.9;
      }
      25% {
        top: 60px;
        left: 15%;
        transform: translateX(0) scaleY(1.15);
        filter: blur(1.3px);
      }
      35% {
        top: 72px;
        left: 16%;
        transform: translateX(0) scaleY(0.92);
        filter: blur(0.7px);
      }
      60% {
        top: 140px;
        left: 20%;
        transform: translateX(0) scaleY(1.28);
        filter: blur(1.7px);
      }
      85% {
        opacity: 0.9;
        left: 17%;
      }
      100% {
        top: 220px;
        left: 19%;
        transform: translateX(0) scaleY(1.4);
        opacity: 0;
        filter: blur(2px);
      }
    }

    @keyframes raindropZigzag2 {
      0% {
        top: -20px;
        left: 72%;
        transform: translateX(0) scaleY(1);
        opacity: 0;
        filter: blur(1.8px);
      }
      5% {
        opacity: 0.85;
      }
      30% {
        top: 70px;
        left: 75%;
        transform: translateX(0) scaleY(1.12);
        filter: blur(1.4px);
      }
      65% {
        top: 145px;
        left: 70%;
        transform: translateX(0) scaleY(1.25);
        filter: blur(1.8px);
      }
      85% {
        opacity: 0.85;
        left: 73%;
      }
      100% {
        top: 220px;
        left: 71%;
        transform: translateX(0) scaleY(1.45);
        opacity: 0;
        filter: blur(2.2px);
      }
    }

    @keyframes raindropZigzag3 {
      0% {
        top: -20px;
        left: 42%;
        transform: translateX(0) scaleY(1);
        opacity: 0;
        filter: blur(1.6px);
      }
      5% {
        opacity: 0.88;
      }
      20% {
        top: 45px;
        left: 45%;
        transform: translateX(0) scaleY(1.1);
        filter: blur(1.3px);
      }
      32% {
        top: 62px;
        left: 44%;
        transform: translateX(0) scaleY(0.88);
        filter: blur(0.6px);
      }
      50% {
        top: 105px;
        left: 40%;
        transform: translateX(0) scaleY(1.2);
        filter: blur(1.5px);
      }
      72% {
        top: 160px;
        left: 44%;
        transform: translateX(0) scaleY(1.3);
        filter: blur(1.9px);
      }
      85% {
        opacity: 0.88;
      }
      100% {
        top: 220px;
        left: 41%;
        transform: translateX(0) scaleY(1.38);
        opacity: 0;
        filter: blur(2.1px);
      }
    }

    @keyframes raindropZigzag4 {
      0% {
        top: -20px;
        left: 88%;
        transform: translateX(0) scaleY(1);
        opacity: 0;
        filter: blur(1.7px);
      }
      5% {
        opacity: 0.92;
      }
      28% {
        top: 65px;
        left: 85%;
        transform: translateX(0) scaleY(1.14);
        filter: blur(1.5px);
      }
      40% {
        top: 82px;
        left: 86%;
        transform: translateX(0) scaleY(0.9);
        filter: blur(0.7px);
      }
      70% {
        top: 155px;
        left: 89%;
        transform: translateX(0) scaleY(1.28);
        filter: blur(1.9px);
      }
      85% {
        opacity: 0.92;
      }
      100% {
        top: 220px;
        left: 87%;
        transform: translateX(0) scaleY(1.42);
        opacity: 0;
        filter: blur(2.3px);
      }
    }

    /* Static water drops (stars) with individual fade animations */
    .glass-raindrops {
      background-image: 
        /* Large static drops */
        radial-gradient(ellipse 6px 7px at 15% 22%, rgba(255, 255, 255, 0.75) 0%, transparent 3px),
        radial-gradient(ellipse 6px 7px at 15% 22%, rgba(255, 255, 255, 0.25) 0%, transparent 6px),
        
        radial-gradient(ellipse 5px 6px at 67% 15%, rgba(255, 255, 255, 0.7) 0%, transparent 2.5px),
        radial-gradient(ellipse 5px 6px at 67% 15%, rgba(255, 255, 255, 0.22) 0%, transparent 5px),
        
        radial-gradient(ellipse 7px 8px at 88% 42%, rgba(255, 255, 255, 0.8) 0%, transparent 3.5px),
        radial-gradient(ellipse 7px 8px at 88% 42%, rgba(255, 255, 255, 0.3) 0%, transparent 7px),
        
        radial-gradient(ellipse 5px 6px at 28% 58%, rgba(255, 255, 255, 0.68) 0%, transparent 2.5px),
        radial-gradient(ellipse 5px 6px at 28% 58%, rgba(255, 255, 255, 0.2) 0%, transparent 5px),
        
        radial-gradient(ellipse 6px 7px at 52% 75%, rgba(255, 255, 255, 0.73) 0%, transparent 3px),
        radial-gradient(ellipse 6px 7px at 52% 75%, rgba(255, 255, 255, 0.25) 0%, transparent 6px),
        
        /* Small scattered star-like drops that fade */
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.6) 0%, transparent 3px),
        radial-gradient(circle at 8% 35%, rgba(255, 255, 255, 0.65) 0%, transparent 3.5px),
        radial-gradient(circle at 78% 68%, rgba(255, 255, 255, 0.55) 0%, transparent 3px),
        radial-gradient(circle at 35% 88%, rgba(255, 255, 255, 0.5) 0%, transparent 4px),
        radial-gradient(circle at 48% 12%, rgba(255, 255, 255, 0.58) 0%, transparent 3px);
      
      background-size: 100% 100%;
      background-repeat: no-repeat;
      animation: starsFade 6s ease-in-out infinite;
    }

    /* Stars (static drops) fade in and out with random-like timing */
    @keyframes starsFade {
      0% {
        opacity: 0.3;
      }
      20% {
        opacity: 0.85;
      }
      35% {
        opacity: 0.4;
      }
      50% {
        opacity: 1;
      }
      70% {
        opacity: 0.5;
      }
      85% {
        opacity: 0.9;
      }
      100% {
        opacity: 0.3;
      }
    }

    /* Text Content */
    .weather-content {
      position: relative;
      z-index: 4;
      text-align: center;
      padding: 32px;
    }

    .weather-content h3 {
      font-size: 1.375rem;
      font-weight: 700;
      color: white;
      margin: 0;
      text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2);
      letter-spacing: -0.02em;
      line-height: 1.3;
    }

    @media (max-width: 1024px) {
      .weather-glass-card {
        grid-column: 1 / -1 !important;
        min-height: 220px;
      }

      .weather-content h3 {
        font-size: 1.5rem;
      }
    }

    @media (max-width: 768px) {
      .weather-glass-card {
        min-height: 180px;
      }

      .weather-content {
        padding: 24px;
      }

      .weather-content h3 {
        font-size: 1.25rem;
      }
    }

    .bg-primary .btn {
      background: white;
      color: var(--primary);
    }

    .bg-primary .btn:hover {
      background: var(--bg-light);
      transform: translateY(-2px);
    }

    /* Testimonials */
    .testimonial {
      background: var(--bg-white);
      border-left: 5px solid var(--primary);
      padding: 40px 48px;
      margin: 48px 0;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .testimonial::before {
      content: '"';
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 120px;
      color: var(--primary);
      opacity: 0.05;
      font-family: Georgia, serif;
      line-height: 1;
    }

    .testimonial:hover {
      transform: translateX(8px);
      box-shadow: 0 8px 32px rgba(64, 0, 255, 0.12);
    }

    .testimonial p {
      font-size: 1.25rem;
      font-style: italic;
      color: var(--text-medium);
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
    }

    .testimonial strong {
      font-style: normal;
      font-size: 1.0625rem;
      color: var(--text-dark);
      font-weight: 600;
      position: relative;
      z-index: 1;
    }

    /* Footer (legacy – does NOT apply to .p-footer) */
  footer:not(.p-footer) { text-align: center; padding: 60px 20px; color: #fff; position: relative; }
  footer:not(.p-footer) > * { position: relative; z-index: 1; }
  footer.bg-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); }
  footer.bg-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); pointer-events: none; }

    footer:not(.p-footer) p { color: rgba(255,255,255,0.9); font-size: 0.95rem; margin-bottom: 8px; }

    /* Utilities */
    .small { 
      font-size: 0.95rem;
      color: var(--text-light);
    }

    .spacer {
      height: 40px;
    }

    /* Animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .fade-in {
      animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fade-in-delay-1 {
      animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
    }

    .fade-in-delay-2 {
      animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
    }

    .fade-in-delay-3 {
      animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
    }

    /* Premium Aurora Header Inset Animations */
    @keyframes auroraInsetFadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes auroraInsetGlowLeft {
      0% {
        box-shadow: 
          inset 80px 0 100px -40px rgba(64, 0, 255, 0.15),
          inset -80px 0 100px -40px rgba(90, 31, 255, 0.12),
          inset 0 60px 80px -30px rgba(64, 0, 255, 0.10);
      }
      25% {
        box-shadow: 
          inset 95px 0 110px -42px rgba(90, 31, 255, 0.18),
          inset -70px 0 95px -38px rgba(64, 0, 255, 0.10),
          inset 0 70px 90px -32px rgba(90, 31, 255, 0.12);
      }
      50% {
        box-shadow: 
          inset 70px 0 95px -38px rgba(64, 0, 255, 0.13),
          inset -90px 0 105px -42px rgba(90, 31, 255, 0.14),
          inset 0 65px 85px -31px rgba(64, 0, 255, 0.09);
      }
      75% {
        box-shadow: 
          inset 85px 0 105px -41px rgba(90, 31, 255, 0.16),
          inset -75px 0 100px -40px rgba(64, 0, 255, 0.11),
          inset 0 75px 95px -33px rgba(90, 31, 255, 0.11);
      }
      100% {
        box-shadow: 
          inset 80px 0 100px -40px rgba(64, 0, 255, 0.15),
          inset -80px 0 100px -40px rgba(90, 31, 255, 0.12),
          inset 0 60px 80px -30px rgba(64, 0, 255, 0.10);
      }
    }

    /* Hero Section Aurora Animations - More intense & premium */
    @keyframes heroAuroraInsetLeft {
      0% {
        box-shadow: 
          inset 120px 0 140px -50px rgba(64, 0, 255, 0.18),
          inset -120px 0 140px -50px rgba(90, 31, 255, 0.15),
          inset 0 100px 120px -40px rgba(64, 0, 255, 0.14);
      }
      20% {
        box-shadow: 
          inset 140px 0 155px -52px rgba(90, 31, 255, 0.22),
          inset -105px 0 130px -48px rgba(64, 0, 255, 0.13),
          inset 0 115px 135px -43px rgba(90, 31, 255, 0.17);
      }
      40% {
        box-shadow: 
          inset 110px 0 135px -49px rgba(64, 0, 255, 0.16),
          inset -130px 0 145px -51px rgba(90, 31, 255, 0.18),
          inset 0 105px 125px -42px rgba(64, 0, 255, 0.13);
      }
      60% {
        box-shadow: 
          inset 135px 0 150px -51px rgba(90, 31, 255, 0.20),
          inset -115px 0 135px -49px rgba(64, 0, 255, 0.14),
          inset 0 120px 140px -44px rgba(90, 31, 255, 0.16);
      }
      80% {
        box-shadow: 
          inset 125px 0 142px -50px rgba(64, 0, 255, 0.17),
          inset -125px 0 142px -50px rgba(90, 31, 255, 0.16),
          inset 0 110px 130px -42px rgba(64, 0, 255, 0.15);
      }
      100% {
        box-shadow: 
          inset 120px 0 140px -50px rgba(64, 0, 255, 0.18),
          inset -120px 0 140px -50px rgba(90, 31, 255, 0.15),
          inset 0 100px 120px -40px rgba(64, 0, 255, 0.14);
      }
    }

    @keyframes heroAuroraInsetRight {
      0% {
        box-shadow: 
          inset -140px 0 160px -60px rgba(90, 31, 255, 0.17),
          inset 140px 0 160px -60px rgba(64, 0, 255, 0.13),
          inset 0 110px 130px -45px rgba(90, 31, 255, 0.12);
      }
      25% {
        box-shadow: 
          inset -125px 0 150px -57px rgba(64, 0, 255, 0.15),
          inset 155px 0 170px -62px rgba(90, 31, 255, 0.19),
          inset 0 120px 140px -47px rgba(64, 0, 255, 0.14);
      }
      50% {
        box-shadow: 
          inset -155px 0 170px -62px rgba(90, 31, 255, 0.21),
          inset 130px 0 155px -58px rgba(64, 0, 255, 0.12),
          inset 0 105px 125px -44px rgba(90, 31, 255, 0.11);
      }
      75% {
        box-shadow: 
          inset -135px 0 155px -58px rgba(64, 0, 255, 0.16),
          inset 145px 0 165px -61px rgba(90, 31, 255, 0.18),
          inset 0 115px 135px -46px rgba(64, 0, 255, 0.13);
      }
      100% {
        box-shadow: 
          inset -140px 0 160px -60px rgba(90, 31, 255, 0.17),
          inset 140px 0 160px -60px rgba(64, 0, 255, 0.13),
          inset 0 110px 130px -45px rgba(90, 31, 255, 0.12);
      }
    }

    /* Dynamic Aurora Wave Animation - Flows from left to right like a real wave */
    @keyframes auroraWaveFlow {
      0% {
        box-shadow: 
          inset 140px 0 160px -60px rgba(64, 0, 255, 0.20),
          inset -100px 0 140px -55px rgba(90, 31, 255, 0.12),
          inset 0 120px 140px -50px rgba(64, 0, 255, 0.16);
      }
      
      12.5% {
        box-shadow: 
          inset 160px 0 180px -65px rgba(90, 31, 255, 0.24),
          inset -80px 0 130px -52px rgba(64, 0, 255, 0.10),
          inset 0 130px 150px -52px rgba(90, 31, 255, 0.18);
      }
      
      25% {
        box-shadow: 
          inset 120px 0 150px -58px rgba(64, 0, 255, 0.16),
          inset -60px 0 120px -50px rgba(90, 31, 255, 0.08),
          inset 0 140px 160px -54px rgba(64, 0, 255, 0.20);
      }
      
      37.5% {
        box-shadow: 
          inset 80px 0 130px -52px rgba(90, 31, 255, 0.12),
          inset -100px 0 140px -55px rgba(64, 0, 255, 0.14),
          inset 0 130px 150px -52px rgba(90, 31, 255, 0.16);
      }
      
      50% {
        box-shadow: 
          inset 100px 0 140px -55px rgba(64, 0, 255, 0.12),
          inset -140px 0 160px -60px rgba(90, 31, 255, 0.20),
          inset 0 120px 140px -50px rgba(64, 0, 255, 0.14);
      }
      
      62.5% {
        box-shadow: 
          inset 80px 0 130px -52px rgba(90, 31, 255, 0.10),
          inset -160px 0 180px -65px rgba(64, 0, 255, 0.24),
          inset 0 130px 150px -52px rgba(90, 31, 255, 0.16);
      }
      
      75% {
        box-shadow: 
          inset 60px 0 120px -50px rgba(64, 0, 255, 0.08),
          inset -120px 0 150px -58px rgba(90, 31, 255, 0.16),
          inset 0 140px 160px -54px rgba(64, 0, 255, 0.18);
      }
      
      87.5% {
        box-shadow: 
          inset 100px 0 140px -55px rgba(90, 31, 255, 0.14),
          inset -80px 0 130px -52px rgba(64, 0, 255, 0.12),
          inset 0 130px 150px -52px rgba(90, 31, 255, 0.16);
      }
      
      100% {
        box-shadow: 
          inset 140px 0 160px -60px rgba(64, 0, 255, 0.20),
          inset -100px 0 140px -55px rgba(90, 31, 255, 0.12),
          inset 0 120px 140px -50px rgba(64, 0, 255, 0.16);
      }
    }

    /* Header Aurora Animations (keeping existing) */
    @keyframes auroraInsetFadeIn {
      0% {
        box-shadow: 
          inset -100px 0 120px -50px rgba(90, 31, 255, 0.14),
          inset 100px 0 120px -50px rgba(64, 0, 255, 0.11),
          inset 0 70px 90px -35px rgba(90, 31, 255, 0.08);
      }
      30% {
        box-shadow: 
          inset -85px 0 110px -46px rgba(64, 0, 255, 0.12),
          inset 110px 0 125px -52px rgba(90, 31, 255, 0.13),
          inset 0 75px 95px -36px rgba(64, 0, 255, 0.10);
      }
      60% {
        box-shadow: 
          inset -110px 0 125px -52px rgba(90, 31, 255, 0.16),
          inset 90px 0 115px -48px rgba(64, 0, 255, 0.10),
          inset 0 65px 85px -34px rgba(90, 31, 255, 0.07);
      }
      85% {
        box-shadow: 
          inset -95px 0 115px -48px rgba(64, 0, 255, 0.13),
          inset 105px 0 122px -51px rgba(90, 31, 255, 0.12),
          inset 0 72px 92px -36px rgba(64, 0, 255, 0.09);
      }
      100% {
        box-shadow: 
          inset -100px 0 120px -50px rgba(90, 31, 255, 0.14),
          inset 100px 0 120px -50px rgba(64, 0, 255, 0.11),
          inset 0 70px 90px -35px rgba(90, 31, 255, 0.08);
      }
    }

    /* Mobile-optimized aurora animations */
    @keyframes auroraInsetGlowLeftMobile {
      0%, 100% {
        box-shadow: 
          inset 50px 0 70px -30px rgba(64, 0, 255, 0.12),
          inset -50px 0 70px -30px rgba(90, 31, 255, 0.10),
          inset 0 40px 60px -25px rgba(64, 0, 255, 0.08);
      }
      50% {
        box-shadow: 
          inset 60px 0 75px -32px rgba(90, 31, 255, 0.14),
          inset -45px 0 65px -28px rgba(64, 0, 255, 0.09),
          inset 0 45px 65px -27px rgba(90, 31, 255, 0.10);
      }
    }

    @keyframes auroraInsetGlowRightMobile {
      0%, 100% {
        box-shadow: 
          inset -60px 0 80px -35px rgba(90, 31, 255, 0.11),
          inset 60px 0 80px -35px rgba(64, 0, 255, 0.09),
          inset 0 45px 65px -28px rgba(90, 31, 255, 0.07);
      }
      50% {
        box-shadow: 
          inset -55px 0 75px -33px rgba(64, 0, 255, 0.10),
          inset 65px 0 82px -36px rgba(90, 31, 255, 0.11),
          inset 0 42px 62px -26px rgba(64, 0, 255, 0.08);
      }
    }

    /* Hero Section Mobile Aurora Animations */
    @keyframes auroraWaveFlowMobile {
      0%, 100% {
        box-shadow: 
          inset 80px 0 110px -45px rgba(64, 0, 255, 0.16),
          inset -70px 0 100px -42px rgba(90, 31, 255, 0.10),
          inset 0 80px 100px -38px rgba(64, 0, 255, 0.14);
      }
      25% {
        box-shadow: 
          inset 60px 0 95px -40px rgba(90, 31, 255, 0.12),
          inset -90px 0 115px -47px rgba(64, 0, 255, 0.18),
          inset 0 85px 105px -40px rgba(90, 31, 255, 0.16);
      }
      50% {
        box-shadow: 
          inset 70px 0 100px -42px rgba(64, 0, 255, 0.10),
          inset -80px 0 110px -45px rgba(90, 31, 255, 0.16),
          inset 0 80px 100px -38px rgba(64, 0, 255, 0.12);
      }
      75% {
        box-shadow: 
          inset 90px 0 115px -47px rgba(90, 31, 255, 0.18),
          inset -60px 0 95px -40px rgba(64, 0, 255, 0.12),
          inset 0 85px 105px -40px rgba(90, 31, 255, 0.14);
      }
    }

    /* Intersection Observer Animation Classes */
    .reveal {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity, transform;
    }

    .reveal.active {
      opacity: 1;
      transform: translateY(0);
      will-change: auto;
    }

    .reveal-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity, transform;
    }

    .reveal-left.active {
      opacity: 1;
      transform: translateX(0);
      will-change: auto;
    }

    .reveal-right {
      opacity: 0;
      transform: translateX(40px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity, transform;
    }

    .reveal-right.active {
      opacity: 1;
      transform: translateX(0);
      will-change: auto;
    }

    /* Responsive */
    @media (max-width: 768px) {
      h1 { font-size: 2.25rem; }
      h2 { font-size: 1.875rem; }
      
      header {
        padding: 12px 20px;
      }

      /* Reduce aurora intensity on mobile for better performance */
      header.scrolled::before {
        box-shadow: 
          inset 50px 0 70px -30px rgba(64, 0, 255, 0.12),
          inset -50px 0 70px -30px rgba(90, 31, 255, 0.10),
          inset 0 40px 60px -25px rgba(64, 0, 255, 0.08);
        animation: auroraInsetFadeIn 0.6s ease-out 0.2s forwards, auroraInsetGlowLeftMobile 10s ease-in-out infinite;
      }

      header.scrolled::after {
        box-shadow: 
          inset -60px 0 80px -35px rgba(90, 31, 255, 0.11),
          inset 60px 0 80px -35px rgba(64, 0, 255, 0.09),
          inset 0 45px 65px -28px rgba(90, 31, 255, 0.07);
        animation: auroraInsetFadeIn 0.6s ease-out 0.3s forwards, auroraInsetGlowRightMobile 13s ease-in-out infinite;
      }

      header a.logo {
        font-size: 1.125rem;
      }

      header .btn {
        padding: 8px 20px;
        font-size: 0.875rem;
      }

      /* Mobile Hero Aurora adjustments */
      #hero::before {
        height: 150px;
      }

      #hero::after {
        box-shadow: 
          inset 80px 0 110px -45px rgba(64, 0, 255, 0.16),
          inset -70px 0 100px -42px rgba(90, 31, 255, 0.10),
          inset 0 80px 100px -38px rgba(64, 0, 255, 0.14);
        animation: auroraWaveFlowMobile 20s ease-in-out infinite;
      }

      .btn {
        padding: 16px 32px;
        font-size: 1rem;
      }

      .bento {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 60px;
      }

      .bento-item {
        padding: 32px;
      }

      .testimonial {
        padding: 32px 24px;
      }

      p {
        font-size: 1.125rem;
      }
    }



    /* FAQ Accordion */
    .faq-item {
      background: var(--bg-white);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .faq-item:hover {
      border-color: var(--primary);
      box-shadow: 0 4px 16px rgba(64, 0, 255, 0.08);
    }

    .faq-question {
      padding: 24px 32px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: 1.125rem;
      color: var(--text-dark);
      transition: all 0.3s ease;
      user-select: none;
    }

    .faq-question:hover {
      color: var(--primary);
    }

    .faq-question::after {
      content: '+';
      font-size: 1.75rem;
      color: var(--primary);
      transition: transform 0.3s ease;
      font-weight: 300;
      line-height: 1;
    }

    .faq-item.active .faq-question::after {
      transform: rotate(45deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
      padding: 0 32px;
    }

    .faq-item.active .faq-answer {
      max-height: 500px;
      padding: 0 32px 24px;
    }

    .faq-answer p {
      color: var(--text-medium);
      font-size: 1.0625rem;
      line-height: 1.7;
      margin: 0;
      max-width: none;
    }

    /* Partner Logos - Infinite Scroll */
    .partner-scroll-container {
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      overflow: hidden;
      margin-top: 60px;
    }

    .partner-scroll-container::before,
    .partner-scroll-container::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 200px;
      z-index: 10;
      pointer-events: none;
    }

    .partner-scroll-container::before {
      left: 0;
      background: linear-gradient(to right, var(--bg-light), transparent);
    }

    .partner-scroll-container::after {
      right: 0;
      background: linear-gradient(to left, var(--bg-light), transparent);
    }

    .partner-scroll-row {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      /* JS-controlled seamless marquee: disable CSS keyframe animations */
      animation: none !important;
      will-change: transform;
    }

    /* nth-child animations disabled; handled via JS rAF */
    .partner-scroll-row:nth-child(1),
    .partner-scroll-row:nth-child(2),
    .partner-scroll-row:nth-child(3) { animation: none !important; }

    /* Helper for JS marquee track containers */
  .marquee-track { display: flex; gap: inherit; white-space: nowrap; }
  /* Ensure payment logos container allows absolutely-positioned tracks */
  .payment-logos-container .marquee-track img.payment-logo { flex-shrink: 0; }
  .partner-scroll-container .marquee-track .partner-pill { flex-shrink: 0; }

    @keyframes scrollLeft {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    @keyframes scrollRight {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0);
      }
    }

    .partner-pill {
      background: var(--bg-white);
      border: 1.5px solid var(--border);
      border-radius: 50px;
      padding: 16px 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      flex-shrink: 0;
    }

    .partner-pill::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--primary), var(--primary-light));
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    /* Disable hover effects for tech partners */
    .partner-pill:hover {
      border-color: var(--border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      transform: none;
    }

    .partner-pill:hover::before {
      opacity: 0;
    }

    .partner-pill span {
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--text-dark);
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
      letter-spacing: -0.01em;
    }

    .partner-pill:hover span {
      color: var(--text-dark);
    }

    /* Steps section (3-Schritte-Flow) */
    .steps-grid .step-card {
      display: block;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
      transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
      position: relative;
      transform: translateZ(0);
    }
    .steps-grid .step-card:hover { 
      transform: translateY(-12px); 
      box-shadow: 0 30px 60px rgba(0,0,0,0.2); 
    }

    .step-media {
      position: relative;
      width: 100%;
      height: 30rem; /* Reduced height for better visibility */
      border-radius: 32px;
      overflow: hidden;
      background: #f0f0f0;
    }

    .step-media img,
    .step-media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
      display: block;
    }

    /* Video initially hidden, image visible */
    .step-media video { 
      opacity: 0; 
      z-index: 2;
    }
    
    .step-media img {
      opacity: 1;
      z-index: 1;
    }
    
    /* When playing, swap visibility */
    .step-media.playing video { 
      opacity: 1; 
    }
    
    .step-media.playing img { 
      opacity: 0; 
    }

    /* Zoom image slightly on hover for depth */
    .step-card:hover .step-media img { transform: scale(1.1); }

    /* Glass Card Overlay */
    .step-overlay {
      position: absolute;
      bottom: 16px;
      left: 16px;
      right: 16px;
      top: auto;
      min-height: 13rem; /* Ensure consistent height for all cards */
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 24px;
      padding: 32px 24px 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 10;
    }
    
    .step-overlay::before {
      display: none;
    }

    .step-card:hover .step-overlay {
      background: rgba(255, 255, 255, 0.95);
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    }

    .step-overlay h3 { 
      color: var(--text-dark); 
      margin: 12px 0 8px; 
      font-weight: 800; 
      letter-spacing: -0.02em; 
      font-size: 1.375rem; 
    }
    
    .step-overlay p { 
      color: var(--text-medium); 
      opacity: 1; 
      margin: 0; 
      max-width: 100%; 
      font-weight: 500; 
      font-size: 1rem; 
      line-height: 1.5; 
    }

    /* Step number badge */
    .step-badge {
      position: absolute;
      top: -24px;
      left: 50%;
      transform: translateX(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--primary);
      border: 4px solid rgba(255, 255, 255, 0.9);
      color: #fff;
      font-weight: 800;
      font-size: 1.125rem;
      display: grid;
      place-items: center;
      box-shadow: 0 8px 24px rgba(64, 0, 255, 0.3);
      z-index: 11;
      margin: 0;
    }

    @media (max-width: 768px) {
      .step-media { height: 24rem; }
      .step-overlay { 
        padding: 28px 16px 20px; 
        bottom: 12px; 
        left: 12px; 
        right: 12px;
        min-height: 11rem; /* Smaller min-height for mobile */
      }
      .step-overlay h3 { font-size: 1.125rem; }
      .step-overlay p { font-size: 0.875rem; }
      .step-badge { width: 40px; height: 40px; font-size: 1rem; top: -20px; }
    }

    /* Responsive heights to mirror old layout proportions */
    @media (max-width: 1024px) {
      .step-media { height: 28rem; }
    }
    @media (max-width: 768px) {
      .step-media { height: 22rem; }
    }

    .play-hint {
      position: absolute;
      right: 12px;
      bottom: 12px;
      background: rgba(0,0,0,0.6);
      color: #fff;
      font-size: 0.8125rem;
      padding: 6px 10px;
      border-radius: 999px;
      letter-spacing: 0.01em;
      opacity: 0;
      transform: translateY(6px);
      transition: all .25s ease;
      pointer-events: none;
    }

    .step-card:hover .play-hint { opacity: 1; transform: translateY(0); }

    @media (hover: none) {
      .play-hint { display: none; }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .partner-pill {
        padding: 12px 24px;
      }

      .partner-pill span {
        font-size: 0.9375rem;
      }

      .faq-question {
        padding: 20px 24px;
        font-size: 1.0625rem;
      }

      .faq-answer {
        padding: 0 24px;
      }

      .faq-item.active .faq-answer {
        padding: 0 24px 20px;
      }

      /* Stack Bento Grid on mobile only */
      #bentoGrid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
      }

      #bentoGrid .bento-item {
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 200px !important;
      }
    }

    /* Bento Grid Hover Effects */
    #bentoGrid .bento-item {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
    }

    #bentoGrid .bento-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    }

    /* Problem split + accordion */
    .problem-split {
      display: grid;
      grid-template-columns: 1.15fr 1fr; /* accordion slightly wider */
      gap: 64px;
      align-items: start;
    }
    .problem-left { 
      width: 100%; 
      height: 560px; /* fixed height container */
      position: relative;
      padding: 12px; /* space for shadows */
      margin: -12px; /* pull back to original position */
    }
    .problem-right { 
      width: 100%; 
      height: 560px; /* same fixed height as left */
      position: sticky; 
      top: 120px; 
      align-self: start; 
    }

  .ac-list { display: flex; flex-direction: column; gap: 24px; padding: 0; height: 100%; }
    .ac-item { 
      background: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.02),
        0 1px 2px rgba(0, 0, 0, 0.02);
      transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
      position: relative;
    }
    .ac-item::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .ac-item:hover {
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.9);
    }
    .ac-item:hover::before {
      opacity: 1;
    }
    .ac-item.active {
      border-color: rgba(255, 255, 255, 1);
      box-shadow: 
        0 20px 60px rgba(64, 0, 255, 0.08),
        0 0 0 1px rgba(64, 0, 255, 0.05);
      transform: scale(1.02);
      background: rgba(255, 255, 255, 0.95);
      z-index: 1;
    }
    .ac-item.active::before {
      opacity: 1;
    }
  .ac-header { 
    width: 100%; 
    display: grid; 
    grid-template-columns: 48px 1fr; 
    gap: 20px; 
    align-items: center; 
    text-align: left; 
    background: transparent; 
    border: none; 
    padding: 24px 28px; 
    cursor: pointer; 
    position: relative; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  }
  .ac-header::before { 
    content: ""; 
    position: absolute; 
    left: 28px; 
    right: 28px; 
    bottom: 0; 
    height: 2px; 
    border-radius: 2px; 
    background: rgba(64,0,255,0.06); 
    opacity: 0; 
    transition: opacity .3s ease; 
  }
  .ac-header::after { 
    content: ""; 
    position: absolute; 
    left: 28px; 
    bottom: 0; 
    height: 2px; 
    width: 0; 
    border-radius: 2px; 
    background: var(--primary); 
    transition: width 10s linear, opacity .3s ease; 
    will-change: width; 
    opacity: 0; 
    box-shadow: 0 0 10px rgba(64, 0, 255, 0.4);
  }
  .ac-item.active .ac-header::before { opacity: 1; }
  .ac-item.active .ac-header.progress-run::after { width: calc(100% - 56px); opacity: 1; }

    /* Compact style for collapsed accordions */
    .ac-item:not(.active) .ac-header { 
      padding: 16px 24px; 
      grid-template-columns: 40px 1fr; 
      gap: 16px;
      opacity: 0.7;
    }
    .ac-item:not(.active):hover .ac-header {
      opacity: 1;
    }
    .ac-item:not(.active) .ac-icon { 
      width: 40px; 
      height: 40px; 
      background: rgba(64, 0, 255, 0.05);
      box-shadow: none;
    }
    .ac-item:not(.active) .ac-icon svg {
      stroke: var(--text-medium);
    }
    .ac-item:not(.active) .ac-title { 
      font-size: 1.0625rem; 
      font-weight: 500;
      color: var(--text-medium);
    }

    /* After user interaction: hide all progress bars */
    #problemAccordion.no-progress .ac-header::before,
    #problemAccordion.no-progress .ac-header::after {
      opacity: 0 !important;
      width: 0 !important;
      transition: none !important;
    }
    .ac-icon { 
      width: 48px; 
      height: 48px; 
      border-radius: 14px; 
      display: inline-flex; 
      align-items: center; 
      justify-content: center; 
      background: rgba(64, 0, 255, 0.1); 
      color: var(--primary);
      transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .ac-icon svg {
      stroke: var(--primary);
      transition: all 0.4s ease;
    }
    .ac-item.active .ac-icon {
      background: var(--primary);
      box-shadow: 0 8px 20px rgba(64, 0, 255, 0.25);
      transform: scale(1.1);
    }
    .ac-item.active .ac-icon svg {
      stroke: white;
    }
    
    .ac-title { 
      font-size: 1.25rem; 
      font-weight: 700; 
      color: var(--text-dark); 
      letter-spacing: -0.01em;
      line-height: 1.3;
      transition: all 0.3s ease;
    }
    .ac-content { 
      max-height: 0; 
      overflow: hidden; 
      padding: 0 28px; 
      transition: max-height .5s cubic-bezier(0.2, 0.8, 0.2, 1), padding .5s cubic-bezier(0.2, 0.8, 0.2, 1); 
    }
    .ac-content p { 
      color: var(--text-medium); 
      padding: 20px 0 32px 0;
      font-size: 1.0625rem;
      line-height: 1.7;
      margin: 0;
    }
    .ac-item.active .ac-content { max-height: 220px; padding: 0 28px; }

  .preview { 
    border-radius: 24px; 
    background: linear-gradient(135deg, #f5f7fa, #e9eef6); 
    height: 100%; /* fill the 560px container */
    position: relative; 
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255,255,255,0.5);
    border: 1.5px solid rgba(64, 0, 255, 0.08);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
    /* Overlay for cross-fade effect */
    .preview-overlay {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }
    
    .preview-overlay.fade-in {
      opacity: 1;
      /* Ensure overlay only fades opacity, never moves */
      animation: none !important;
      transform: none !important;
    }
  
    .preview::after { 
      content: ""; 
      position: absolute; 
      inset: 0; 
      background: radial-gradient(600px 200px at 20% 20%, rgba(64,0,255,.1), transparent 60%), 
                  radial-gradient(500px 200px at 80% 80%, rgba(64,0,255,.08), transparent 60%); 
      pointer-events: none;
      opacity: 1;
      z-index: 2;
    }
    .preview-pattern { 
      position: absolute; 
      inset: 0; 
      opacity: .2; 
      background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.025) 0, rgba(0,0,0,.025) 2px, transparent 2px, transparent 12px);
      z-index: 3;
    }

  /* Premium gradient variations */
  /* Map images for both the base preview and the overlay to enable true cross-fade */
  .preview.img-1, .preview-overlay.img-1 { background-image: url('img/munzen.jpg'); }
  .preview.img-2, .preview-overlay.img-2 { background-image: url('img/reperaieren.jpg'); }
  .preview.img-3, .preview-overlay.img-3 { background-image: url('img/aufbruch.jpg'); }
  .preview.img-4, .preview-overlay.img-4 { background-image: url('img/zahlen.jpg'); }
  .preview.img-5 { background-image: linear-gradient(135deg, #FFF9E8 0%, #FFEEC8 100%); }

    @media (max-width: 1024px) {
      .problem-split { grid-template-columns: 1fr; height: auto; min-height: 0; }
      .problem-right { position: relative; top: 0; }
      .preview { min-height: 320px; }
    }

  /* Testimonials slider */
  .t-slider { max-width: 1100px; margin: 0 auto; text-align: center; padding: 48px 0 32px; }
    .t-track { position: relative; }
    .t-slide { opacity: 0; transform: translateY(16px); transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: absolute; inset: 0; padding: 0 20px; z-index: 1; }
    .t-slide.active { opacity: 1; transform: translateY(0); position: relative; }
  .t-quote { font-size: clamp(1.25rem, 2.5vw, 1.6rem); line-height: 1.75; color: var(--text-dark); position: relative; padding: 0; font-weight: 400; letter-spacing: -0.01em; }
    .t-quote p { max-width: 880px; margin: 0 auto; }
  .t-quote::before, .t-quote::after { content: '“'; position: absolute; font-size: 6rem; color: var(--primary); opacity: .08; line-height: 1; font-weight: 700; font-family: Georgia, serif; }
    .t-quote::before { content: '“'; left: -12px; top: -32px; }
    .t-quote::after { content: '”'; right: -12px; bottom: -48px; }
  .t-author { margin-top: 32px; color: var(--text-medium); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }

  .t-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 48px; align-items: center; max-width: 560px; margin-left: auto; margin-right: auto; }
    .t-bar { height: 6px; background: rgba(64, 0, 255, 0.08); border-radius: 999px; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .t-bar:hover { transform: scaleY(1.3); }
    .t-bar span { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--primary) 0%, #5a1aff 100%); border-radius: 999px; transition: width 7s linear; box-shadow: 0 0 8px rgba(64, 0, 255, 0.3); }
    .t-bar.active span { width: 100%; }
  /* Previous finished bars become lighter but remain filled */
  .t-bar.done span { width: 100% !important; background: rgba(64, 0, 255, 0.2) !important; box-shadow: none !important; }
  /* When user clicks, lock state: stop animation and keep active full primary, others empty */
  .t-bars.user .t-bar span { transition: none !important; }
  .t-bars.user .t-bar:not(.active) span { width: 0% !important; }

    @media (max-width: 768px) {
      .t-slide { padding: 0 20px; }
      .t-quote::before { left: -4px; top: -24px; font-size: 4.5rem; }
      .t-quote::after { right: -4px; bottom: -36px; font-size: 4.5rem; }
      .t-bars { gap: 8px; margin-top: 36px; }
    }

    /* Disable default hover translate on tilt-enabled cards so tilt is visible */
    .steps-grid .step-card.tilt-enabled:hover { transform: none !important; }
    #kurzloesung .bento-item.tilt-enabled:hover { transform: none !important; }
    #kurzloesung .weather-glass-card.tilt-enabled:hover { transform: none !important; }
    #bentoGrid .bento-item.tilt-enabled:hover { transform: none !important; }
    .bento-item.tilt-enabled:hover { transform: none !important; }
    .premium-payment-card.tilt-enabled:hover { transform: none !important; }

    .coin-value img {
      animation: floatIcon 6s ease-in-out infinite;
    }

    @keyframes floatIcon {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    @property --light-x {
      syntax: '<percentage>';
      inherits: false;
      initial-value: 30%;
    }

    @property --light-y {
      syntax: '<percentage>';
      inherits: false;
      initial-value: 30%;
    }