html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-padding-top: 56px;
}

body {
    padding-top: 56px;
}

@media (min-width: 768px) {
    html {
        scroll-padding-top: 56px;
    }
    body {
        padding-top: 56px;
    }
}

/* CSS Custom Properties for Design System */
:root {
    --color-primary: #14532D;
    --color-on-primary: #FFFFFF;
    --color-secondary: #166534;
    --color-accent: #D97706;
    --color-background: #FFFFFF;
    --color-foreground: #1d1d1f;
    --color-muted: #F5F5F7;
    --color-border: #d2d2d7;
    --color-destructive: #DC2626;
    --color-ring: #14532D;
    --color-apple-gray: #86868b;
}

/* Scroll Animation Classes - Apple-like smooth reveals */
.fade-in { 
    opacity: 0; 
    transform: translateY(24px); 
    transition: opacity 0.8s cubic-bezier(0.28, 0.11, 0.32, 1), transform 0.8s cubic-bezier(0.28, 0.11, 0.32, 1); 
}
.fade-in.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Animation Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Hero Video Background Setup */
.video-container { 
    position: relative; 
    width: 100%; 
    min-height: 100vh; 
    overflow: hidden; 
    background: #0a0a0a;
}
.video-container.video-fallback {
    background: linear-gradient(135deg, #0a2e1a 0%, #0a0a0a 100%);
}
.video-bg { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; 
    transform: translateX(-50%) translateY(-50%); 
    object-fit: cover; 
}
.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%); 
    z-index: 0; 
}
.content-z { 
    position: relative; 
    z-index: 1; 
}

/* Smooth scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Selection styling */
::selection {
    background: rgba(20, 83, 45, 0.15);
    color: #14532D;
}

/* Form input focus ring - Apple-like */
input:focus, textarea:focus {
    outline: none;
    border-color: rgba(20, 83, 45, 0.4);
    box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.08);
}

/* Button press effect */
button:active, a:active {
    transform: scale(0.98);
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}