/* WP Rankify teaser card – muench-media.com */
 
/* ---------- stage around the card ---------- */
.rk-stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 64px 0 104px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #FFF9F1;
    background-image: radial-gradient(rgba(17, 17, 16, .07) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    border-top: 1px solid #F1ECE4;
}
/* soft colour clouds */
.rk-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}
.rk-glow-amber  { width: 560px; height: 560px; left: -160px; top: -140px; background: rgba(242, 148, 0, .30); }
.rk-glow-purple { width: 620px; height: 620px; right: -180px; bottom: -220px; background: rgba(139, 92, 246, .26); }
 
/* bubbles floating around the card */
.rk-float {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: rk-float 9s ease-in-out infinite;
}
.rk-f1 { width: 64px; height: 64px; left: 7%;  top: 18%; background: #F29400; animation-delay: -1s; }
.rk-f2 { width: 22px; height: 22px; left: 12%; top: 70%; background: #8B5CF6; animation-delay: -4s; }
.rk-f3 { width: 38px; height: 38px; right: 8%; top: 14%; background: #C4B5FD; animation-delay: -2s; }
.rk-f4 { width: 14px; height: 14px; right: 14%; top: 8%;  background: #F29400; animation-delay: -6s; }
.rk-f5 { width: 90px; height: 90px; right: 6%; bottom: 22%; border: 3px solid #F29400; animation-delay: -3s; }
.rk-f6 { width: 12px; height: 12px; left: 46%; top: 7%;  background: #8B5CF6; animation-delay: -5s; }
.rk-f7 { width: 28px; height: 28px; left: 5%;  bottom: 24%; border: 3px solid #8B5CF6; animation-delay: -7s; }
 
@keyframes rk-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-18px); }
}
 
/* ---------- card ---------- */
.rk-card {
    z-index: 1;
    box-shadow: 0 30px 60px -20px rgba(242, 148, 0, .45), 0 18px 36px -18px rgba(17, 17, 16, .25);
    --rk-amber: #F29400;
    --rk-ink: #111110;
    --rk-purple: #8B5CF6;
    --rk-lavender: #C4B5FD;
    --rk-cream: #FFDDA0;
    position: relative;
    overflow: hidden;
    max-width: 980px;
    margin: 0 auto;
    padding: 56px 64px;
    border-radius: 32px;
    background: var(--rk-amber);
    color: var(--rk-ink);
}
 
/* decorative bubbles */
.rk-bubble { position: absolute; border-radius: 50%; pointer-events: none; }
.rk-b1 { width: 180px; height: 180px; right: -50px; top: -60px; background: var(--rk-purple); }
.rk-b2 { width: 34px; height: 34px; right: 150px; top: 36px; background: #fff; }
.rk-b3 { width: 120px; height: 120px; left: -40px; bottom: -50px; background: #FFB23F; }
.rk-b4 { width: 22px; height: 22px; right: 60px; bottom: 44px; background: var(--rk-lavender); }
.rk-b5 { width: 14px; height: 14px; left: 42%; bottom: 26px; background: var(--rk-cream); }
 
.rk-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 48px;
}
.rk-mark {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    filter: drop-shadow(0 10px 24px rgba(17, 17, 16, .18));
    transform: rotate(-4deg);
    transition: transform .3s ease;
}
.rk-card:hover .rk-mark { transform: rotate(0deg) translateY(-4px); }
 
.rk-eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.rk-title {
    margin: 0 0 8px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
}
.rk-lead {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 600;
}
.rk-desc {
    margin: 0 0 28px;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.55;
}
.rk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rk-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
}
.rk-btn:hover { transform: translateY(-2px); }
.rk-btn:focus-visible { outline: 3px solid var(--rk-ink); outline-offset: 3px; }
.rk-btn-dark { background: var(--rk-ink); color: #fff; }
.rk-btn-dark:hover { background: #2a2a28; color: #fff; }
.rk-btn-light { background: #fff; color: var(--rk-ink); }
.rk-btn-light:hover { background: #FFF4E0; color: var(--rk-ink); }
 
/* fixed footer blends into the stage instead of a white strip */
.rk-footer {
    background: rgba(255, 249, 241, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
 
@media (max-width: 767.98px) {
    .rk-card { padding: 40px 24px; border-radius: 24px; }
    .rk-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
    .rk-mark { width: 96px; height: 96px; }
    .rk-b1 { width: 120px; height: 120px; right: -40px; top: -40px; }
    .rk-b2 { right: 96px; }
    .rk-btn { width: 100%; justify-content: center; }
}
 
@media (max-width: 767.98px) {
    .rk-f1, .rk-f5, .rk-f7 { display: none; }
    .rk-glow-amber  { width: 320px; height: 320px; }
    .rk-glow-purple { width: 360px; height: 360px; }
}
 
@media (prefers-reduced-motion: reduce) {
    .rk-float { animation: none; }
    .rk-mark, .rk-btn { transition: none; }
    .rk-mark { transform: none; }
}