
:root{
  --ui: var(--font-ui, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  --ink:#0b1220; --muted:#5b6777; --border:#e7ebf1; --bg:#ffffff; --bg-soft:#f7f9fc;
  --primary:#0e7afe; --primary-ink:#fff;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: var(--ui); color:var(--ink); background:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* NAVBAR */
.c-nav{ position:sticky; top:0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); }
.c-nav-inner{ max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; }
.c-nav .links{ display:flex; gap:20px; margin-left:auto; align-items:center; }
.c-nav .links a{ padding:8px 12px; border-radius:12px; color:#223; font-weight:700; }
.c-nav .links a:hover{ background:var(--bg-soft); }
.c-nav .links a.active{ background: var(--primary); color:#fff; box-shadow: 0 4px 14px rgba(14,122,254,.18); }

.burger{ width:40px; height:40px; display:none; border:1px solid var(--border); background:#fff; border-radius:10px; align-items:center; justify-content:center; gap:4px; }
.burger span{ display:block; width:18px; height:2px; background:#111; }
@media (max-width: 900px){
  .c-nav .links{ display:none; position:absolute; top:60px; right:12px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; flex-direction:column; min-width:200px; box-shadow:0 10px 30px rgba(0,0,0,.08); }
  .burger{ display:inline-flex; margin-left:auto; }
  .c-nav .links.open{ display:flex; }
}

/* FOOTER */
.c-footer{ background: var(--bg-soft); border-top:1px solid var(--border); margin-top:60px; }
.c-footer-inner{ max-width:1200px; margin:0 auto; padding:30px 16px; display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.c-footer h4{ margin:0 0 10px; }
.c-footer ul{ margin:0; padding:0; list-style:none; }
.c-footer li{ margin:6px 0; }
.c-footer .foot-note{ grid-column:1 / -1; color:var(--muted); margin-top:10px; }
.c-footer .socials{ display:flex; gap:10px; margin-top:10px; }
.c-footer .socials .ic{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border); background:#fff; color:#111; }
.c-footer .socials .ic:hover{ background: var(--primary); color:#fff; border-color: transparent; }
#miniContact input, #miniContact textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; margin:6px 0 10px; }
#miniContact .btn{ height:40px; padding:0 14px; border-radius:10px; background:var(--primary); color:#fff; border:1px solid transparent; }
#miniContact .mini-msg{ margin-top:8px; color: var(--muted); }

/* LAYOUT */
.wrap{ max-width:1200px; margin: 28px auto; padding: 0 16px; }
.sec-hd{ margin:0 0 16px; font-size: clamp(22px, 3.8vw, 32px); }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{ border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 4px 16px rgba(16,24,40,.04); display:flex; flex-direction:column; }
.card-bd{ padding:14px; }
.card .t{ font-weight:700; }
.card .p{ color:#0a7; font-weight:800; margin-top:4px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 14px; border-radius:10px; background:var(--primary); color:#fff; border:1px solid transparent; }

.muted{ color:var(--muted); }

/* DETAIL */
.detail{ display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; }
.detail .thumbs{ display:flex; gap:8px; margin-top:10px; overflow:auto; }
.detail .thumb{ width:84px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); cursor:pointer; }
.detail .price{ font-size:28px; font-weight:800; color:#0a7; margin:10px 0; }
.detail .addr{ margin-top:10px; color:#334; }
@media (max-width: 900px){ .detail{ grid-template-columns:1fr; } }

/* HERO SLIDER (unchanged) */
.c-hero{ position:relative; height: calc(100vh - 72px); min-height: 520px; }
.c-hero-track{ position:absolute; inset:0; overflow:hidden; }
.c-hero-item{ position:absolute; inset:0; background-size:cover; background-position:center; transform:translateX(100%); opacity:0; transition:transform .7s ease, opacity .7s ease; }
.c-hero-item[style*="--bg:"]{ background-image: var(--bg); }
.c-hero-item[aria-current="true"]{ transform:translateX(0); opacity:1; z-index:2; }
.c-hero-item[aria-prev="true"]{ transform:translateX(-30%); opacity:0; z-index:1; }
.c-hero-overlay{ position:absolute; inset:0; background: rgba(0,0,0, calc(var(--ov,45) / 100)); }
.c-hero-cap{ position:absolute; left:50%; bottom:12vh; transform:translateX(-50%); text-align:center; color:#fff; width:min(92vw, 960px); }
.c-hero-cap.align-left{ left:8%; transform:none; text-align:left; }
.c-hero-cap.align-right{ left:auto; right:8%; transform:none; text-align:right; }
.c-hero-cap h1{ margin:0 0 10px; font-size: clamp(28px, 5vw, 48px); line-height:1.08; }
.c-hero-cap p{ margin:0 0 18px; font-size: clamp(16px, 2.5vw, 20px); opacity:.95; }
.c-btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; color:#fff; background:var(--primary); border-radius:12px; font-weight:700; }
.c-hero-dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:5; }
.c-hero-dots button{ width:10px; height:10px; border-radius:99px; border:none; background:#d4d9e2; }
.c-hero-dots button[aria-current="true"]{ width:26px; background:#fff; }
.c-hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); height:44px; width:44px; border-radius:12px; border:1px solid var(--border); background: rgba(255,255,255,.85); }
.c-hero-arrow.prev{ left:20px; } .c-hero-arrow.next{ right:20px; }

/* LIGHTBOX */
.lightbox{ position: fixed; inset:0; background: rgba(10,12,16,.92); display:none; align-items:center; justify-content:center; z-index:60; }
.lb-img{ max-width: 92vw; max-height: 86vh; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.lb-arrow{ position:absolute; top:50%; transform:translateY(-50%); height:48px; width:48px; border-radius:12px; border:1px solid var(--border); background: rgba(255,255,255,.92); }
.lb-prev{ left:24px; } .lb-next{ right:24px; }
.lb-close{ position:absolute; top:20px; right:20px; height:44px; width:44px; border-radius:12px; border:1px solid var(--border); background: rgba(255,255,255,.92); font-size:24px; }
.lb-dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
.lb-dots button{ width:10px; height:10px; border-radius:99px; border:none; background:#cbd5e1; }
.lb-dots button[aria-current="true"]{ width:26px; background:#fff; }
