:root{--navy:#0A1726;--dark-bg:#0A1726;--gold:#BFB36F;--text:#E9EDF3;--muted:#9AA8B5;--header-h:72px;}

header,.site-header,.navbar{z-index:9999;}
.hero,.hero-section,.landing-hero,main{
  padding-top:84px !important;
  padding-top:calc(72px + 12px) !important;
  padding-top:calc(var(--header-h) + 12px) !important;
  padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 12px) !important;
}
.page,.content,.container,.app,.phone-frame,.preview{overflow:visible !important;}
#homeMenuBackdrop,#homeNav.mobile-open,.subpage-menu-overlay{overflow:hidden !important;}
#homeMenuBackdrop{background:#0A1726 !important;}
#homeNav.mobile-open{background:#0A1726 !important;}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;margin:0;padding:0}
html,body{height:100%;width:100%;margin:0;padding:0;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-text-size-adjust:100%}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{display:flex;flex-direction:column;min-height:100vh;background:var(--navy);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
main{flex:1}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:1.2rem}
.container.narrow{max-width:700px}
.row{display:flex;gap:.75rem;align-items:center}.space{justify-content:space-between}
.site-header{border-bottom:1px solid #1b2b3c;background:#0E1C2D;position:sticky;top:0;z-index:1000}
.brand{font-weight:800;letter-spacing:.5px;display:flex;flex-direction:column;line-height:1.2;text-decoration:none!important}
.brand:hover{text-decoration:none}
.brand .brand-title{color:var(--text);font-size:1rem}
.brand .brand-slogan{color:var(--gold);font-size:0.7em;font-weight:400;margin-top:2px}
.brand-name{color:var(--gold);font-weight:700}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav a {
    margin-left: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0.2rem 0;
    color: var(--text);
}

.nav a:hover {
    color: var(--gold) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

.nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s ease;
}

.nav a:hover::after {
    width: 100%;
}
.site-footer{border-top:1px solid #1b2b3c;background:#0E1C2D;margin-top:auto;padding:2rem 0}
.site-footer nav a:hover{color:var(--gold)}
.flash-wrap{margin-top:1rem}.flash{padding:.8rem 1rem;border-radius:8px;margin:.4rem 0}
.flash.success{background:#12351f}.flash.error{background:#3a1a1a}.flash.warning{background:#3a321a}
.hero{padding:4rem 0;position:relative;background-image:url("/static/img/hero-bg.jpg");background-size:cover;background-position:center}
.hero::before{content:"";position:absolute;inset:0;background:rgba(6,14,25,0.55);pointer-events:none;border-radius:inherit;overflow:hidden;z-index:0}
.hero>*{position:relative;z-index:1}
.hero h1,.hero h2,.hero p{text-shadow:0 2px 18px rgba(0,0,0,0.55)}
h1{font-size:2rem;margin:.5rem 0 1rem}h2{color:var(--gold)}
.lead{opacity:.9}
.btn{display:inline-block;background:#12314e;border:1px solid #1f3952;padding:.6rem 1rem;border-radius:10px;color:#E9EDF3}
.btn:hover{background:#1a3e5e;text-decoration:none}
.btn-gold{background:#BFB36F;color:#0A1726;border:1px solid #c9c27f;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
.btn-gold:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 30px rgba(191,179,111,0.5);text-decoration:none}

/* Global Gold Button Hover Animation */
@keyframes goldButtonPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(191,179,111,0.4); }
  50% { box-shadow: 0 6px 35px rgba(191,179,111,0.7); }
}
a[style*="background: var(--gold)"],
a[style*="background:#BFB36F"],
a[style*="background: #BFB36F"],
button[style*="background: var(--gold)"],
button[style*="background:#BFB36F"] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
a[style*="background: var(--gold)"]:hover,
a[style*="background:#BFB36F"]:hover,
a[style*="background: #BFB36F"]:hover,
button[style*="background: var(--gold)"]:hover,
button[style*="background:#BFB36F"]:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 10px 40px rgba(191,179,111,0.6) !important;
}
.btn-back{background:transparent;border:1px solid #2d4158;color:#9AA8B5;padding:.6rem 1rem}
.btn-back:hover{background:rgba(45,65,88,0.3);border-color:#3d5168;color:#E9EDF3;text-decoration:none}
.btn-lg{padding:1rem 2.5rem;font-size:1.1rem;font-weight:600}
.cta-row{display:flex;gap:1rem;margin-top:1.5rem}
.section{margin-top:3rem}
.text-center{text-align:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin:1.5rem 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1rem 0}
.card{background:#12253a;padding:1.5rem;border-radius:12px;border:1px solid #1b3550}
.table-wrap{overflow-x:auto}
table.compare{width:100%;border-collapse:collapse;margin-top:1rem;background:rgba(255,255,255,0.02);border:1px solid #1d2a3a;border-radius:16px;overflow:hidden}
table.compare thead{background:#101c2d}
table.compare th,table.compare td{padding:1rem;text-align:left;border-bottom:1px solid #1b3550;word-wrap:break-word;vertical-align:top;line-height:1.6}
table.compare th{color:var(--gold);font-weight:600}
table.compare td.highlight{color:var(--gold)}
table.compare tbody tr:nth-child(even){background:rgba(255,255,255,0.03)}
.differentiator{margin-top:2.5rem;max-width:850px;margin-left:auto;margin-right:auto;text-align:center}
.differentiator h3{color:var(--gold);font-size:1.3rem;margin-bottom:.75rem}
.differentiator p{line-height:1.7}
.cta-section{padding:3rem 1.2rem}
.roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.5rem}
@media(max-width:768px){.roi-grid{grid-template-columns:1fr}}
.roi-form label{display:block;margin-bottom:.75rem}.roi-form input{width:100%;padding:.6rem .7rem;border-radius:8px;border:1px solid #24384f;background:#0f2135;color:#E9EDF3}
.roi-result{min-height:200px}
.auth{max-width:500px;margin:3rem auto}
.form label{display:block;margin-bottom:1rem}.form input,.form select,.form textarea{width:100%;padding:.7rem .8rem;border-radius:8px;border:1px solid #24384f;background:#0f2135;color:#E9EDF3;margin-top:.3rem}
.form button{margin-top:1rem}
.muted{color:var(--muted)}
.link{color:var(--gold);text-decoration:underline}
.video-wrap{margin:1rem 0;text-align:center}
input[type=range]{width:100%;height:8px;background:#1b3550;border-radius:5px;outline:none;position:relative;z-index:5}
input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:var(--gold);border-radius:50%;cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--gold);border-radius:50%;cursor:pointer;border:none}
.card,.card-xl{position:relative}
.card::before,.card::after,.card-xl::before,.card-xl::after{pointer-events:none!important}
#estOut{margin-top:.5rem;font-weight:600;color:var(--gold)}
.slider-group{margin-bottom:1.5rem}
.slider-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text)}
.slider-row{display:flex;align-items:center;gap:1rem}
.slider-row input[type=range]{flex:1;margin:0}
.slider-row span{min-width:120px;text-align:right;font-weight:600;color:var(--gold);font-size:1.1rem}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:1.5rem 0}
.step-card{background:#12253a;padding:1.5rem;border-radius:12px;border:1px solid #1b3550;position:relative;transition:all 0.3s ease}
.step-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.4)}
.step-number{width:40px;height:40px;background:var(--gold);color:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;margin-bottom:1rem}
.step-card h3{margin-top:0;color:var(--gold)}
.step-card p{margin-bottom:0;line-height:1.6;font-size:0.95rem}
.bonus-card{background:linear-gradient(135deg,#1a3a52,#12253a);padding:1.5rem;border-radius:12px;border:2px solid var(--gold);margin-top:2rem;display:flex;align-items:center;gap:1.5rem;transition:all 0.4s ease}
.bonus-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(191,179,111,0.25)}
.bonus-icon{width:50px;height:50px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;transition:transform 0.4s ease}
.bonus-card:hover .bonus-icon{transform:scale(1.1)}
.bonus-content{flex:1}
.bonus-content p{margin:0;line-height:1.6}
.badge{display:inline-block;padding:.35rem .75rem;border-radius:6px;font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap}
.grid.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:768px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
table{width:100%;border-collapse:collapse;margin-top:1rem;background:rgba(255,255,255,0.02);border:1px solid #1d2a3a;border-radius:12px;overflow:hidden}
table thead{background:#101c2d}
table th,table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid #1b3550}
table th{color:var(--gold);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}
table tbody tr:hover{background:rgba(255,255,255,0.04)}
table tbody tr:nth-child(even){background:rgba(255,255,255,0.02)}
.btn.outline{background:transparent;border:1px solid #2a3f5f}
.btn.outline:hover{background:#1a2f4e}
nav{border-bottom:1px solid #1b2b3c;background:#0E1C2D;padding:1rem 0}
nav .container{display:flex;justify-content:space-between;align-items:center}
nav .logo{font-weight:700;font-size:1.3rem;color:var(--gold)}
nav a{margin-left:1.5rem;color:var(--text)}
nav a:hover{color:var(--gold)}
.chip-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:16px}
.chip{background:#1d2a3a;border:1px solid #2a3f5f;padding:10px 14px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:all 0.2s ease}
.chip:hover{background:#243545;border-color:#3a4f6f}
.chip span{color:var(--text);font-size:0.95rem}
.chip label{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;min-width:0}
.chip select{width:70px;background:#0f2135;border:1px solid #24384f;color:var(--text);padding:4px;border-radius:4px}
.chip button{background:transparent;border:none;color:#8899aa;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:1rem;transition:all 0.2s ease}
.chip button:hover{background:#3a1a1a;color:#ff6b6b}
.color-palette-option{display:flex;flex-direction:column;gap:8px;padding:12px;border:2px solid #1d2a3a;border-radius:8px;cursor:pointer;transition:all 0.2s ease}
.color-palette-option:hover{border-color:#3a4f6f;background:#1a2a3a}
.color-palette-option input[type=radio]{display:none}
.color-palette-option input[type=radio]:checked + .palette-preview{border-color:var(--gold)}
.color-palette-option input[type=radio]:checked ~ .palette-name{color:var(--gold);font-weight:600}
.palette-preview{display:flex;gap:4px;height:40px;border-radius:6px;overflow:hidden;border:2px solid transparent;transition:border-color 0.2s ease}
.palette-preview span{flex:1;display:block}
.palette-name{font-size:0.9rem;color:var(--text);text-align:center;transition:all 0.2s ease}
.cta-box-highlight{padding:2.5rem 2rem;border-radius:12px;margin:3rem auto;max-width:1000px;text-align:center;background:#12253a;border:2px solid var(--gold);transition:transform 0.2s ease}
.cta-box-highlight:hover{transform:translateY(-2px)}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(191,179,111,0.3)}50%{box-shadow:0 0 40px rgba(191,179,111,0.6),0 0 60px rgba(191,179,111,0.3)}}
@keyframes rotate-glow{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes alarm-pulse{0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(255,68,68,1),0 0 80px rgba(255,102,102,0.7)}50%{transform:scale(1.08);box-shadow:0 0 60px rgba(255,68,68,1),0 0 120px rgba(255,102,102,1),0 0 180px rgba(255,68,68,0.5)}}
@keyframes magic-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.magic-border-box{box-shadow:0 0 30px rgba(191,179,111,0.5),0 0 60px rgba(191,179,111,0.3),0 0 90px rgba(255,215,0,0.2)}
@keyframes party-pulse{0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(255,215,0,0.6),0 0 80px rgba(255,105,180,0.4),0 0 120px rgba(138,43,226,0.3)}50%{transform:scale(1.02);box-shadow:0 0 60px rgba(255,215,0,0.8),0 0 120px rgba(255,105,180,0.6),0 0 180px rgba(138,43,226,0.5)}}
@keyframes rainbow-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes confetti-bounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}
@keyframes value-glow{0%,100%{filter:brightness(1) drop-shadow(0 0 20px rgba(255,215,0,0.6))}50%{filter:brightness(1.3) drop-shadow(0 0 40px rgba(255,215,0,1))}}


/* User Menu Dropdown */
.user-menu {
  position: relative;
  margin-left: 0;
}

.user-avatar {
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.user-avatar:hover {
  border-color: var(--gold);
  transform: scale(1.05);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.8rem;
  background: #0E1C2D;
  border: 2px solid #1b3550;
  border-radius: 12px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.user-menu:hover .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s ease;
  margin: 0;
}

.user-dropdown a:hover {
  background: rgba(191, 179, 111, 0.15);
  color: var(--gold);
  text-decoration: none;
}

.user-dropdown a:first-child {
  border-radius: 10px 10px 0 0;
}

.user-dropdown a:last-child {
  border-radius: 0 0 10px 10px;
}

/* Golden CTA Button with Glow Animation */
.cta-glow-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cta-glow-button:hover {
  box-shadow: 0 0 40px rgba(191, 179, 111, 0.5),
              0 0 60px rgba(191, 179, 111, 0.3);
}

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

.cta-glow-button:hover::before {
  width: 300px;
  height: 300px;
}

/* Info Box Glow Effect */
.info-box-glow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.info-box-glow:hover {
  box-shadow: 0 0 30px rgba(191, 179, 111, 0.4),
              0 0 50px rgba(191, 179, 111, 0.2);
  transform: translateY(-2px);
}


/* ==========================================
   GROW Preview Showcase - CSP Compliant
   ========================================== */

/* Preview Showcase */
.preview-showcase {
  background: linear-gradient(135deg, rgba(10,23,38,0.8), rgba(18,37,58,0.8));
  border: 3px solid var(--gold);
  border-radius: 24px;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.preview-showcase::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(191,179,111,0.1) 0%, transparent 70%);
  animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* Automation Flow */
.automation-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1.5rem;
  margin: 3rem auto;
  max-width: 1100px;
  align-items: center;
}

.auto-step {
  background: #12253a;
  border: 2px solid #1b3550;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auto-step:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 12px 40px rgba(191,179,111,0.3);
}

.auto-step[data-step="2"] {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(191,179,111,0.2);
}

.auto-icon {
  margin: 0 auto 1rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auto-icon.processing {
  animation: bounce 2s ease-in-out infinite;
}

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

.rotating-circle {
  animation: rotate 3s linear infinite;
  transform-origin: center;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.auto-step h3 {
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.auto-step p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
}

.auto-arrow {
  color: var(--gold);
  animation: slideRight 1.5s ease-in-out infinite;
}

@keyframes slideRight {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(10px); opacity: 0.6; }
}

/* Preview CTA Box */
.preview-cta-box {
  background: linear-gradient(135deg, rgba(191,179,111,0.1), rgba(191,179,111,0.05));
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

.preview-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--text);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 1rem;
    border: 1.5px solid rgba(33, 199, 149, 0.4);
    border-radius: 12px;
    background: rgba(33, 199, 149, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-item:hover {
    border-color: rgba(33, 199, 149, 0.8);
    background: rgba(33, 199, 149, 0.12);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(33, 199, 149, 0.2);
}

.benefit-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.btn-preview-hero {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--gold);
  color: #0A1726;
  padding: 1.2rem 3rem;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(191,179,111,0.4);
}

.btn-preview-hero:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(191,179,111,0.6);
  background: #d4c589;
}

.preview-arrow {
  transition: transform 0.3s ease;
}

.btn-preview-hero:hover .preview-arrow {
  transform: translateX(5px);
}

@media (max-width: 968px) {
  .automation-flow {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .auto-arrow {
    display: none;
  }
}

/* ==========================================
   Test Card Wobble Animation - CSP Compliant
   ========================================== */
@keyframes wobble-swing {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-8px) rotate(-2deg); }
  30% { transform: translateX(8px) rotate(2deg); }
  45% { transform: translateX(-6px) rotate(-1.5deg); }
  60% { transform: translateX(6px) rotate(1.5deg); }
  75% { transform: translateX(-3px) rotate(-0.5deg); }
  90% { transform: translateX(3px) rotate(0.5deg); }
}

.test-card.swing-animate {
  animation: wobble-swing 1s ease-in-out;
}

/* ==========================================
   GROW Landing Page - CSP Compliant Styles
   ========================================== */

/* GROW Sub-Navigation */
.grow-subnav-link {
  color: var(--text);
  text-decoration: none !important;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s;
  padding: 0.5rem 0;
  position: relative;
}

.grow-subnav-link:hover {
  color: var(--gold);
  text-decoration: none !important;
}

.grow-subnav-link:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}

/* Gold animierter Preview Button */
.grow-preview-cta {
  background: var(--gold) !important;
  color: var(--dark-bg) !important;
  font-weight: 700 !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(191,179,111,0.4);
  transition: all 0.3s ease;
}

.grow-preview-cta:hover {
  background: var(--gold) !important;
  color: var(--dark-bg) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(191,179,111,0.6);
}

.grow-preview-cta:hover::after {
  display: none;
}

@keyframes preview-pulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(191,179,111,0.4);
  }
  50% {
    box-shadow: 0 6px 25px rgba(191,179,111,0.7);
  }
}

.grow-preview-cta {
  animation: preview-pulse 2s ease-in-out infinite;
}

/* Entscheidender Unterschied */
.decisive-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: center;
  padding: 2rem;
}

.decisive-bulb {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bulb-svg {
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease;
}

.decisive-card:hover .bulb-svg {
  transform: scale(1.08);
}

.bulb-glow {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.decisive-card:hover .bulb-glow {
  opacity: 1;
  animation: glowPulse 1.8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

.decisive-content {
  text-align: center;
}

/* Triumph Badge */
.triumph-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(33,199,149,.1);
  color: #E8FFF7;
  border: 1px solid rgba(33,199,149,.5);
  padding: 8px 12px;
  border-radius: 999px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}

.triumph-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent);
  transform: translateX(-120%);
  animation: shine 3.2s linear infinite;
}

@keyframes shine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.sparkle {
  opacity: .85;
  animation: spark 1.8s ease-in-out infinite;
}

@keyframes spark {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(10deg); }
}

/* Pricing Cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  align-items: stretch;
}

.pricing-card {
  background: #12253a;
  border: 2px solid #1b3550;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card.recommended {
  border-color: var(--gold);
  box-shadow: 0 0 40px rgba(191,179,111,0.3);
  transform: scale(1.05);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--gold);
  color: #0A1726;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pricing-card h3 {
  color: var(--gold);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.pricing-card .subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.pricing-price {
  font-size: 3rem;
  font-weight: 900;
  color: var(--text);
  margin: 1rem 0;
}

.pricing-price sup {
  font-size: 1.4rem;
  font-weight: 600;
}

.pricing-period {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.pricing-breakdown {
  background: rgba(27,53,80,0.3);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  text-align: left;
}

.pricing-breakdown p {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-between;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  text-align: left;
}

.pricing-features li {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(36,56,79,0.5);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-features li::before {
  content: "✓";
  color: var(--gold);
  font-weight: 700;
  font-size: 1.2rem;
}

.pricing-card .btn {
  margin-top: auto;
}

/* ==========================================
   SAFE Finance - Slider Controls
   ========================================== */

.slider-group {
  margin-bottom: 1.5rem;
}

.slider-label {
  color: var(--muted);
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slider-input {
  flex: 1;
  height: 8px;
  border-radius: 10px;
  background: rgba(191,179,111,0.2);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 3px solid #0A1726;
  box-shadow: 0 2px 8px rgba(191,179,111,0.4);
  transition: all 0.2s;
}

.slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(191,179,111,0.6);
}

.slider-input::-webkit-slider-thumb:active {
  transform: scale(1.25);
}

.slider-input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 3px solid #0A1726;
  box-shadow: 0 2px 8px rgba(191,179,111,0.4);
  transition: all 0.2s;
}

.slider-input::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(191,179,111,0.6);
}

.slider-input::-moz-range-thumb:active {
  transform: scale(1.25);
}

.slider-value {
  min-width: 160px;
  text-align: right;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold);
}

.slider-unit {
  color: var(--muted);
  font-weight: 400;
  margin-left: 0.25rem;
}

/* ==========================================
   Rocket Button - Durchstarten Animation
   ========================================== */

.rocket-btn:hover .rocket-icon {
  animation: rocketLaunch 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes rocketLaunch {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(50px, -30px) rotate(30deg);
    opacity: 0.7;
  }
  100% {
    transform: translate(120px, -80px) rotate(45deg);
    opacity: 0;
  }
}

/* Reset animation when hover ends */
.rocket-btn .rocket-icon {
  animation: rocketReturn 0.4s ease-in-out;
}

@keyframes rocketReturn {
  from {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}

/* Hero Rocket Float Animation */
@keyframes rocketFloat {
  0%, 100% {
    transform: translateY(0px) rotate(-5deg);
  }
  25% {
    transform: translateY(-12px) rotate(-3deg);
  }
  50% {
    transform: translateY(-20px) rotate(-5deg);
  }
  75% {
    transform: translateY(-12px) rotate(-7deg);
  }
}

.rocket-icon {
  animation: rocketFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 15px rgba(191,179,111,0.4));
}

.rocket-icon:hover {
  animation: rocketFloat 1.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 25px rgba(191,179,111,0.7));
}

/* Lead Icon Animation (same as rocket) */
.lead-icon {
  animation: rocketFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 15px rgba(191,179,111,0.4));
}

.lead-icon:hover {
  animation: rocketFloat 1.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 25px rgba(191,179,111,0.7));
}

/* LEAD Step Card Hover Animations */
.lead-step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 40px rgba(191,179,111,0.5) !important;
  border-color: var(--gold) !important;
  background: rgba(10,23,38,0.9) !important;
}

/* ===== MOBILE RESPONSIVENESS GLOBAL ===== */
@media (max-width: 768px) {
  .container {
    padding: 0.8rem !important;
  }
  
  h1 {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  h2 {
    font-size: 1.3rem !important;
  }
  
  .btn {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.9rem !important;
  }
  
  .btn-lg {
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem !important;
  }
  
  .cta-row {
    flex-direction: column;
    gap: 0.75rem !important;
  }
  
  .hero {
    padding: 2rem 0 !important;
  }
  
  .grid3, .grid2 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .steps-grid {
    grid-template-columns: 1fr !important;
  }
  
  .bonus-card {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
  }
  
  table {
    font-size: 0.85rem !important;
  }
  
  table th, table td {
    padding: 0.6rem 0.75rem !important;
  }
}

.hero-cta-glow:hover {
  box-shadow: 0 4px 20px rgba(191,179,111,0.4), 0 0 30px rgba(191,179,111,0.6) !important;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .container {
    padding: 0.5rem !important;
  }
  
  h1 {
    font-size: 1.2rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .hero {
    padding: 1.5rem 0 !important;
  }
  
  .section {
    margin-top: 1.5rem !important;
  }
}