:root{
  --bg: #0b1222;
  --surface: #0f1b33;
  --muted-surface:#0c162b;
  --text: #e6edf7;
  --muted: #9fb0c8;
  --brand: #0ea5e9;
  --brand-600: #0284c7;
  --accent: #22d3ee;
  --good: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 14px;
  --gap: 1rem;
  --container: 1200px;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --focus: 2px solid #22d3ee;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), #08101f);
  color: var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block}
a{color: var(--brand); text-decoration: none}
a:hover{color: var(--brand-600)}
.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}
.container.narrow{width:min(100% - 2rem, 900px)}
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#000; border-radius:.5rem; outline: var(--focus)}

.site-header{position:sticky; top:0; z-index:20; backdrop-filter: blur(8px); background: rgba(3,10,24,.6); border-bottom: 1px solid rgba(255,255,255,.06)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:800; letter-spacing:.3px; color:#fff}
.brand span{font-size:1.1rem}
.primary-nav ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.primary-nav a{color:var(--text); padding:.5rem .75rem; border-radius:.5rem}
.primary-nav a.active, .primary-nav a:focus{outline: var(--focus); background: rgba(255,255,255,.06)}
.nav-toggle{display:none; font-size:1.25rem; color:#fff; background:none; border:1px solid rgba(255,255,255,.2); border-radius:.5rem; padding:.3rem .5rem}

.hero{position:relative; padding: clamp(3rem, 8vw, 7rem) 0; background: radial-gradient(1000px 380px at 70% 0%, rgba(14,165,233,.25), transparent)}
.hero h1{font-size: clamp(2.2rem, 4vw, 3.4rem); line-height:1.1; margin:0 0 .75rem}
.hero p{color: var(--muted); margin:0 0 1.2rem}
.actions{display:flex; gap:.75rem; flex-wrap:wrap}
.btn{display:inline-block; padding:.8rem 1rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color:#fff; font-weight:600; transition:.2s transform}
.btn:hover{transform: translateY(-1px)}
.btn.primary{background: linear-gradient(135deg, var(--brand), var(--accent)); border: none}
.badge{display:inline-block; padding:.25rem .5rem; border-radius:.5rem; background:rgba(255,255,255,.08); color:var(--muted); font-size:.8rem}

.section{padding: clamp(2.5rem, 6vw, 4rem) 0}
.section.alt{background: rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.section-title{font-size:1.6rem; margin:0 0 1rem}

.grid-2{display:grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: 1.2fr 1fr}
@media (max-width: 920px){ .grid-2{grid-template-columns: 1fr} }

.cards{display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 1100px){ .cards{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .cards{grid-template-columns: 1fr} }

.card{background: linear-gradient(180deg, var(--muted-surface), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); overflow: hidden; display:flex; flex-direction:column; box-shadow: var(--shadow)}
.card .media{aspect-ratio: 4/3; overflow:hidden}
.card .media img{width:100%; height:100%; object-fit:cover}
.card .body{padding:1rem; display:flex; flex-direction:column; gap:.35rem}
.card h3{margin:.2rem 0 .2rem; font-size:1.15rem}
.card .meta{color:var(--muted); font-size:.9rem}
.card .price{font-weight:800; font-size:1.1rem; margin-top:.25rem}
.card .actions{margin-top:.5rem; display:flex; gap:.5rem; flex-wrap:wrap}

.filters{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap:.5rem; margin:.75rem 0 1rem}
@media (max-width: 860px){ .filters{grid-template-columns: 1fr 1fr} }

input, select, textarea{width:100%; padding:.65rem .75rem; border-radius:.6rem; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: var(--text)}
label{display:block; margin:.5rem 0 .25rem}
input:focus, select:focus, textarea:focus{outline: var(--focus)}

.pagination{display:flex; gap:.4rem; align-items:center; justify-content:center; margin-top:1rem}
.page-btn{padding:.5rem .75rem; border-radius:.5rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)}
.page-btn[disabled]{opacity:.5}

.table{width:100%; border-collapse: collapse; margin-top:.5rem}
.table th,.table td{padding:.6rem .5rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left}
.table th{color:var(--muted); font-weight:600}

.site-footer{border-top:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.4)}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; padding:1rem 0; gap:1rem; flex-wrap:wrap}
.site-footer a{color: var(--muted)}

@media (max-width: 760px){
  .nav-toggle{display:block}
  .primary-nav{display:none; position:absolute; top:56px; right:1rem; background:#0b0f1a; border:1px solid rgba(255,255,255,.08); border-radius:.75rem; padding:.5rem}
  .primary-nav.open{display:block}
  .primary-nav ul{flex-direction:column}
}

.slideshow{position:absolute; inset:0; z-index:-1; opacity:.25; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.slide{position:absolute; inset:0; background-size:cover; background-position:center; animation: fade 18s infinite}
.slide:nth-child(2){animation-delay:6s}
.slide:nth-child(3){animation-delay:12s}
@keyframes fade{0%{opacity:0}6%{opacity:1}33%{opacity:1}39%{opacity:0}100%{opacity:0}}

/* === Background video hooks (no file included) === */
.hero{ position: relative; overflow: hidden; }
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;           /* adjust brightness */
  pointer-events: none;   /* let clicks pass through */
  filter: saturate(1.05) contrast(1.05);
  z-index: 0;
}
.video-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.42));
  z-index: 1;
}
/* ensure hero content sits above video+overlay */
.hero .container, .hero .hero-copy, .hero .grid-2, .hero .hero-centered{
  position: relative;
  z-index: 2;
}

/* --- Header brand logo size --- */
.brand-logo { height: 40px; width: auto; display: block; }

/* --- Background video under hero text --- */
.hero { position: relative; overflow: hidden; }
.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;            /* adjust if needed */
  pointer-events: none;
  filter: saturate(1.05) contrast(1.05);
  z-index: 0;
}
.video-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.42));
  z-index: 1;
}
.hero-centered, .hero .container, .hero .hero-copy {
  position: relative;
  z-index: 2; /* keep text above video */
}

/* --- Standalone top video section --- */
.hero-video-wrap{ position: relative; width:100%; overflow:hidden; background: #000; }
.top-hero-video{
  display:block;
  width:100%;
  height: clamp(320px, 68vh, 760px); /* responsive height */
  object-fit: cover;
}

/* Existing hero content (below video) */
.brand-logo { height: 40px; width: auto; display: block; }

.hero-content-only{ position: relative; overflow: hidden; }
.hero-centered, .hero .container, .hero .hero-copy { position: relative; z-index: 2; }