
.uudai-sf-hero {
position: relative;
padding: 90px 0 70px;
overflow: hidden;
}

.uudai-sf-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: #c08a2e;
font-weight: 700;
letter-spacing: 2px;
font-size: .82rem;
text-transform: uppercase;
margin-bottom: 22px;
}

.uudai-sf-hero h2 {
font-size: 3.1rem;
font-weight: 700;
line-height: 1.18;
color: #1c2947;
margin-bottom: 6px;
}

.uudai-sf-hero h2 .uudai-sf-red {
color: #8a2035;
font-style: italic;
display: block;
}

.uudai-sf-hero-note {
display: flex;
gap: 18px;
align-items: flex-start;
margin-top: 34px;
}

.uudai-sf-shell-icon {
width: 56px;
height: 56px;
flex: 0 0 56px;
border: 1.5px solid #d9b877;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #c9a24a;
font-size: 1.3rem;
background: #fffaf0;
}

.uudai-sf-hero-note p {
color: #77726a;
margin: 0;
font-size: .98rem;
line-height: 1.65;
}

.uudai-sf-hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
}

.uudai-sf-blob {
position: absolute;
width: 520px;
height: 520px;
right: -40px;
top: -20px;
background: radial-gradient(
circle at 35% 30%,
#dbeefb,
rgba(219, 238, 251, 0)
);
border-radius: 48% 52% 55% 45% / 45% 45% 55% 55%;
animation: uudai-sfBlobMove 12s ease-in-out infinite;
filter: blur(2px);
}

@keyframes uudai-sfBlobMove {
0%,
100% {
border-radius: 48% 52% 55% 45% / 45% 45% 55% 55%;
transform: rotate(0deg) scale(1);
}

50% {
border-radius: 55% 45% 48% 52% / 55% 55% 45% 45%;
transform: rotate(8deg) scale(1.03);
}
}

.uudai-sf-hero-img-wrap {
position: relative;
z-index: 2;
border-radius: 50%;
overflow: hidden;
width: 420px;
height: 420px;
box-shadow: 0 30px 60px rgba(28, 41, 71, .18);
border: 8px solid #ffffff;
animation: uudai-sfFloat 5s ease-in-out infinite;
}

.uudai-sf-hero-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}

.uudai-sf-hero-img-wrap:hover img {
transform: scale(1.08);
}

@keyframes uudai-sfFloat {
0%,
100% {
transform: translateY(0);
}

50% {
transform: translateY(-14px);
}
}

/* ---------- Reveal ---------- */

.uudai-sf-reveal {
animation: uudai-sfReveal .9s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes uudai-sfReveal {
from {
opacity: 0;
transform: translateY(28px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.uudai-sf-delay-1 {
animation-delay: .12s;
}

.uudai-sf-delay-2 {
animation-delay: .24s;
}

.uudai-sf-delay-3 {
animation-delay: .36s;
}

/* ---------- Offer cards ---------- */

.uudai-sf-offers {
padding: 20px 0 70px;
}

.uudai-sf-card {
background: #fff;
border-radius: 22px;
box-shadow: 0 10px 34px rgba(28, 41, 71, .06);
height: 100%;
display: flex;
flex-direction: column;
transition: transform .35s ease, box-shadow .35s ease;
border: 1px solid rgba(28, 41, 71, .04);
}

.uudai-sf-card:hover {
transform: translateY(-10px);
box-shadow: 0 24px 48px rgba(28, 41, 71, .14);
}

.uudai-sf-card-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fbe4d8;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #8a2035;
margin-bottom: 22px;
transition: transform .35s ease;
}

.uudai-sf-card:hover .uudai-sf-card-icon {
transform: rotate(-8deg) scale(1.08);
}

.uudai-sf-card h3 {
font-size: 1.4rem;
color: #1c2947;
font-weight: 700;
margin-bottom: 16px;
}

.uudai-sf-card h3 .uudai-sf-num {
color: #8a2035;
}

.uudai-sf-card-divider {
width: 42px;
height: 2px;
background: #e0a95c;
margin-bottom: 16px;
}

.uudai-sf-card p {
color: #8b8880;
font-size: .94rem;
line-height: 1.6;
}

.uudai-sf-card-img {
margin-top: auto;
border-radius: 16px;
overflow: hidden;
height: 200px;
}

.uudai-sf-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}

.uudai-sf-card-img:hover img {
transform: scale(1.1);
}

/* ---------- CTA banner ---------- */

.uudai-sf-cta {
background: linear-gradient(120deg, #fbeee0, #fdf6ea);
border-radius: 26px;
padding: 40px 44px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
box-shadow: 0 18px 40px rgba(201, 148, 42, .12);
position: relative;
overflow: hidden;
}

.uudai-sf-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
rgba(255, 255, 255, .35),
rgba(255, 255, 255, 0) 40%
);
animation: uudai-sfShine 6s linear infinite;
pointer-events: none;
}

@keyframes uudai-sfShine {
0% {
transform: translateX(-60%);
}

100% {
transform: translateX(60%);
}
}

.uudai-sf-cta-left {
display: flex;
align-items: center;
gap: 22px;
}

.uudai-sf-cta-icon {
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 50%;
background: #f6ddb8;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #8a2035;
}

.uudai-sf-cta-left h4 {
font-weight: 700;
color: #1c2947;
font-size: 1.35rem;
margin: 0;
line-height: 1.4;
}

.uudai-sf-cta .uudai-sf-btn-maroon {
padding: 14px 30px;
font-size: .95rem;
}