/* Claymorphic Variables */
:root {
    --clay-background: #f5f7f9;
    --clay-shadow-dark: rgba(76, 86, 102, 0.35);
    --clay-shadow-light: rgba(247, 249, 251, 0.9);
    --clay-highlight: #edf0f4;
    --clay-accent: #2a7f62;
    --clay-text: rgba(58, 66, 78, 0.85);
    --clay-border: rgba(76, 86, 102, 0.15);
    --border-radius-lg: 30px;
    --border-radius-md: 20px;
    --border-radius-sm: 15px;
}

body {
    background: none;
    position: relative;
    min-height: 100vh;
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    will-change: opacity;
    max-width: 100%;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(42, 127, 98, 0.05) 0%, rgba(220, 240, 230, 0.08) 100%),
                url('../images/Apple.png');
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center bottom;
    background-size: auto 30%;
    opacity: 0.25;
    z-index: -1;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    will-change: transform;
    transform: translateZ(0);
}