:root {
--font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Outfit', sans-serif;
}
.modern-card-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.modern-card-wrapper.dark-canvas {
background: #07090e;
border-radius: 20px;
padding: 40px 20px;
} a.premium-card,
.modern-card-wrapper a.premium-card,
.fl-builder-content a.premium-card,
.fl-node a.premium-card,
a.premium-card:hover,
a.premium-card:focus,
a.premium-card:active {
text-decoration: none !important;
color: inherit !important;
outline: none !important;
box-shadow: var(--card-shadow, 0 18px 50px rgba(0, 0, 0, 0.09));
}
.premium-card,
.premium-card * {
text-decoration: none !important;
box-sizing: border-box;
}
.premium-card a {
text-decoration: none !important;
color: inherit !important;
} .premium-card {
--card-radius: 28px;
--card-width: 320px;
--card-padding-v: 34px;
--card-padding-h: 34px;
--card-bg: #ffffff;
--card-shadow: 0 18px 50px rgba(0, 0, 0, 0.09);
--card-text-head: #1a1a1a;
--card-text-body: #666666;
--card-accent: #6d28d9;
--card-hover-text: #ffffff;
--card-lift: -6px;
--trans-duration: 0.6s;
--trans-curve: cubic-bezier(0.16, 1, 0.3, 1);
display: block;
width: 100%;
max-width: var(--card-width, 320px);
background: var(--card-bg, #ffffff);
border-radius: var(--card-radius, 28px);
padding: var(--card-padding-v, 34px) var(--card-padding-h, 34px) 38px;
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow: var(--card-shadow);
cursor: pointer;
user-select: none;
text-decoration: none !important;
transition: transform var(--trans-duration) var(--trans-curve), 
box-shadow var(--trans-duration) var(--trans-curve),
background-color var(--trans-duration) var(--trans-curve);
}
.premium-card:hover {
transform: translateY(var(--card-lift, -6px));
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
} .premium-header,
.card-header-row {
position: relative !important;
z-index: 10 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
margin-bottom: 26px !important;
pointer-events: auto !important;
}
.premium-icon-box {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
border-radius: 16px !important;
background: color-mix(in srgb, var(--card-accent) 12%, var(--card-bg)) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
border: 1.5px solid color-mix(in srgb, var(--card-accent) 30%, transparent) !important;
color: var(--card-accent) !important;
transition: all 0.4s ease !important;
flex-shrink: 0 !important;
}
.premium-icon-box.hidden {
display: none !important;
}
.premium-card:hover .premium-icon-box {
background: color-mix(in srgb, var(--card-accent) 22%, var(--card-bg)) !important;
color: var(--card-accent) !important;
box-shadow: 0 10px 24px color-mix(in srgb, var(--card-accent) 22%, transparent) !important;
border-color: var(--card-accent) !important;
}
.premium-icon-box svg {
width: 24px !important;
height: 24px !important;
color: var(--card-accent) !important;
stroke: var(--card-accent) !important;
transition: transform 0.4s ease !important;
}
.premium-card:hover .premium-icon-box svg {
transform: scale(1.08) !important;
color: var(--card-accent) !important;
stroke: var(--card-accent) !important;
} .premium-badge,
.badge-number {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: fit-content !important;
margin-left: auto !important;
font-family: var(--font-display, 'Outfit', sans-serif) !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
padding: 4px 14px !important;
border-radius: 999px !important;
border: 1.5px solid color-mix(in srgb, var(--card-accent) 35%, transparent) !important;
color: var(--card-accent) !important;
background: color-mix(in srgb, var(--card-accent) 10%, rgba(255, 255, 255, 0.7)) !important;
backdrop-filter: blur(4px) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
line-height: 1.2 !important;
text-decoration: none !important;
box-sizing: border-box !important;
transition: all 0.4s ease !important;
}
.premium-card:hover .premium-badge,
.premium-card:hover .badge-number {
border-color: var(--card-hover-text, #ffffff) !important;
color: var(--card-hover-text, #ffffff) !important;
background: rgba(255, 255, 255, 0.15) !important;
} .premium-content,
.premium-card-content,
.card-body-block {
position: relative !important;
z-index: 10 !important;
pointer-events: auto !important;
}
.premium-label {
font-family: var(--font-display, 'Outfit', sans-serif) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--card-accent) !important;
margin-bottom: 8px !important;
transition: color 0.4s ease !important;
text-decoration: none !important;
display: block !important;
}
.premium-card:hover .premium-label {
color: var(--card-hover-text) !important;
}
.premium-headline {
font-family: var(--font-display, 'Outfit', sans-serif) !important;
font-size: 1.5rem !important;
font-weight: 800 !important;
line-height: 1.25 !important;
color: var(--card-text-head) !important;
letter-spacing: -0.02em !important;
margin-top: 0 !important;
margin-bottom: 16px !important;
transition: color 0.4s ease !important;
text-decoration: none !important;
}
.premium-card:hover .premium-headline {
color: var(--card-hover-text) !important;
} .premium-line,
.premium-accent-line,
.accent-line {
display: block !important;
width: 42px !important;
height: 3.5px !important;
border-radius: 2px !important;
background: var(--card-accent, #6d28d9) !important;
margin: 14px 0 18px 0 !important;
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease !important;
}
.premium-card:hover .premium-line,
.premium-card:hover .premium-accent-line,
.premium-card:hover .accent-line {
width: 76px !important;
background: var(--card-hover-text, #ffffff) !important;
} .premium-text {
font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 0.88rem !important;
line-height: 1.6 !important;
color: var(--card-text-body) !important;
margin: 0 !important;
transition: color 0.4s ease !important;
text-decoration: none !important;
}
.premium-card:hover .premium-text {
color: var(--card-hover-text) !important;
} .premium-footer,
.card-footer-row {
position: relative !important;
z-index: 10 !important;
margin-top: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
pointer-events: auto !important;
}
.premium-dots,
.premium-dots-indicator,
.premium-dots-btn {
display: flex !important;
gap: 5px !important;
align-items: center !important;
text-decoration: none !important;
border: none !important;
background: transparent !important;
}
.premium-dots span,
.premium-dots .dot-dash,
.premium-dots-indicator .dot-dash,
.premium-dots-btn .dot-dash {
display: inline-block !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
background: var(--card-accent) !important;
opacity: 0.55 !important;
transition: all 0.35s ease !important;
}
.premium-dots span:nth-child(2),
.premium-dots .dot-dash:nth-child(2),
.premium-dots-indicator .dot-dash:nth-child(2),
.premium-dots-btn .dot-dash:nth-child(2) {
opacity: 0.8 !important;
}
.premium-dots span:nth-child(3),
.premium-dots .dot-dash:nth-child(3),
.premium-dots-indicator .dot-dash:nth-child(3),
.premium-dots-btn .dot-dash:nth-child(3) {
opacity: 1 !important;
}
.premium-card:hover .premium-dots span,
.premium-card:hover .premium-dots .dot-dash,
.premium-card:hover .premium-dots-indicator .dot-dash,
.premium-card:hover .premium-dots-btn .dot-dash {
background: var(--card-hover-text) !important;
opacity: 1 !important;
box-shadow: 0 0 8px color-mix(in srgb, var(--card-hover-text) 60%, transparent) !important;
}
.premium-card:hover .premium-dots span:nth-child(2),
.premium-card:hover .premium-dots .dot-dash:nth-child(2),
.premium-card:hover .premium-dots-indicator .dot-dash:nth-child(2),
.premium-card:hover .premium-dots-btn .dot-dash:nth-child(2) {
transform: translateY(-2px) !important;
} .fl-builder-content .premium-card .premium-headline,
.premium-card .premium-headline {
font-family: var(--font-display, 'Outfit', sans-serif) !important;
font-size: 1.5rem !important;
font-weight: 800 !important;
line-height: 1.25 !important;
color: var(--card-text-head) !important;
letter-spacing: -0.02em !important;
margin-top: 0 !important;
margin-bottom: 16px !important;
transition: color 0.4s ease !important;
text-decoration: none !important;
}
.fl-builder-content .premium-card:hover .premium-headline,
.premium-card:hover .premium-headline {
color: var(--card-hover-text) !important;
}
.fl-builder-content .premium-card .premium-label,
.premium-card .premium-label {
font-family: var(--font-display, 'Outfit', sans-serif) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--card-accent) !important;
margin-bottom: 8px !important;
transition: color 0.4s ease !important;
text-decoration: none !important;
}
.fl-builder-content .premium-card:hover .premium-label,
.premium-card:hover .premium-label {
color: var(--card-hover-text) !important;
}
.fl-builder-content .premium-card .premium-text,
.premium-card .premium-text {
font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
font-size: 0.88rem !important;
line-height: 1.6 !important;
color: var(--card-text-body) !important;
margin: 0 !important;
transition: color 0.4s ease !important;
text-decoration: none !important;
}
.fl-builder-content .premium-card:hover .premium-text,
.premium-card:hover .premium-text {
color: var(--card-hover-text) !important;
}
.fl-builder-content .premium-card .premium-badge,
.premium-card .premium-badge,
.fl-builder-content .premium-card .badge-number,
.premium-card .badge-number {
font-family: var(--font-display, 'Outfit', sans-serif) !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
padding: 4px 14px !important;
border-radius: 999px !important;
border: 1.5px solid color-mix(in srgb, var(--card-accent) 35%, transparent) !important;
color: var(--card-accent) !important;
background: color-mix(in srgb, var(--card-accent) 10%, rgba(255, 255, 255, 0.7)) !important;
backdrop-filter: blur(4px) !important;
transition: all 0.4s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: fit-content !important;
margin-left: auto !important;
text-decoration: none !important;
}
.fl-builder-content .premium-card:hover .premium-badge,
.premium-card:hover .premium-badge,
.fl-builder-content .premium-card:hover .badge-number,
.premium-card:hover .badge-number {
border-color: var(--card-hover-text) !important;
color: var(--card-hover-text) !important;
background: rgba(255, 255, 255, 0.15) !important;
}.card-effect-1 {
--wave-scale: 8.5;
--wave-expand-speed: 0.95s;
--wave-retreat-speed: 0.95s;
--wave-color: #6d28d9;
--wave-color-2: #8b5cf6;
--wave-opacity-2: 0.5;
}
.card-effect-1 .premium-liquid-container {
position: absolute;
width: 170px;
height: 170px;
pointer-events: none;
z-index: 2;
transition: transform var(--wave-retreat-speed, 0.95s) cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-effect-1:hover .premium-liquid-container {
transition: transform var(--wave-expand-speed, 0.95s) cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-effect-1 .premium-liquid-svg {
width: 100%;
height: 100%;
display: block;
}
.card-effect-1 .wave-corner { display: block; }
.card-effect-1 .wave-center { display: none; }
.card-effect-1 .wave-layer-bg {
fill: var(--wave-color-2);
opacity: var(--wave-opacity-2);
transition: fill 0.3s ease, opacity 0.3s ease;
}
.card-effect-1 .wave-layer-main {
fill: var(--wave-color);
transition: fill 0.3s ease;
} .card-effect-1[data-direction="top-right"] .premium-liquid-container,
.card-effect-1:not([data-direction]) .premium-liquid-container {
top: -10px; right: -10px; left: auto; bottom: auto;
transform-origin: top right; transform: scale(1);
}
.card-effect-1[data-direction="top-right"] .wave-corner,
.card-effect-1:not([data-direction]) .wave-corner { transform: none; }
.card-effect-1[data-direction="top-right"]:hover .premium-liquid-container,
.card-effect-1:not([data-direction]):hover .premium-liquid-container { transform: scale(var(--wave-scale)); } .card-effect-1[data-direction="top-left"] .premium-liquid-container {
top: -10px; left: -10px; right: auto; bottom: auto;
transform-origin: top left; transform: scale(1);
}
.card-effect-1[data-direction="top-left"] .wave-corner { transform: scaleX(-1); transform-origin: 50% 50%; }
.card-effect-1[data-direction="top-left"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); } .card-effect-1[data-direction="bottom-right"] .premium-liquid-container {
bottom: -10px; right: -10px; top: auto; left: auto;
transform-origin: bottom right; transform: scale(1);
}
.card-effect-1[data-direction="bottom-right"] .wave-corner { transform: scaleY(-1); transform-origin: 50% 50%; }
.card-effect-1[data-direction="bottom-right"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); } .card-effect-1[data-direction="bottom-left"] .premium-liquid-container {
bottom: -10px; left: -10px; top: auto; right: auto;
transform-origin: bottom left; transform: scale(1);
}
.card-effect-1[data-direction="bottom-left"] .wave-corner { transform: scale(-1); transform-origin: 50% 50%; }
.card-effect-1[data-direction="bottom-left"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); } .card-effect-1[data-direction="top-center"] .premium-liquid-container {
top: -6px; left: -20%; right: auto; bottom: auto;
width: 140%; height: 160px; margin-left: 0;
transform-origin: top center; transform: scale(1);
}
.card-effect-1[data-direction="top-center"] .wave-corner { display: none; }
.card-effect-1[data-direction="top-center"] .wave-center { display: block; transform: none; width: 100%; height: 100%; }
.card-effect-1[data-direction="top-center"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); } .card-effect-1[data-direction="bottom-center"] .premium-liquid-container {
bottom: -6px; left: -20%; top: auto; right: auto;
width: 140%; height: 160px; margin-left: 0;
transform-origin: bottom center; transform: scale(1);
}
.card-effect-1[data-direction="bottom-center"] .wave-corner { display: none; }
.card-effect-1[data-direction="bottom-center"] .wave-center { display: block; transform: scaleY(-1); transform-origin: 50% 50%; width: 100%; height: 100%; }
.card-effect-1[data-direction="bottom-center"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); } .card-effect-2 {
--mesh-color-1: #ec4899;
--mesh-color-2: #8b5cf6;
--mesh-color-3: #06b6d4;
--mesh-blur: 42px;
--mesh-scale: 2.3;
--mesh-speed: 0.9s;
}
.card-effect-2 .aurora-mesh {
position: absolute;
inset: -40px;
background: radial-gradient(circle at 80% 20%, var(--mesh-color-1) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, var(--mesh-color-2) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, var(--mesh-color-3) 0%, transparent 60%);
filter: blur(var(--mesh-blur));
opacity: 0;
transform: scale(0.6) rotate(0deg);
transition: opacity 0.5s ease, transform var(--mesh-speed) cubic-bezier(0.2, 0.9, 0.3, 1);
pointer-events: none;
z-index: 2;
}
.card-effect-2:hover .aurora-mesh {
opacity: 1;
transform: scale(var(--mesh-scale)) rotate(45deg);
} .card-effect-3 {
--ripple-color: #0284c7;
--ripple-speed: 1.2s;
--ripple-scale: 4.5;
}
.card-effect-3 .ripple-emitter {
position: absolute;
top: 25%;
right: 20%;
width: 100px;
height: 100px;
transform: translate(50%, -50%);
pointer-events: none;
z-index: 2;
}
.card-effect-3 .ripple-circle {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle, var(--ripple-color) 0%, rgba(2, 132, 199, 0.25) 55%, transparent 75%);
border: 1.5px solid var(--ripple-color);
transform: scale(0.3);
opacity: 0;
transition: transform var(--ripple-speed) cubic-bezier(0.1, 0.8, 0.2, 1), opacity var(--ripple-speed) ease;
}
.card-effect-3 .ripple-circle:nth-child(1) { transition-delay: 0s; }
.card-effect-3 .ripple-circle:nth-child(2) { border-color: rgba(56, 189, 248, 0.7); background: rgba(2, 132, 199, 0.3); transition-delay: 0.12s; }
.card-effect-3 .ripple-circle:nth-child(3) { border-color: rgba(56, 189, 248, 0.45); background: rgba(14, 165, 233, 0.18); transition-delay: 0.24s; }
.card-effect-3:hover .ripple-circle { transform: scale(var(--ripple-scale)); opacity: 1; } .card-effect-4 {
--blob-color: #576238;
--blob-speed: 1.2s;
--blob-scale: 4.2;
}
.card-effect-4 .metaball-container {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 2;
}
.card-effect-4 .liquid-blob {
position: absolute;
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
background: var(--blob-color);
transition: all var(--blob-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card-effect-4 .liquid-blob.b1 {
top: -60px;
right: -60px;
width: 130px;
height: 130px;
opacity: 0.75;
}
.card-effect-4 .liquid-blob.b2 {
bottom: -60px;
left: -60px;
width: 110px;
height: 110px;
opacity: 0.6;
}
.card-effect-4:hover .liquid-blob.b1 {
transform: scale(var(--blob-scale, 4.2)) rotate(80deg);
opacity: 1;
}
.card-effect-4:hover .liquid-blob.b2 {
transform: scale(calc(var(--blob-scale, 4.2) * 0.85)) rotate(-60deg);
opacity: 0.95;
}
.card-effect-4:hover .premium-icon-box {
background: color-mix(in srgb, var(--card-hover-text) 12%, transparent);
border-color: var(--card-hover-text);
}
.card-effect-4:hover .premium-icon-box svg {
color: var(--card-hover-text) !important;
stroke: var(--card-hover-text) !important;
} .card-effect-5 {
--smoke-color: #c99fcd;
--smoke-speed: 1s;
--smoke-opacity: 0.85;
}
.card-effect-5 .smoke-cloud {
position: absolute;
inset: -50%;
background: radial-gradient(ellipse at center, var(--smoke-color) 0%, rgba(201, 159, 205, 0.35) 45%, transparent 70%);
filter: blur(48px);
opacity: 0;
transform: scale(0.4) rotate(-25deg);
transition: all var(--smoke-speed) cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 2;
}
.card-effect-5:hover .smoke-cloud {
opacity: var(--smoke-opacity);
transform: scale(2.2) rotate(15deg);
} .card-effect-6 {
--magma-1: #ff5722;
--magma-2: #ff9800;
--magma-speed: 0.8s;
--magma-glow: 0.9;
}
.card-effect-6 .magma-flood {
position: absolute;
bottom: -40px;
left: -20px;
right: -20px;
height: 120%;
background: linear-gradient(0deg, var(--magma-1) 0%, var(--magma-2) 65%, transparent 100%);
filter: blur(28px);
opacity: 0;
transform: translateY(60%);
transition: transform var(--magma-speed) cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
pointer-events: none;
z-index: 2;
}
.card-effect-6:hover .magma-flood {
opacity: var(--magma-glow);
transform: translateY(0%);
}  .card-effect-7 {
--tilt-depth: 30px;
--glare-opacity: 0.55;
--prism-gradient: linear-gradient(135deg, rgba(255,0,80,0) 0%, rgba(255,0,80,0.8) 12%, rgba(255,120,0,0.85) 24%, rgba(255,225,0,0.9) 36%, rgba(255,255,255,0.95) 50%, rgba(0,230,130,0.85) 60%, rgba(0,180,255,0.88) 72%, rgba(160,50,255,0.85) 86%, rgba(160,50,255,0) 100%);
transform-style: preserve-3d;
transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}
.card-effect-7 .holo-glare {
position: absolute;
inset: -30%;
border-radius: var(--card-radius);
background: var(--prism-gradient);
-webkit-mask-image: linear-gradient(
135deg,
transparent 15%,
rgba(0, 0, 0, 0.25) 30%,
rgba(0, 0, 0, 0.9) 45%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.95) 55%,
rgba(0, 0, 0, 0.3) 62%,
transparent 75%
);
mask-image: linear-gradient(
135deg,
transparent 15%,
rgba(0, 0, 0, 0.25) 30%,
rgba(0, 0, 0, 0.9) 45%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.95) 55%,
rgba(0, 0, 0, 0.3) 62%,
transparent 75%
);
opacity: 0;
mix-blend-mode: screen;
pointer-events: none;
z-index: 6;
transition: opacity 0.35s ease;
transform: translate(calc((var(--glare-x, 50%) - 50%) * 0.6), calc((var(--glare-y, 50%) - 50%) * 0.6)) rotate(calc((var(--glare-x, 50%) - 50%) * 0.2deg));
}
.card-effect-7:hover .holo-glare { opacity: var(--glare-opacity, 0.55); }
.card-effect-7 .premium-header,
.card-effect-7 .premium-content,
.card-effect-7 .premium-footer {
transform: translateZ(var(--tilt-depth, 30px));
transition: transform 0.2s ease;
} .card-effect-8 {
--border-beam-color: #38bdf8;
--spot-color: color-mix(in srgb, var(--border-beam-color, #38bdf8) 32%, transparent);
--spot-size: 260px;
--mouse-x: 50%;
--mouse-y: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-effect-8 .spotlight-glow {
position: absolute;
inset: 0;
background: radial-gradient(var(--spot-size) circle at var(--mouse-x) var(--mouse-y), var(--spot-color), transparent 80%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 2;
}
.card-effect-8 .border-beam {
position: absolute;
inset: -1px;
border-radius: var(--card-radius);
padding: 1.5px;
background: radial-gradient(180px circle at var(--mouse-x) var(--mouse-y), var(--border-beam-color), transparent 80%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 3;
}
.card-effect-8:hover .spotlight-glow,
.card-effect-8:hover .border-beam { opacity: 1; } .card-effect-9 {
--jelly-scale: 1.04;
--float-lift: -16px;
--spring-speed: 0.52s;
--card-accent: #405538;
transition: transform var(--spring-speed) cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--spring-speed) ease;
}
.card-effect-9:hover {
transform: translateY(var(--float-lift, -16px)) scale(var(--jelly-scale, 1.04));
box-shadow: 0 24px 55px rgba(64, 85, 56, 0.22), 0 10px 20px rgba(0, 0, 0, 0.06);
}
.card-effect-9 .premium-icon-box {
transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.card-effect-9:hover .premium-icon-box {
transform: translateY(-8px) scale(1.15) rotate(6deg);
background: #fef3c7;
color: #405538;
border-color: #fde68a;
}
.card-effect-9 .jelly-accent-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(254, 243, 199, 0.45), rgba(253, 230, 138, 0.28));
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
pointer-events: none;
}
.card-effect-9:hover .jelly-accent-bg {
opacity: 1;
} .card-effect-10 {
--grid-color: #c89947;
--grid-height: 180px;
--grid-size: 24px;
}
.card-effect-10 .cyber-grid {
position: absolute;
bottom: -40px;
left: -20%;
width: 140%;
height: var(--grid-height, 180px);
background-image: linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: var(--grid-size, 24px) var(--grid-size, 24px);
transform: perspective(250px) rotateX(65deg);
opacity: 0.15;
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 2;
pointer-events: none;
}
.card-effect-10:hover .cyber-grid {
opacity: 0.7;
transform: perspective(250px) rotateX(55deg) translateY(-15px);
filter: drop-shadow(0 0 10px var(--grid-color));
} .card-effect-11 {
--halo-color: #e1c68f;
--halo-size: 160px;
--halo-opacity: 0.8;
}
.card-effect-11 .eclipse-halo {
position: absolute;
top: 30%;
left: 50%;
width: var(--halo-size);
height: var(--halo-size);
transform: translate(-50%, -50%) scale(0.2);
border-radius: 50%;
box-shadow: 0 0 50px var(--halo-color), inset 0 0 40px var(--halo-color);
opacity: 0;
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1;
pointer-events: none;
}
.card-effect-11:hover .eclipse-halo {
opacity: var(--halo-opacity, 0.8);
transform: translate(-50%, -50%) scale(2.2);
} .card-effect-12 {
--origami-color: #2563eb;
--origami-speed: 0.65s;
--origami-cut: 35%;
}
.card-effect-12 .origami-slice {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--origami-color);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transition: clip-path var(--origami-speed) cubic-bezier(0.2, 0.9, 0.2, 1);
z-index: 2;
pointer-events: none;
}
.card-effect-12:hover .origami-slice {
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--origami-cut, 35%) 100%);
} .card-effect-13 {
--spring-depth: 25px;
--tilt-depth: 25px;
--magnetic-aura: #38bdf8;
transform-style: preserve-3d;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.card-effect-13:hover {
box-shadow: 0 26px 65px rgba(0, 0, 0, 0.4), 0 0 28px color-mix(in srgb, var(--magnetic-aura) 30%, transparent);
}
.card-effect-13 .magnetic-lens-flare {
position: absolute;
inset: -20%;
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), color-mix(in srgb, var(--magnetic-aura) 32%, transparent) 0%, transparent 60%);
opacity: 0;
mix-blend-mode: screen;
pointer-events: none;
z-index: 2;
transition: opacity 0.3s ease;
}
.card-effect-13:hover .magnetic-lens-flare {
opacity: 1;
}
.card-effect-13 .premium-header,
.card-effect-13 .premium-content,
.card-effect-13 .premium-footer {
transform: translateZ(var(--tilt-depth));
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-effect-13 .premium-icon-box {
transform: translateZ(calc(var(--tilt-depth) + 12px));
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-effect-13:hover .premium-icon-box {
transform: translateZ(calc(var(--tilt-depth) + 18px)) scale(1.08);
} .card-effect-14 {
--laser-speed: 2.5s;
--laser-glow-opacity: 0.85;
--laser-color: #06b6d4;
position: relative;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.card-effect-14:hover {
transform: translateY(-8px) scale(1.015);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 30px color-mix(in srgb, var(--laser-color) 25%, transparent);
} .card-effect-14 .laser-track-border {
position: absolute;
inset: -2px;
border-radius: calc(var(--card-radius) + 2px);
background: conic-gradient(from 0deg, var(--laser-color), transparent 30%, transparent 70%, var(--laser-color));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
opacity: 0.35;
transition: opacity 0.4s ease;
animation: laserSweepAnim var(--laser-speed, 2.5s) linear infinite;
z-index: 3;
pointer-events: none;
}
.card-effect-14:hover .laser-track-border {
opacity: var(--laser-glow-opacity, 0.85);
filter: drop-shadow(0 0 8px var(--laser-color));
} .card-effect-14 .laser-horizon-flare {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--laser-color), #ffffff, var(--laser-color), transparent);
box-shadow: 0 0 16px var(--laser-color), 0 0 30px var(--laser-color);
opacity: 0;
transform: scaleX(0.4);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 4;
pointer-events: none;
}
.card-effect-14:hover .laser-horizon-flare {
opacity: 1;
transform: scaleX(1);
} .card-effect-14 .laser-ambient-aura {
position: absolute;
top: -30%;
left: 50%;
transform: translateX(-50%);
width: 140%;
height: 65%;
background: radial-gradient(ellipse at top center, color-mix(in srgb, var(--laser-color) 25%, transparent) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 2;
pointer-events: none;
}
.card-effect-14:hover .laser-ambient-aura {
opacity: 1;
}
@keyframes laserSweepAnim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}  .card-effect-15 {
--neon-1: #e59a26;
--neon-2: #38bdf8;
--laser-speed: 3s;
--plasma-glow: 24px;
position: relative;
}
.card-effect-15 .laser-border {
position: absolute;
inset: -2px;
border-radius: calc(var(--card-radius) + 2px);
background: conic-gradient(from 0deg, var(--neon-1), var(--neon-2), transparent 45%, var(--neon-1));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
opacity: 0.3;
animation: laserRotate var(--laser-speed) linear infinite;
z-index: 3;
}
.card-effect-15 .plasma-core {
position: absolute;
bottom: -60px;
right: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, var(--neon-1) 0%, var(--neon-2) 60%, transparent 80%);
filter: blur(var(--plasma-glow));
opacity: 0;
transform: scale(0.5);
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1;
pointer-events: none;
}
.card-effect-15:hover .laser-border { opacity: 1; filter: drop-shadow(0 0 8px var(--neon-1)); }
.card-effect-15:hover .plasma-core { opacity: 0.75; transform: scale(2.6); }
@keyframes laserRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .card-effect-16 {
--particle-color: #d49a55;
}
.card-effect-16 .particle-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
opacity: 0.25;
transition: opacity 0.5s ease;
}
.card-effect-16:hover .particle-canvas { opacity: 1; }
.card-effect-16 .particle-glow-orb {
position: absolute;
top: -30px;
right: -30px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle, var(--particle-color) 0%, transparent 70%);
filter: blur(28px);
opacity: 0.3;
transition: all 0.6s ease;
z-index: 1;
}
.card-effect-16:hover .particle-glow-orb { opacity: 0.8; transform: scale(2); } .card-effect-17 {
--glitch-color: #cf8852;
--scan-speed: 1.4s;
--scan-opacity: 0.85;
}
.card-effect-17 .scanline-beam {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 25%;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--glitch-color) 40%, transparent), transparent);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 3;
pointer-events: none;
}
.card-effect-17:hover .scanline-beam {
opacity: var(--scan-opacity, 0.85);
animation: scanAnim var(--scan-speed, 1.4s) linear infinite;
}
@keyframes scanAnim {
0% { top: -25%; }
100% { top: 110%; }
} .card-effect-18 {
--wave-bar-color: #f43f5e;
--wave-pulse-speed: 0.6s;
--wave-max-height: 55px;
}
.card-effect-18 .soundwave-bars {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70px;
display: flex;
align-items: flex-end;
justify-content: space-around;
padding: 0 20px 10px;
gap: 5px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 2;
pointer-events: none;
}
.card-effect-18 .wave-bar {
flex: 1;
background: var(--wave-bar-color);
border-radius: 4px;
height: 10px;
transition: height 0.2s ease;
}
.card-effect-18:hover .soundwave-bars { opacity: 0.45; }
.card-effect-18:hover .wave-bar:nth-child(odd) { animation: wavePulse var(--wave-pulse-speed, 0.6s) ease-in-out infinite alternate; }
.card-effect-18:hover .wave-bar:nth-child(even) { animation: wavePulse var(--wave-pulse-speed, 0.6s) ease-in-out 0.3s infinite alternate; }
@keyframes wavePulse { 0% { height: 8px; } 100% { height: var(--wave-max-height, 55px); } }  .card-effect-19 {
--glass-blur: 24px;
--glass-bg: rgba(255, 255, 255, 0.5);
--glass-border: rgba(255, 255, 255, 0.6);
--specular-speed: 0.75s;
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
}
.card-effect-19 .specular-beam {
position: absolute;
top: -60%;
left: -60%;
width: 220%;
height: 220%;
background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.7) 50%, transparent 60%);
transform: rotate(25deg) translateY(-100%);
transition: transform var(--specular-speed, 0.75s) cubic-bezier(0.2, 0.9, 0.3, 1);
pointer-events: none;
z-index: 2;
}
.card-effect-19:hover .specular-beam {
transform: rotate(25deg) translateY(100%);
} .card-effect-20 {
--silk-color: #7c1f31;
--silk-speed: 0.7s;
--silk-radius: 150%;
}
.card-effect-20 .silk-curtain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--silk-color);
clip-path: circle(0% at 0% 0%);
transition: clip-path var(--silk-speed) cubic-bezier(0.22, 1, 0.36, 1);
z-index: 2;
pointer-events: none;
}
.card-effect-20:hover .silk-curtain {
clip-path: circle(var(--silk-radius, 150%) at 0% 0%);
} .card-effect-21 {
--prism-gradient: linear-gradient(135deg, rgba(255,0,80,0) 0%, rgba(255,0,80,0.8) 12%, rgba(255,120,0,0.85) 24%, rgba(255,225,0,0.9) 36%, rgba(255,255,255,0.95) 50%, rgba(0,230,130,0.85) 60%, rgba(0,180,255,0.88) 72%, rgba(160,50,255,0.85) 86%, rgba(160,50,255,0) 100%);
--prism-speed: 0.85s;
--prism-intensity: 0.85;
}
.card-effect-21 .prism-layer {
position: absolute;
inset: 0;
border-radius: var(--card-radius);
background: var(--prism-gradient);
background-size: 250% 250%;
background-position: 0% 0%;
opacity: 0;
mix-blend-mode: color-dodge;
transition: opacity 0.35s ease, background-position var(--prism-speed, 0.85s) ease;
pointer-events: none;
z-index: 3;
}
.card-effect-21:hover .prism-layer {
opacity: var(--prism-intensity, 0.85);
background-position: 100% 100%;
} .card-effect-22 {
--brutal-offset: 12px;
--brutal-deg: -1deg;
--brutal-shadow: #0f172a;
box-shadow: var(--brutal-offset) var(--brutal-offset) 0px var(--brutal-shadow);
border: 2px solid var(--brutal-shadow);
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-effect-22:hover {
transform: translate(calc(var(--brutal-offset) * -0.5), calc(var(--brutal-offset) * -0.5)) rotate(var(--brutal-deg));
box-shadow: calc(var(--brutal-offset) * 1.5) calc(var(--brutal-offset) * 1.5) 0px var(--brutal-shadow);
}.modern-button-wrapper {
display: flex;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.modern-button-wrapper.align-left { justify-content: flex-start; }
.modern-button-wrapper.align-center { justify-content: center; }
.modern-button-wrapper.align-right { justify-content: flex-end; }
.modern-button-wrapper.align-justify .premium-btn { width: 100%; }
.premium-btn {
position: relative;
overflow: hidden;
isolation: isolate;
border: var(--btn-border-width, 0px) solid var(--btn-border-color, transparent);
border-radius: calc(var(--btn-radius, 14px) + var(--btn-border-width, 0px));
background: var(--btn-bg, #1e293b);
color: var(--btn-text, #ffffff);
font-family: var(--font-display, 'Outfit', sans-serif);
font-size: var(--btn-font-size, 0.95rem);
font-weight: 600;
letter-spacing: 0.01em;
padding: var(--btn-padding-y, 14px) var(--btn-padding-x, 28px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
user-select: none;
white-space: nowrap;
text-decoration: none !important;
outline: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
box-shadow 0.3s ease, 
color 0.3s ease, 
background-color 0.3s ease, 
border-color 0.3s ease;
}
.fl-builder-content .premium-btn,
.premium-btn {
color: var(--btn-text, #ffffff) !important;
text-decoration: none !important;
}
.fl-builder-content .premium-btn:hover,
.premium-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
color: var(--btn-hover-text, #ffffff) !important;
text-decoration: none !important;
}
.premium-btn:active {
transform: translateY(1px) scale(0.98);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.premium-btn .btn-text-wrap {
position: relative !important;
z-index: 10 !important;
display: flex;
align-items: center;
gap: 9px;
pointer-events: none !important;
transition: color 0.3s ease;
}
.premium-btn .btn-icon-svg {
width: 19px;
height: 19px;
stroke-width: 2.2;
flex-shrink: 0;
transition: transform 0.3s ease, stroke 0.3s ease;
}
.premium-btn:hover .btn-icon-svg {
transform: scale(1.1);
}
.btn-icon-svg.hidden {
display: none !important;
}.btn-effect-1 {
--wave-color: #6366f1;
--wave-color-2: #818cf8;
--wave-speed: 0.75s;
--wave-scale: 7.5;
}
.btn-effect-1 .btn-liquid-container {
position: absolute;
bottom: -18px;
left: 50%;
width: 140px;
height: 70px;
margin-left: -70px;
pointer-events: none;
z-index: 2;
transform-origin: bottom center;
transform: scale(0.15) translateY(50px);
transition: transform var(--wave-speed) cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-effect-1 .btn-liquid-svg {
width: 100%;
height: 100%;
display: block;
}
.btn-effect-1 .wave-layer-bg {
fill: var(--wave-color-2);
opacity: 0.55;
}
.btn-effect-1 .wave-layer-main {
fill: var(--wave-color);
}
.btn-effect-1:hover .btn-liquid-container {
transform: scale(var(--wave-scale)) translateY(0);
} .btn-effect-2 {
--silk-color: #e11d48;
--silk-speed: 0.65s;
}
.btn-effect-2 .silk-fill-layer {
position: absolute;
inset: 0;
background: var(--silk-color);
clip-path: circle(0% at 100% 0%);
transition: clip-path var(--silk-speed) cubic-bezier(0.2, 1, 0.3, 1);
z-index: 2;
pointer-events: none;
}
.btn-effect-2[data-direction="bottom-left"] .silk-fill-layer { clip-path: circle(0% at 0% 100%); }
.btn-effect-2[data-direction="top-left"] .silk-fill-layer { clip-path: circle(0% at 0% 0%); }
.btn-effect-2:hover .silk-fill-layer { clip-path: circle(150% at 100% 0%); }
.btn-effect-2[data-direction="bottom-left"]:hover .silk-fill-layer { clip-path: circle(150% at 0% 100%); }
.btn-effect-2[data-direction="top-left"]:hover .silk-fill-layer { clip-path: circle(150% at 0% 0%); } .btn-effect-3 {
--ripple-color: #38bdf8;
--ripple-speed: 0.9s;
--ripple-scale: 4.5;
}
.btn-effect-3 .sonar-emitter {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 2;
}
.btn-effect-3 .sonar-circle {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--ripple-color);
background: radial-gradient(circle, var(--ripple-color) 0%, transparent 70%);
transform: scale(0.2);
opacity: 0;
transition: transform var(--ripple-speed) cubic-bezier(0.1, 0.8, 0.2, 1), opacity var(--ripple-speed) ease;
}
.btn-effect-3 .sonar-circle:nth-child(1) { transition-delay: 0s; }
.btn-effect-3 .sonar-circle:nth-child(2) { border-color: rgba(56, 189, 248, 0.7); transition-delay: 0.12s; }
.btn-effect-3 .sonar-circle:nth-child(3) { border-color: rgba(56, 189, 248, 0.4); transition-delay: 0.24s; }
.btn-effect-3:hover .sonar-circle {
transform: scale(var(--ripple-scale));
opacity: 0.85;
} .btn-effect-4 {
--blob-color: #F2A882;
--blob-speed: 0.85s;
--blob-dist: 32px;
}
.btn-effect-4 .metaball-wrap,
.btn-effect-4 .btn-metaball-filter {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 2;
}
.btn-effect-4 .btn-blob,
.btn-effect-4 .blob-center,
.btn-effect-4 .blob-drop {
position: absolute;
border-radius: 50%;
background: var(--blob-color, #F2A882);
transition: all var(--blob-speed, 0.85s) cubic-bezier(0.2, 0.9, 0.3, 1);
opacity: 0;
transform: scale(0.2);
}
.btn-effect-4 .blob-center {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
}
.btn-effect-4 .btn-blob.b1,
.btn-effect-4 .blob-drop.blob-1 {
bottom: -25px;
left: -20px;
width: 110px;
height: 110px;
}
.btn-effect-4 .btn-blob.b2,
.btn-effect-4 .blob-drop.blob-2 {
top: -20px;
right: -20px;
width: 100px;
height: 100px;
transition-delay: 0.06s;
}
.btn-effect-4:hover .btn-blob,
.btn-effect-4:hover .blob-center,
.btn-effect-4:hover .blob-drop {
opacity: 1;
transform: scale(2.2);
}  .btn-effect-5 {
--jelly-lift: -6px;
--jelly-speed: 0.45s;
--jelly-color: #E59A26;
transition: transform var(--jelly-speed) cubic-bezier(0.34, 1.56, 0.64, 1), 
box-shadow var(--jelly-speed) ease;
}
.btn-effect-5:hover {
transform: translateY(var(--jelly-lift)) scale(1.05);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}
.btn-effect-5:active {
transform: translateY(1px) scale(0.96);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-effect-5 .jelly-glow-layer {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--jelly-color, #E59A26) 35%, transparent) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
z-index: 1;
}
.btn-effect-5:hover .jelly-glow-layer {
opacity: 1;
} .fl-builder-content .premium-btn.btn-effect-6,
.premium-btn.btn-effect-6 {
--brutal-shadow: #1E3354;
--brutal-offset: 5px;
box-shadow: var(--brutal-offset) var(--brutal-offset) 0px var(--brutal-shadow) !important;
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.fl-builder-content .premium-btn.btn-effect-6:hover,
.premium-btn.btn-effect-6:hover {
transform: translate(-3px, -3px) !important;
box-shadow: calc(var(--brutal-offset) + 4px) calc(var(--brutal-offset) + 4px) 0px var(--brutal-shadow) !important;
}
.fl-builder-content .premium-btn.btn-effect-6:active,
.premium-btn.btn-effect-6:active {
transform: translate(2px, 2px) !important;
box-shadow: 2px 2px 0px var(--brutal-shadow) !important;
} .btn-effect-7 {
--tilt-depth: 18px;
transform-style: preserve-3d;
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}
.btn-effect-7:hover {
transform: translateY(-8px) scale(1.04);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 0 24px var(--btn-accent, rgba(99, 102, 241, 0.3));
}
.btn-effect-7 .magnetic-glare,
.btn-effect-7 .btn-magnetic-glare {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
z-index: 2;
}
.btn-effect-7:hover .magnetic-glare,
.btn-effect-7:hover .btn-magnetic-glare { opacity: 1; } .btn-effect-8 {
--squish-factor: 1.08;
--bubble-color: #ec4899;
transition: transform 0.4s cubic-bezier(0.34, 1.75, 0.64, 1), box-shadow 0.3s ease;
}
.btn-effect-8:hover {
transform: scale(var(--squish-factor), 0.93) translateY(-3px);
box-shadow: 0 14px 32px rgba(236, 72, 153, 0.35);
}
.btn-effect-8:active {
transform: scale(0.92, 1.1) translateY(1px);
}
.btn-effect-8 .bubble-shockwave,
.btn-effect-8 .btn-bubble-ring {
position: absolute;
inset: -6px;
border-radius: inherit;
border: 2px solid var(--bubble-color);
opacity: 0;
transform: scale(0.85);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 1;
}
.btn-effect-8:hover .bubble-shockwave,
.btn-effect-8:hover .btn-bubble-ring {
opacity: 0.8;
transform: scale(1.18);
}  .btn-effect-9 {
--neon-1: #10b981;
--neon-2: #06b6d4;
--laser-speed: 2.2s;
--laser-glow: 14px;
position: relative;
}
.btn-effect-9 .laser-border-wrap,
.btn-effect-9 .cyber-laser-border {
position: absolute;
inset: -2px;
border-radius: calc(var(--btn-radius) + 2px);
background: conic-gradient(from 0deg, var(--neon-1), var(--neon-2), transparent 40%, var(--neon-1));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
opacity: 0.35;
animation: laserRotateBtn var(--laser-speed) linear infinite;
z-index: 2;
}
.btn-effect-9 .laser-core-glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 120%, var(--neon-1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.btn-effect-9:hover .laser-border-wrap,
.btn-effect-9:hover .cyber-laser-border {
opacity: 1;
filter: drop-shadow(0 0 var(--laser-glow, 14px) var(--neon-1));
}
.btn-effect-9:hover .laser-core-glow { opacity: 0.4; }
@keyframes laserRotateBtn {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} .btn-effect-10 {
--aurora-1: #9FB8AD;
--aurora-2: #5bb098;
--aurora-3: #38bdf8;
--aurora-blur: 20px;
--aurora-scale: 2.2;
--aurora-opacity: 0.9;
}
.btn-effect-10 .aurora-mesh-layer,
.btn-effect-10 .aurora-btn-canvas {
position: absolute;
inset: -25px;
background: radial-gradient(circle at 75% 25%, var(--aurora-1) 0%, transparent 50%),
radial-gradient(circle at 25% 75%, var(--aurora-2) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, var(--aurora-3) 0%, transparent 60%);
filter: blur(var(--aurora-blur));
opacity: 0;
transform: scale(0.6) rotate(0deg);
transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1);
pointer-events: none;
z-index: 2;
}
.btn-effect-10:hover .aurora-mesh-layer,
.btn-effect-10:hover .aurora-btn-canvas {
opacity: var(--aurora-opacity, 0.9);
transform: scale(var(--aurora-scale, 2.2)) rotate(45deg);
} .btn-effect-11 {
--plasma-color: #CF8852;
--plasma-speed: 0.75s;
--plasma-scale: 3.2;
--plasma-radius: 75px;
}
.btn-effect-11 .nebula-cloud,
.btn-effect-11 .plasma-bloom-core {
position: absolute;
top: 50%;
left: 50%;
width: var(--plasma-radius, 75px);
height: var(--plasma-radius, 75px);
border-radius: 50%;
background: radial-gradient(circle, var(--plasma-color) 0%, color-mix(in srgb, var(--plasma-color) 40%, transparent) 45%, transparent 75%);
filter: blur(14px);
transform: translate(-50%, -50%) scale(0.2);
opacity: 0;
transition: all var(--plasma-speed, 0.75s) cubic-bezier(0.2, 0.9, 0.3, 1);
z-index: 2;
pointer-events: none;
}
.btn-effect-11:hover .nebula-cloud,
.btn-effect-11:hover .plasma-bloom-core {
opacity: 0.85;
transform: translate(-50%, -50%) scale(var(--plasma-scale, 3.2));
}
.fl-builder-content .premium-btn.btn-effect-11:hover,
.premium-btn.btn-effect-11:hover {
box-shadow: 0 10px 30px color-mix(in srgb, var(--plasma-color) 45%, transparent) !important;
} .btn-effect-12 {
--spark-color: #fbbf24;
}
.btn-effect-12 .btn-particle-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
opacity: 0.3;
transition: opacity 0.4s ease;
}
.btn-effect-12:hover .btn-particle-canvas { opacity: 1; } .btn-effect-13 {
--scan-color: #06b6d4;
--scan-speed: 1.2s;
}
.btn-effect-13 .scanline-laser {
position: absolute;
top: -40%;
left: 0;
width: 100%;
height: 35%;
background: linear-gradient(180deg, transparent, var(--scan-color), transparent);
opacity: 0;
z-index: 2;
pointer-events: none;
transition: opacity 0.3s ease;
}
.btn-effect-13:hover .scanline-laser {
opacity: 0.75;
animation: btnScanAnim var(--scan-speed, 1.2s) linear infinite;
}
@keyframes btnScanAnim {
0% { top: -35%; }
100% { top: 120%; }
}
.btn-effect-13 .hud-corner {
position: absolute;
width: 6px;
height: 6px;
border-color: var(--scan-color);
border-style: solid;
pointer-events: none;
z-index: 3;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.btn-effect-13:hover .hud-corner { opacity: 1; }
.btn-effect-13 .hud-tl { top: 3px; left: 3px; border-width: 1.5px 0 0 1.5px; }
.btn-effect-13 .hud-tr { top: 3px; right: 3px; border-width: 1.5px 1.5px 0 0; }
.btn-effect-13 .hud-bl { bottom: 3px; left: 3px; border-width: 0 0 1.5px 1.5px; }
.btn-effect-13 .hud-br { bottom: 3px; right: 3px; border-width: 0 1.5px 1.5px 0; } .btn-effect-14 {
--beam-1: #f43f5e;
--beam-2: #38bdf8;
--orbit-speed: 1.6s;
position: relative;
}
.btn-effect-14 .orbital-track {
position: absolute;
inset: -2px;
border-radius: calc(var(--btn-radius) + 2px);
background: conic-gradient(from 180deg, var(--beam-1), transparent 30%, var(--beam-2), transparent 80%, var(--beam-1));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
opacity: 0.35;
animation: laserRotateBtn var(--orbit-speed) linear infinite reverse;
z-index: 2;
}
.btn-effect-14:hover .orbital-track {
opacity: 1;
filter: drop-shadow(0 0 8px var(--beam-1));
} .btn-effect-15 {
--constellation-color: #a855f7;
}
.btn-effect-15 .btn-particle-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
opacity: 0.35;
transition: opacity 0.4s ease;
}
.btn-effect-15:hover .btn-particle-canvas { opacity: 1; }
.btn-effect-15 .constellation-core {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.35) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
pointer-events: none;
}
.btn-effect-15:hover .constellation-core { opacity: 1; } .btn-effect-16 {
--underglow-color: #10b981;
--underglow-size: 28px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-effect-16 .neon-underglow {
position: absolute;
inset: -4px;
border-radius: inherit;
background: var(--underglow-color);
filter: blur(var(--underglow-size));
opacity: 0;
transform: scale(0.85);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: -1;
pointer-events: none;
}
.btn-effect-16:hover {
transform: translateY(-4px);
box-shadow: 0 0 20px var(--underglow-color);
}
.btn-effect-16:hover .neon-underglow {
opacity: 0.85;
transform: scale(1.15);
}  .btn-effect-17 {
--beam-color: rgba(255, 255, 255, 0.75);
--beam-speed: 0.65s;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.btn-effect-17 .specular-shine {
position: absolute;
top: 0;
left: -130%;
width: 70%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--beam-color), transparent);
transform: skewX(-25deg);
pointer-events: none;
z-index: 3;
transition: left var(--beam-speed) cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-effect-17:hover .specular-shine { left: 170%; } .btn-effect-18 {
--prism-speed: 0.75s;
--prism-intensity: 0.9;
--prism-gradient: linear-gradient(
135deg,
rgba(255,0,80,0) 0%,
rgba(255,0,80,0.8) 12%,
rgba(255,120,0,0.85) 24%,
rgba(255,225,0,0.9) 36%,
rgba(255,255,255,0.98) 50%,
rgba(0,230,130,0.85) 60%,
rgba(0,180,255,0.88) 72%,
rgba(160,50,255,0.85) 86%,
rgba(160,50,255,0) 100%
);
}
.btn-effect-18 .prism-layer {
position: absolute;
inset: 0;
background: var(--prism-gradient);
background-size: 220% 220%;
background-position: 0% 0%;
opacity: 0;
transition: opacity 0.3s ease, background-position var(--prism-speed) cubic-bezier(0.16, 1, 0.3, 1);
z-index: 2;
pointer-events: none;
}
.btn-effect-18:hover .prism-layer {
opacity: var(--prism-intensity);
background-position: 100% 100%;
} .btn-effect-19 {
--acrylic-glow: #38bdf8;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: all 0.35s ease;
}
.btn-effect-19 .acrylic-sheen {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
pointer-events: none;
z-index: 2;
}
.btn-effect-19:hover {
box-shadow: 0 0 24px var(--acrylic-glow), 0 8px 32px rgba(0, 0, 0, 0.25);
} .fl-builder-content .premium-btn.btn-effect-20,
.premium-btn.btn-effect-20 {
--glass-glow: #E59A26;
--split-angle: 45deg;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.btn-effect-20 .dual-glass-split {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(var(--split-angle, 45deg), rgba(255, 255, 255, 0.22) 0%, transparent 50%, color-mix(in srgb, var(--glass-glow, #E59A26) 35%, transparent) 100%);
pointer-events: none;
z-index: 2;
transition: opacity 0.35s ease, transform 0.4s ease, background 0.4s ease;
opacity: 0.75;
}
.fl-builder-content .premium-btn.btn-effect-20:hover,
.premium-btn.btn-effect-20:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 36px color-mix(in srgb, var(--glass-glow, #E59A26) 45%, transparent), 0 0 20px color-mix(in srgb, var(--glass-glow, #E59A26) 30%, transparent) !important;
}
.btn-effect-20:hover .dual-glass-split {
opacity: 1;
background: linear-gradient(var(--split-angle, 45deg), rgba(255, 255, 255, 0.5) 0%, transparent 45%, color-mix(in srgb, var(--glass-glow, #E59A26) 75%, transparent) 100%);
transform: scale(1.08);
} .workspace-controls {
background: #0d101a;
border-top: 1px solid var(--studio-border);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.control-section-title {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #818cf8;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.controls-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
gap: 12px;
}
.control-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.control-label {
font-size: 0.74rem;
font-weight: 600;
color: var(--studio-text-muted);
display: flex;
justify-content: space-between;
align-items: center;
}
.control-value {
font-family: var(--font-display);
font-size: 0.72rem;
color: #a5b4fc;
font-weight: 700;
} .color-picker-wrap {
display: flex;
align-items: center;
gap: 8px;
background: #151a29;
border: 1px solid var(--studio-border);
padding: 4px 8px;
border-radius: 9px;
height: 36px;
}
.color-picker-wrap input[type="color"] {
-webkit-appearance: none;
border: none;
width: 22px;
height: 22px;
border-radius: 6px;
cursor: pointer;
background: transparent;
}
.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-wrap input[type="color"]::-webkit-color-swatch { border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); }
.color-hex {
font-family: 'Fira Code', monospace;
font-size: 0.75rem;
color: #cbd5e1;
text-transform: uppercase;
} input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 5px;
background: #22293d;
border-radius: 999px;
outline: none;
margin: 8px 0 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #6366f1;
cursor: pointer;
box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
transition: transform 0.15s ease, background 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.25);
background: #818cf8;
} .control-text-input,
.control-select {
background: #151a29;
border: 1px solid var(--studio-border);
color: #fff;
font-family: var(--font-body);
font-size: 0.78rem;
padding: 6px 10px;
border-radius: 8px;
outline: none;
height: 36px;
transition: border-color 0.2s ease;
width: 100%;
}
.control-text-input:focus,
.control-select:focus {
border-color: var(--studio-accent);
}
.controls-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.action-link {
background: transparent;
border: none;
color: var(--studio-text-muted);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
transition: color 0.2s ease;
}
.action-link:hover { color: #fff; }.ms-hero-effects {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 200px;
box-sizing: border-box;
}
.ms-hero-effects .mr-hero-effect-wrap {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
max-width: 100%;
}
.ms-hero-effects .mr-hero-ambient-glow {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
transition: background 0.6s ease;
}
.ms-hero-effects .mr-hero-canvas {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
display: block;
z-index: 2;
cursor: grab;
}
.ms-hero-effects .mr-hero-canvas:active {
cursor: grabbing;
}