:root {
                    --bg: #f5f5dc;
                    --text: #4a4a4a;
                    --primary: #8b4513;
                    --secondary: #fffff0;
                    --border: #dcdcdc;
                    --font: 'Trebuchet MS', sans-serif;
                    --radius: 0px;
                }
                
                * { box-sizing: border-box; margin: 0; padding: 0; }
                body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
                a { color: var(--primary); text-decoration: none; transition: opacity 0.2s; }
                a:hover { opacity: 0.8; }
                img { max-width: 100%; height: auto; display: block; }
                
                .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
                
                /* Abstract offline placeholder images */
                .placeholder-img {
                    background: linear-gradient(135deg, var(--secondary) 0%, var(--border) 100%);
                    display: flex; align-items: center; justify-content: center;
                    color: var(--text); font-weight: 600; opacity: 0.7;
                    border-radius: var(--radius); text-transform: uppercase; font-size: 0.875rem;
                    border: 1px solid var(--border);
                }
                
                /* Navbar */
                header { background: var(--secondary); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
                .nav-wrapper { display: flex; justify-content: space-between; align-items: center; height: 80px; }
                .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); letter-spacing: -0.5px; }
                nav ul { list-style: none; display: flex; gap: 32px; }
                nav a { color: var(--text); font-weight: 500; font-size: 0.95rem; }
                nav a:hover, nav a.active { color: var(--primary); }
                
                @media (max-width: 768px) {
                    .nav-wrapper { flex-direction: column; justify-content: center; height: auto; padding: 20px 0; gap: 16px; }
                    nav ul { gap: 16px; flex-wrap: wrap; justify-content: center; }
                }
                
                /* Buttons */
                .btn { display: inline-block; background: var(--primary); color: var(--bg); padding: 14px 28px; border-radius: var(--radius); font-weight: 600; border: none; cursor: pointer; text-align: center; }
                .btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
                
                /* Hero Section */
                .hero { padding: 120px 0; text-align: center; background: var(--secondary); border-bottom: 1px solid var(--border); }
                .hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; margin-bottom: 24px; color: var(--text); }
                .hero p { font-size: 1.25rem; max-width: 700px; margin: 0 auto 40px; opacity: 0.8; }
                
                /* Layout */
                .section { padding: 100px 0; }
                .section-title { font-size: 2rem; margin-bottom: 48px; text-align: center; }
                
                .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
                .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
                @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }
                
                /* Cards */
                .card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--secondary); transition: transform 0.3s; }
                .card:hover { transform: translateY(-5px); }
                .card-content { padding: 24px; }
                .card-content h3 { margin-bottom: 12px; font-size: 1.25rem; }
                .card-content .price { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; }
                
                /* Forms */
                .form-group { margin-bottom: 20px; }
                .form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
                .form-control { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; }
                textarea.form-control { resize: vertical; min-height: 120px; }
                
                /* Footer */
                footer { background: var(--secondary); padding: 60px 0 30px; border-top: 1px solid var(--border); }
                .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 60px; }
                .footer-col h4 { margin-bottom: 20px; font-size: 1.1rem; }
                .footer-col ul { list-style: none; }
                .footer-col li { margin-bottom: 12px; }
                .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid var(--border); opacity: 0.6; font-size: 0.875rem; }
                
                /* Back to Showcase Button Wrapper */
                .back-to-showcase {
                    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
                    background: #111; color: #fff !important; padding: 12px 20px;
                    border-radius: 50px; font-family: sans-serif; font-size: 14px; font-weight: 600;
                    display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                    text-decoration: none; border: 1px solid #333; transition: transform 0.2s;
                }
                .back-to-showcase:hover { transform: translateY(-2px); opacity: 1; }
                .back-to-showcase svg { width: 16px; height: 16px; }