:root { --qm-orange: #ff7043; --qm-yellow: #ffca28; --qm-brown: #5d4037; --qm-bg: #fff8e1; --qm-text: #4e342e; }
body { margin:0; padding-bottom: 80px; font-family: 'Nunito', 'Segoe UI', sans-serif; background: var(--qm-bg); color: var(--qm-text); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
.qm-header { background: #fff; padding: 25px 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; border-bottom: 4px solid var(--qm-yellow); }
.qm-logo { font-size: 32px; font-weight: 900; color: var(--qm-orange); text-transform: lowercase; letter-spacing: -1.5px; }
.qm-logo span { color: var(--qm-yellow); }
.qm-desktop-nav { display: none; }
@media(min-width: 900px) {
  .qm-desktop-nav { display: flex; gap: 30px; }
  .qm-desktop-nav a { font-weight: 800; color: var(--qm-brown); transition: 0.2s; font-size: 16px; text-transform: uppercase; }
  .qm-desktop-nav a:hover { color: var(--qm-orange); }
}
.qm-bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 -5px 25px rgba(0,0,0,0.1); display: flex; justify-content: space-around; padding: 18px 0; z-index: 100; border-top: 3px solid var(--qm-orange); }
.qm-bottom-nav a { font-weight: 900; font-size: 14px; color: var(--qm-brown); text-align: center; text-transform: uppercase; letter-spacing: 1px; flex: 1; border-right: 1px solid #eee; }
.qm-bottom-nav a:last-child { border-right: none; }
.qm-bottom-nav a:hover { color: var(--qm-orange); }
.qm-hero { position: relative; height: 450px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 0 0 50px 50px; margin-bottom: 50px; box-shadow: 0 15px 30px rgba(0,0,0,0.15); border-bottom: 8px solid var(--qm-orange); }
.qm-hero-img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.qm-hero-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(93,64,55,0.65); z-index: 2; }
.qm-hero-content { position: relative; z-index: 3; text-align: center; padding: 30px; max-width: 800px; }
.qm-hero h1 { font-size: 52px; color: #fff; text-shadow: 3px 3px 6px rgba(0,0,0,0.6); margin: 0 0 15px 0; font-weight: 900; letter-spacing: -1px; line-height: 1.1; }
.qm-hero p { font-size: 22px; color: #ffe082; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.6); }
.qm-main { max-width: 1200px; margin: 0 auto; padding: 0 30px 40px 30px; }
.qm-title { font-size: 42px; color: var(--qm-brown); text-align: center; margin-bottom: 50px; font-weight: 900; }
.qm-title::after { content: ''; display: block; width: 100px; height: 6px; background: var(--qm-yellow); margin: 20px auto 0; border-radius: 3px; }
.qm-text { font-size: 20px; line-height: 1.8; text-align: center; max-width: 900px; margin: 0 auto 50px; color: #555; }
.qm-masonry { column-count: 1; column-gap: 40px; }
@media(min-width: 650px) { .qm-masonry { column-count: 2; } }
@media(min-width: 1000px) { .qm-masonry { column-count: 3; } }
.qm-card { background: #fff; border-radius: 25px; padding: 35px; margin-bottom: 40px; break-inside: avoid; box-shadow: 0 10px 30px rgba(0,0,0,0.06); border: 3px dashed #ffe082; transition: 0.3s; position: relative; }
.qm-card::before { content: '⏱️'; position: absolute; top: -20px; left: -20px; font-size: 40px; }
.qm-card:hover { transform: translateY(-8px) scale(1.01); border-color: var(--qm-orange); box-shadow: 0 20px 40px rgba(255,112,67,0.15); }
.qm-card h3 { color: var(--qm-orange); font-size: 26px; margin-top: 0; font-weight: 900; line-height: 1.2; }
.qm-btn { display: block; width: fit-content; margin: 40px auto 0; background: var(--qm-orange); color: #fff; padding: 18px 50px; border-radius: 50px; font-weight: 900; font-size: 20px; box-shadow: 0 8px 20px rgba(255,112,67,0.4); transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.qm-btn:hover { background: #f4511e; transform: translateY(-4px); box-shadow: 0 12px 25px rgba(255,112,67,0.5); }
.qm-footer { text-align: center; padding: 50px 20px 30px; color: #888; font-size: 15px; }
.qm-footer a { color: #888; margin: 0 10px; font-weight: bold; text-decoration: underline; }
.qm-form input, .qm-form textarea { width: 100%; padding: 20px; margin-bottom: 20px; border: 3px solid #ffe082; border-radius: 15px; font-family: inherit; font-size: 18px; box-sizing: border-box; background: #fff; transition: 0.3s; }
.qm-form input:focus, .qm-form textarea:focus { outline: none; border-color: var(--qm-orange); background: #fffaf0; }
.qm-form button { background: var(--qm-yellow); color: var(--qm-brown); border: none; padding: 20px 40px; border-radius: 15px; font-size: 20px; font-weight: 900; cursor: pointer; width: 100%; transition: 0.3s; text-transform: uppercase; }
.qm-form button:hover { background: var(--qm-orange); color: #fff; }