@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&family=Playfair+Display:ital,wght@1,400;1,600&display=swap');

html, body {
    min-height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(255, 221, 236, 0.95), transparent 34%),
        radial-gradient(circle at 85% 15%, rgba(230, 202, 255, 0.78), transparent 28%),
        radial-gradient(circle at 20% 85%, rgba(255, 207, 214, 0.7), transparent 30%),
        linear-gradient(145deg, #fff9fd 0%, #f8e8f2 42%, #f1e4ff 100%);
    color: #2f2030;
}

.luxury-bg {
    position: relative;
}

.luxury-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.55), transparent 22%),
        radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.22), transparent 18%),
        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.16), transparent 20%);
    pointer-events: none;
    z-index: 0;
}

.perspective-1000 {
    perspective: 1000px;
}

.dr-rehab {
    font-family: 'Playfair Display', serif;
}

/* -----------------------------
   LIQUID BACKGROUND EFFECT
    Soft pink, rose, and lavender liquid blobs
-------------------------------- */
.liquid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    /* Massive blur for liquid blending */
    filter: blur(120px);
    opacity: 0.88;
}

.blob {
    position: absolute;
    border-radius: 50%;
    animation: moveBlobs 20s infinite alternate ease-in-out;
}

.blob-1 {
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, rgba(255, 169, 213, 0.95) 0%, rgba(255, 233, 242, 0.1) 70%);
    top: -10%;
    left: -10%;
    animation-duration: 22s;
}

.blob-2 {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(183, 150, 255, 0.9) 0%, rgba(255, 236, 248, 0.08) 72%);
    bottom: -20%;
    right: -10%;
    animation-delay: -5s;
}

.blob-3 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, rgba(255, 206, 215, 0.88) 0%, rgba(255, 255, 255, 0.08) 70%);
    top: 30%;
    left: 40%;
    animation-duration: 28s;
    animation-delay: -12s;
}

@keyframes moveBlobs {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(8vw, 15vh) scale(1.1) rotate(45deg); border-radius: 60% 40% 30% 70%; }
    66% { transform: translate(-5vw, 10vh) scale(0.9) rotate(90deg); border-radius: 30% 60% 70% 40%; }
    100% { transform: translate(5vw, -5vh) scale(1.05) rotate(135deg); border-radius: 40% 50% 60% 30%; }
}

/* -----------------------------
   ADVANCED LIQUID GLASS CARD
-------------------------------- */
.glass-card {
    /* Soft rosy tint to catch the blur */
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 
        0 30px 70px -20px rgba(137, 77, 119, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 0 20px rgba(255, 255, 255, 0.36);
    border-radius: 2.5rem;
    
    /* Standard Backdrop Blur */
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    
    transform-style: preserve-3d;
    transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Edge light reflection */
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2.5rem;
    padding: 1.5px;
    background: linear-gradient(
        135deg, 
        rgba(255,255,255,0.85) 0%, 
        rgba(255,255,255,0) 40%, 
        rgba(255,255,255,0) 60%, 
        rgba(255, 204, 230, 0.55) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.logo-text,
.dr-rehab,
.footer-text,
.status-badge {
    text-shadow: 0 10px 30px rgba(143, 74, 123, 0.12);
}

.logo-text {
    filter: drop-shadow(0 12px 24px rgba(95, 28, 69, 0.12));
}

.status-badge {
    box-shadow: 0 18px 40px rgba(120, 58, 98, 0.12);
}
