/* UI SYSTEM: Modernized Smartbuy Landing Page Colors */
:root {
    --color-slate-50: #FAFAF9; /* Warm light background */
    --color-slate-100: #F5F5F4;
    --color-slate-700: #7A584A; /* Dark brown for body text */
    --color-slate-900: #5E4033; /* Deep brown for headings (Primary Base) */
    --color-teal-500: #E02E32; /* Primary Red */
    --color-teal-600: #C92629; /* Darker Red on Hover */
    --color-amber-500: #F4901E; /* Primary Orange (Secondary Accent) */
    --color-white: #FFFFFF;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(94, 64, 51, 0.1), 0 2px 4px -1px rgba(94, 64, 51, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(94, 64, 51, 0.1), 0 4px 6px -2px rgba(94, 64, 51, 0.05);
    --shadow-floating: 0 10px 25px -5px rgba(224, 46, 50, 0.15);
    
    --radius-sm: 4px;
    --radius-md: 8px; /* Form inputs, small buttons */
    --radius-lg: 16px; /* Cards, Modals */
    
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    
    --gradient-primary: linear-gradient(135deg, var(--color-teal-500), var(--color-amber-500));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--color-slate-700); background-color: var(--color-white); line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-slate-900); font-weight: 600; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: var(--radius-md); font-weight: 500; font-family: var(--font-body); transition: all 0.3s ease; cursor: pointer; border: none; }
.btn-primary { background-color: var(--color-teal-500); color: var(--color-white); }
.btn-primary:hover { background-color: var(--color-teal-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { border: 1px solid var(--color-slate-900); color: var(--color-slate-900); background: transparent; }
.btn-outline:hover { background: var(--color-slate-900); color: var(--color-white); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-slate-100); }
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo-img { max-height: 40px; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links li a { color: var(--color-slate-700); font-weight: 500; transition: color 0.2s; }
.nav-links li a:hover { color: var(--color-teal-500); }
.header-actions { display: flex; gap: 16px; }

/* Utility Classes */
.bg-slate-50 { background-color: var(--color-slate-50); }
.min-h-screen { min-height: 100vh; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }

/* Cards & Portal UI */
.card, .uk-card { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-md); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--color-slate-100); overflow: hidden;}
.card:hover, .uk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.uk-card-media-top { width: 100%; height: 250px; overflow: hidden; }
.uk-card-media-top img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.uk-card:hover .uk-card-media-top img { transform: scale(1.05); }
.uk-card-body { padding: 30px; }

/* Grid System (UIkit-like) */
.uk-grid { display: flex; flex-wrap: wrap; margin-left: -30px; }
.uk-grid > * { padding-left: 30px; }
.uk-width-1-1 { width: 100%; }
.uk-width-1-2 { width: 50%; }
.uk-width-1-3 { width: 33.333%; }
.uk-width-1-4 { width: 25%; }
.uk-width-2-3 { width: 66.666%; }

@media (max-width: 959px) {
    .uk-width-1-2\@m, .uk-width-1-3\@m, .uk-width-1-4\@m, .uk-width-2-3\@m { width: 100% !important; margin-bottom: 30px;}
}
@media (min-width: 960px) {
    .uk-width-1-2\@m { width: 50%; }
    .uk-width-1-3\@m { width: 33.333%; }
    .uk-width-1-4\@m { width: 25%; }
    .uk-width-2-3\@m { width: 66.666%; }
}

/* Forms */
.form-control { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: var(--radius-md); background: var(--color-slate-50); font-family: var(--font-body); transition: all 0.2s; outline: none; }
.form-control:focus { border-color: var(--color-teal-500); background: var(--color-white); box-shadow: 0 0 0 1px var(--color-teal-500); }

/* Footer */
.site-footer { background-color: var(--color-slate-900); color: var(--color-white); padding: 64px 0 32px; }
.footer-logo-img { max-height: 48px; filter: brightness(0) invert(1); margin-bottom: 16px; }