/* General reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: #f5f9ff;
    min-height: 100vh;
  
    padding: 2rem 1.5rem;
    position: relative;
    overflow-x: hidden;
}

/* Background Container */
.animated-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* यह कंटेंट के पीछे रहेगा */
    background: linear-gradient(145deg, #f4f9fe 0%, #eef2f8 100%);
    overflow: hidden;
}

.dots-pattern {
    position: absolute; width: 100%; height: 100%;
    background-image: radial-gradient(circle at 1px 1px, rgba(44, 90, 110, 0.25) 1.2px, transparent 1.2px);
    background-size: 34px 34px;
    animation: driftDots 45s linear infinite;
    opacity: 0.7;
}

@keyframes driftDots {
    0% { background-position: 0 0; }
    100% { background-position: 70px 70px; }
}

.floating-icon {
    position: absolute; font-size: 1.5rem; opacity: 0.2; color: #2c5a6e;
    pointer-events: none; z-index: 1;
    animation: floatIcon 16s infinite alternate ease-in-out;
}

@keyframes floatIcon {
    0% { transform: translateY(0px) rotate(0deg); opacity: 0.2; }
    100% { transform: translateY(-25px) rotate(6deg); opacity: 0.35; }
}

.soft-orb {
    position: absolute; border-radius: 50%; filter: blur(50px);
    pointer-events: none; animation: slowDrift 28s infinite alternate;
}

@keyframes slowDrift {
    0% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    100% { transform: translate(3%, 2%) scale(1.1); opacity: 0.7; }
}
/* Ensure border is visible */
#pwa-modal .pwa-box {
    border: 2px solid #000000 !important;
    background-clip: padding-box;
}