@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-shutter-primary { background-color: #334155; } /* Slate 700 */
    .bg-shutter-secondary { background-color: #F97316; } /* Orange 500 */
    .bg-shutter-dark { background-color: #0F172A; } /* Slate 900 */
    .bg-shutter-light { background-color: #F8FAFC; } /* Slate 50 */
    
    .text-shutter-primary { color: #334155; }
    .text-shutter-secondary { color: #F97316; }
    .text-shutter-dark { color: #0F172A; }
    
    .font-montserrat { font-family: 'Montserrat', sans-serif; }
    .font-opensans { font-family: 'Open Sans', sans-serif; }
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #475569;
    background-color: #FFFFFF;
}

.shutter-btn {
    @apply inline-flex items-center justify-center px-8 py-4 bg-[#F97316] text-white font-montserrat font-bold text-sm tracking-wider uppercase hover:bg-[#EA580C] hover:-translate-y-1 transition-all duration-300 shadow-[0_4px_14px_0_rgba(249,115,22,0.39)];
}

.shutter-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-4 border-2 border-[#334155] text-[#334155] font-montserrat font-bold text-sm tracking-wider uppercase hover:bg-[#334155] hover:text-white hover:-translate-y-1 transition-all duration-300;
}

/* Subtle Line Pattern */
.line-pattern {
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        rgba(51, 65, 85, 0.05) 19px,
        rgba(51, 65, 85, 0.05) 20px
    );
}

/* Shutter Animation Effect */
.shutter-effect {
    position: relative;
    overflow: hidden;
}

.shutter-effect::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(0,0,0,0.1) 0px,
        rgba(0,0,0,0.1) 4px,
        transparent 4px,
        transparent 8px
    );
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.shutter-effect:hover::before {
    opacity: 1;
}

/* Glass Card */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.1);
}