:root{
    --primary-600: #f59e0b; /* amber-500/600 feel */
    --primary-700: #b45309;
    --bg-1: #f8fafc;
    --muted: #6b7280;
}
/* Page foundation */
html,body{height:100%;}
body{
    background: linear-gradient(180deg, rgba(247,250,252,1) 0%, rgba(255,255,255,1) 100%);
    color: #0f172a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Hero / header tweaks */
.hero-cta{background:linear-gradient(90deg,var(--primary-600),#f97316); color:#07112a}

/* Cards */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border-radius: 12px;
  padding: 1.25rem;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
}
.card:hover{transform: translateY(-6px) scale(1.01); box-shadow: 0 12px 30px rgba(15,23,42,0.10)}

/* Product image placeholder */
.card .thumb{height:140px; background:linear-gradient(180deg,#eef2ff,#fff); border-radius:8px; display:flex; align-items:center; justify-content:center}

/* Ensure images with object-cover behave consistently across browsers and breakpoints */
img.object-cover, .card .thumb img, img.w-full.h-full.object-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Fallback for images that should maintain aspect but not crop */
img.object-contain {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Buttons */
.btn-primary{
  background: linear-gradient(90deg,var(--primary-600), #fb923c);
  color: #07112a; padding:.6rem 1rem; border-radius:10px; font-weight:700; border:none; box-shadow: 0 6px 18px rgba(245,158,11,0.12);
  transition: transform .18s, box-shadow .18s, opacity .18s;
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow: 0 18px 40px rgba(245,158,11,0.14)}

/* Accent outline button */
.btn-outline{border:2px solid rgba(15,23,42,0.06); background:transparent; padding:.5rem .9rem; border-radius:10px}

/* Navigation tweaks for improved contrast */
header.bg-gray-800{background: linear-gradient(90deg, rgba(17,24,39,0.98), rgba(15,23,42,0.88));}
header h1{letter-spacing: -0.5px}

/* Footer */
footer{background: linear-gradient(180deg,#0f172a,#07112a); color: #cbd5e1}

/* System modal style override */
#system-modal-content{max-width:420px}

/* Small animated utilities */
.appear-on-load{opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease}
.appear-on-load.appeared{opacity:1; transform: translateY(0)}

/* Responsive grid utility for product lists */
.grid-cards{display:grid; grid-template-columns:repeat(1,1fr); gap:1rem}
@media(min-width:640px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-cards{grid-template-columns:repeat(3,1fr)}}

/* Small helpers */
.muted{color:var(--muted)}

/* Subtle floating badge */
.floating-badge{position:relative}
.floating-badge .badge{position:absolute; top:-10px; right:-10px; background:var(--primary-600); color:#07112a; padding:.25rem .5rem; border-radius:999px; font-weight:700; font-size:0.8rem}

/* Accessibility: focus outlines */
a:focus, button:focus{outline:3px solid rgba(245,158,11,0.18); outline-offset:3px}

/* Small utility to make large headings pop */
.display-heading{font-size:clamp(1.4rem, 2.4vw, 2.25rem); line-height:1.05; font-weight:800}

/* Chat widget styles */
.chat-toggle{position:fixed; right:20px; bottom:22px; z-index:60}
.chat-button{background:var(--primary-600); color:#07112a; padding:.65rem .8rem; border-radius:999px; box-shadow:0 10px 30px rgba(15,23,42,0.12); font-weight:700}
.chat-panel{position:fixed; right:20px; bottom:86px; width:320px; max-width:90vw; background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(2,6,23,0.2); overflow:hidden; z-index:60; display:flex; flex-direction:column}
.chat-header{background:linear-gradient(90deg,var(--primary-600),#f97316); color:#07112a; padding:.9rem 1rem; font-weight:800}
.chat-messages{padding:0.75rem; height:260px; overflow:auto; background:#f8fafc}
.chat-input{display:flex; gap:0.5rem; padding:0.75rem; border-top:1px solid #eee}
.chat-input input{flex:1; padding:0.6rem 0.75rem; border-radius:8px; border:1px solid #e5e7eb}
.chat-bubble{background:#e6fffa; color:#064e3b; padding:0.5rem .75rem; border-radius:10px; display:inline-block; margin-bottom:0.5rem}
.chat-bubble.user{background:#111827; color:#fff}
.chat-small{font-size:.85rem; color:var(--muted)}
.chat-hidden{display:none}

/* Hero graphic (decorative artwork on the right of hero) */
.hero-graphic{position:absolute; right:0; bottom:0; height:20rem; width:auto; pointer-events:none; transform:translateY(8%); opacity:0.98}
@media(min-width:1024px){.hero-graphic{height:26rem; transform:translateY(6%)}}

/* Services two-column layout */
.services-wrap{display:grid; grid-template-columns: 280px 1fr; gap:2rem; align-items:start}
.services-sidebar{background:transparent; padding:1rem 0}
.services-sidebar ul{list-style:none; padding:0; margin:0}
.services-sidebar li{padding:0.75rem 1rem; cursor:pointer; border-radius:8px; color:var(--muted)}
.services-sidebar li.active{background:#063e2f; color:#e9f8ef; font-weight:700; box-shadow: 0 6px 18px rgba(6,62,47,0.08)}
.services-sidebar li a{display:flex; justify-content:space-between; align-items:center; color:inherit; text-decoration:none}
.services-content{padding:1rem}
.services-sublist{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.75rem; margin-top:1rem}
@media(max-width:900px){.services-wrap{grid-template-columns:1fr} .services-sidebar{order:1} .services-content{order:2} .services-sublist{grid-template-columns:1fr 1fr}}