/* Apply strict overflow hiding on both html and body for mobile browsers */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    background-color: #0a0a0a;
    color: #f5f5f7;
}

/* Animated Mesh Background */
.mesh-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 15% 50%, rgba(41, 151, 255, 0.08), transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(255, 41, 117, 0.08), transparent 25%);
    z-index: -1;
    filter: blur(80px);
    animation: pulseBg 15s infinite alternate ease-in-out;
}

@keyframes pulseBg {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

/* Apple-style Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, #a1a1a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hide scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Horizontal Scroll Wrap */
.pin-wrap {
    display: flex;
    height: 100vh;
    width: 600vw; /* 6 panels = 600vw */
}
.service-panel {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Sophisticated Section Titles */
.section-title-elegant {
    background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
}