/* ==========================================================================
   Mobile Suraksha — Shared Stylesheet
   Loaded on every page. Keep this in sync if you fork a page.
   ========================================================================== */

body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Plus Jakarta Sans', sans-serif; }

.glass-nav {
    backdrop-filter: blur(16px);
    background-color: rgba(255, 255, 255, 0.95);
}

.metallic-text {
    background: linear-gradient(to right, #e5a000, #f8cc66, #e5a000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: shine 3s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* --------------------------------------------------------------------------
   Brightening — soft coloured glow washes behind sections so pages feel
   less flat/monochrome than plain navy-on-white blocks.
   -------------------------------------------------------------------------- */
.glow-wash {
    position: relative;
    isolation: isolate;
}
.glow-wash::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 20%, rgba(20, 184, 166, 0.10), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(229, 160, 0, 0.10), transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(251, 113, 133, 0.08), transparent 45%);
}

/* Floating decorative blobs used behind hero sections for visual movement */
@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -15px) scale(1.05); }
    66% { transform: translate(-15px, 10px) scale(0.97); }
}
.blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(40px);
    animation: blob-float 12s ease-in-out infinite;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Button effects — gold shine sweep + lift, used via .btn-shine
   -------------------------------------------------------------------------- */
.btn-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
    z-index: 1;
    pointer-events: none;
}
.btn-shine:hover::after {
    left: 125%;
}

/* Icon "pop" — used on feature/card icon chips so they react on hover */
.icon-pop {
    transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease;
}
.group:hover .icon-pop,
a:hover .icon-pop,
button:hover .icon-pop {
    transform: translateY(-4px) rotate(-6deg) scale(1.08);
}

/* Card lift with a soft coloured border glow on hover */
.card-lift {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px -20px rgba(4, 17, 36, 0.25);
}

/* Nav link underline grow effect */
.nav-underline {
    position: relative;
}
.nav-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #e5a000;
    transition: width 0.3s ease;
}
.nav-underline:hover::after {
    width: 100%;
}

/* Social icon micro-bounce (kept from original inline hover) */
.social-icon { transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease; }
.social-icon:hover { transform: translateY(-2px) scale(1.1); }

/* Custom marker removal for <details> FAQ accordions */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Focus visibility for accessibility (keyboard nav) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #e5a000;
    outline-offset: 2px;
}