:root{
  --bg-deep:#050810;
  --bg-panel:#0a0f1a;
  --bg-panel-2:#0f1524;
  --line:#1c2438;
  --blue:#0094db;        /* exact brand blue, sampled from the BigDeeper logo */
  --blue-light:#4dc6ff;
  --blue-dim:#083a55;
  --magenta:#ff2f92;      /* DJ-rig accent — used sparingly */
  --amber:#ffb020;
  --text:#eef2f8;
  --text-mid:#9aa8bd;
  --text-dim:#57647a;
  --radius:2px;
  --header-h:66px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--text);
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  line-height:1.5;
}
h1,h2,h3,.display{
  font-family:'Arial Black','Helvetica Neue',Arial,sans-serif;
  font-weight:900;
  letter-spacing:-0.01em;
  margin:0;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}

/* ---- DJ rig beam field: three-colour sweep, the one bold signature moment ---- */
.beamfield{display:none;}

/* ---- DJ light rig: realistic spotlight cones with haze, colour driven by --dj-primary ---- */
:root{ --dj-primary:#0094db; }
.rig{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(0,0,0,0), transparent 60%);
}
.rig .haze{
  position:absolute; left:10%; right:10%; top:30%; height:45%;
  background:radial-gradient(ellipse 60% 100% at 50% 50%, color-mix(in srgb, var(--dj-primary) 14%, transparent), transparent 70%);
  filter:blur(30px);
  transition:background 0.35s ease;
}
.cone{
  position:absolute; top:-6%; width:170px; height:118%;
  transform-origin:top center;
  animation-name:conesway; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate;
  filter:hue-rotate(var(--hue,0deg));
}
.cone .beam-shape{
  position:absolute; inset:0;
  clip-path:polygon(49% 0%, 51% 0%, 100% 100%, 0% 100%);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--dj-primary) 85%, white 15%) 0%, var(--dj-primary) 22%, transparent 78%);
  opacity:0.30;
  mix-blend-mode:screen;
  filter:blur(2px);
  transition:background 0.35s ease;
}
.cone .beam-core{
  position:absolute; left:50%; top:0; width:2px; height:55%;
  background:linear-gradient(to bottom, #fff, var(--dj-primary), transparent);
  transform:translateX(-50%);
  opacity:0.6; mix-blend-mode:screen; filter:blur(0.5px);
  transition:background 0.35s ease;
}
@keyframes conesway{
  from{ transform:rotate(var(--rot-a,-6deg)); }
  to{ transform:rotate(var(--rot-b,6deg)); }
}
@media (prefers-reduced-motion: reduce){
  .cone{ animation:none; }
}

/* ---- Light console ---- */
.light-console{ position:fixed; right:18px; bottom:18px; z-index:70; }
.console-toggle{
  display:flex; align-items:center; gap:9px;
  background:rgba(10,15,26,0.9); border:1px solid var(--line); color:var(--text);
  padding:11px 16px; border-radius:24px; font-size:13px; font-weight:600;
  backdrop-filter:blur(8px); box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
.console-dot{ width:10px; height:10px; border-radius:50%; background:var(--dj-primary); box-shadow:0 0 10px var(--dj-primary); flex:none; }
.console-panel{
  position:absolute; right:0; bottom:56px; width:250px;
  background:rgba(8,12,20,0.97); border:1px solid var(--line); border-radius:8px;
  padding:16px; box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.console-tabs{ display:flex; gap:4px; margin-bottom:14px; background:var(--bg-panel-2); border-radius:6px; padding:3px; }
.ctab{ flex:1; background:none; border:none; color:var(--text-mid); font-size:12px; padding:7px 0; border-radius:5px; font-weight:600; }
.ctab.active{ background:var(--blue); color:#04121c; }
.ctab-body{ display:none; }
.ctab-body.active{ display:block; }
.slide-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-mid); margin-bottom:10px; }
.slide-row input[type="range"]{ flex:1; accent-color:var(--dj-primary); }
.slide-row span{ width:28px; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }
.custom-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.custom-row input[type="color"]{ width:38px; height:38px; border:1px solid var(--line); border-radius:6px; background:none; padding:0; }
.custom-hex{ font-size:13px; color:var(--text-mid); font-variant-numeric:tabular-nums; }
.swatch-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.swatch-row button{ --sw:#fff; width:100%; aspect-ratio:1; border-radius:50%; border:2px solid var(--line); background:var(--sw); padding:0; }
.swatch-row button:hover{ border-color:var(--text); }
.console-preview{ display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--text-mid); }
.preview-swatch{ width:22px; height:22px; border-radius:5px; background:var(--dj-primary); flex:none; box-shadow:0 0 10px var(--dj-primary); }

@media(max-width:520px){
  .light-console{ right:12px; bottom:12px; }
  .console-panel{ width:calc(100vw - 24px); right:-6px; }
  .console-toggle .console-label{ display:none; }
}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:2;}

/* NAV */
header{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--line);
  height:var(--header-h);
}
/* backdrop-filter lives on a ::before, not on header itself — putting it
   directly on header would create a CSS containing block that traps the
   mobile nav's position:fixed panel inside header's own tiny box. */
header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(5,8,16,0.92);
  backdrop-filter:blur(10px);
}
.navrow{display:flex; align-items:center; justify-content:space-between; padding:12px 0; height:100%;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:42px; width:42px; border-radius:6px;}
.brand-name{font-size:15px; letter-spacing:0.05em; color:var(--text-mid); line-height:1.15;}
.brand-name b{color:var(--text); display:block; font-size:19px; letter-spacing:0.02em;}
nav{display:flex; gap:4px; align-items:center;}
nav a{
  color:var(--text-mid); padding:9px 14px; font-size:14px; border-radius:var(--radius);
  transition:color .15s, background .15s;
}
nav a:hover{color:var(--text);}
nav a.active{color:var(--text); background:var(--bg-panel-2);}
.nav-cta{background:var(--blue); color:#04121c !important; font-weight:700; padding:9px 18px !important;}
.nav-cta:hover{background:var(--blue-light) !important;}

.menu-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:42px; height:38px; align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.menu-toggle span{display:block; width:18px; height:2px; background:var(--text);}

/* HERO */
.hero{padding:88px 0 68px; position:relative;}
.kicker{color:var(--blue-light); font-size:13px; letter-spacing:0.14em; margin-bottom:18px;}
.hero h1{font-size:clamp(36px,6vw,74px); line-height:0.98; max-width:820px;}
.hero h1 .accent{color:var(--blue-light);}
.hero h1 .accent2{color:var(--magenta);}
.hero p.lead{max-width:560px; color:var(--text-mid); font-size:17px; margin-top:24px;}
.hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.btn{
  padding:14px 26px; border-radius:var(--radius); font-size:14px; font-weight:700;
  letter-spacing:0.02em; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{background:var(--blue); color:#04121c;}
.btn-primary:hover{background:var(--blue-light);}
.btn-ghost{border-color:var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--blue);}

.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:60px;
}
.stat{background:var(--bg-deep); padding:20px 18px;}
.stat .num{font-size:28px; font-weight:900; color:var(--blue-light);}
.stat .lbl{color:var(--text-dim); font-size:12px; margin-top:4px;}

/* SECTION HEADS */
.sec-head{padding:60px 0 8px;}
.sec-eyebrow{color:var(--amber); font-size:13px; letter-spacing:0.12em; margin-bottom:10px;}
.sec-head h2{font-size:clamp(26px,4vw,40px); max-width:640px;}
.sec-head p{color:var(--text-mid); max-width:560px; margin-top:14px; font-size:15.5px;}

/* ABOUT */
.about{padding:20px 0 40px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px;}
.about p{color:var(--text-mid); font-size:15.5px; margin-bottom:14px;}
.about .quote{border-left:2px solid var(--blue); padding-left:20px; color:var(--text); font-size:17px; margin-top:20px;}
.about-cats{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.about-cats div{background:var(--bg-panel); padding:16px 20px; display:flex; justify-content:space-between; font-size:14px; color:var(--text-mid);}
.about-cats div b{color:var(--text); font-weight:600;}

/* VISIT / SHOWROOM */
.visit{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);
  margin:32px 0 80px;
}
.visit > div{background:var(--bg-panel); padding:32px;}
.visit h3{font-size:20px; margin-bottom:14px;}
.visit p{color:var(--text-mid); font-size:14.5px; margin-bottom:8px;}
.visit address{font-style:normal; color:var(--text); font-size:15px; line-height:1.6; margin-bottom:16px;}
.visit .btn{margin-top:6px;}

/* CATEGORY GRID (home teaser) */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:30px 0 76px;}
.cat-card{background:var(--bg-panel); padding:26px 22px; min-height:148px; display:flex; flex-direction:column; justify-content:space-between; transition:background .15s, box-shadow .15s; border-bottom:2px solid transparent;}
.cat-card:hover{background:var(--bg-panel-2); border-bottom-color:var(--blue);}
.cat-card h3{font-size:19px;}
.cat-card .count{color:var(--text-dim); font-size:13px; margin-top:6px;}
.cat-card .arrow{color:var(--blue-light); font-size:13px; margin-top:16px;}

/* PRODUCTS — sticky sub-header with filters */
.products-subhead{
  position:sticky; top:var(--header-h); z-index:40;
  background:rgba(5,8,16,0.96); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  margin:0 -28px; padding:0 28px;
}
.filter-row{
  display:flex; gap:8px; padding:16px 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  flex-wrap:nowrap;
}
.filter-row::-webkit-scrollbar{display:none;}
.chip{
  padding:9px 16px; border:1px solid var(--line); border-radius:20px; font-size:13px; color:var(--text-mid);
  background:var(--bg-panel); white-space:nowrap; flex:none;
}
.chip.active{background:var(--blue); color:#04121c; border-color:var(--blue); font-weight:700;}
.chip:hover:not(.active){border-color:var(--blue);}

.prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:22px 0 76px;}
.prod-card{background:var(--bg-panel); padding:20px; min-height:118px; display:flex; flex-direction:column; justify-content:space-between;}
.prod-card .swatch{width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--blue-light), var(--blue-dim)); margin-bottom:15px;}
.prod-card h4{font-size:14px; font-weight:700; line-height:1.35;}
.prod-card .tag{color:var(--text-dim); font-size:11.5px; margin-top:8px; letter-spacing:0.04em;}

/* FORM */
.form-shell{display:grid; grid-template-columns:1fr 1.3fr; gap:52px; padding:16px 0 96px; align-items:start;}
.form-side h2{font-size:clamp(24px,3.6vw,36px); max-width:380px;}
.form-side p{color:var(--text-mid); margin-top:16px; font-size:15px; max-width:380px;}
.form-side .contact{margin-top:32px; border-top:1px solid var(--line); padding-top:22px;}
.form-side .contact div{margin-bottom:10px; font-size:14px; color:var(--text-mid);}
.form-side .contact b{color:var(--text); font-weight:600;}

.card{background:var(--bg-panel); border:1px solid var(--line); padding:32px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:12.5px; color:var(--text-mid); margin-bottom:7px; letter-spacing:0.02em;}
.field input, .field select, .field textarea{
  width:100%; background:var(--bg-deep); border:1px solid var(--line); color:var(--text);
  padding:12px 14px; font-size:16px; border-radius:var(--radius); font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue);}
.field textarea{resize:vertical; min-height:80px;}
.check-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.check-item{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-mid);}
.check-item input{width:auto;}
.submit-row{margin-top:8px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.form-msg{font-size:13.5px; padding:14px 16px; border-radius:var(--radius); margin-bottom:20px;}
.form-msg.ok{background:rgba(89,209,138,0.1); color:#59d18a; border:1px solid rgba(89,209,138,0.3);}
.form-msg.err{background:rgba(255,109,109,0.1); color:#ff6d6d; border:1px solid rgba(255,109,109,0.3);}
.hp-field{position:absolute; left:-9999px; top:-9999px;}

/* ADMIN */
.dash-gate{max-width:400px; margin:100px auto; text-align:center;}
.dash-gate img{height:56px; width:56px; margin:0 auto 22px; border-radius:8px;}
.dash-gate h2{font-size:24px; margin-bottom:8px;}
.dash-gate p{color:var(--text-mid); font-size:14px; margin-bottom:24px;}
.dash-gate .field{text-align:left;}
.dash-top{display:flex; justify-content:space-between; align-items:flex-end; padding:40px 0 24px; flex-wrap:wrap; gap:20px;}
.dash-stats{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:26px; flex-wrap:wrap;}
.dash-stats .s{background:var(--bg-panel); padding:16px 24px; flex:1; min-width:140px;}
.dash-stats .s .n{font-size:24px; font-weight:900; color:var(--blue-light);}
.dash-stats .s .l{font-size:12px; color:var(--text-dim); margin-top:2px;}
.dash-actions{display:flex; gap:10px; flex-wrap:wrap;}
.table-wrap{border:1px solid var(--line); overflow-x:auto; margin-bottom:96px;}
table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:960px;}
th{background:var(--bg-panel-2); text-align:left; padding:12px 16px; color:var(--text-mid); font-weight:600; font-size:11.5px; letter-spacing:0.06em; border-bottom:1px solid var(--line);}
td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--text-mid); vertical-align:top;}
tr:last-child td{border-bottom:none;}
td.name{color:var(--text); font-weight:600;}
.pill{display:inline-block; padding:3px 9px; font-size:11px; border-radius:12px; background:var(--blue-dim); color:#a9d8f5; margin:2px 3px 2px 0;}
.empty-state{padding:76px 20px; text-align:center; color:var(--text-dim);}
.topbar-admin{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px;}
.topbar-admin .who{font-size:13px; color:var(--text-dim);}

footer{border-top:1px solid var(--line); padding:36px 0 56px; margin-top:36px; position:relative; z-index:2;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--text-dim);}
footer address{font-style:normal;}

/* ---- Tablet / Mobile ---- */
@media(max-width:840px){
  .about{grid-template-columns:1fr;}
  .visit{grid-template-columns:1fr;}
  .cat-grid{grid-template-columns:1fr 1fr;}
  .form-shell{grid-template-columns:1fr;}
  .grid2, .check-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr 1fr;}

  .menu-toggle{display:flex;}
  nav{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:49;
    background:rgba(5,8,16,0.98); backdrop-filter:blur(10px);
    flex-direction:column; align-items:stretch; gap:2px; padding:18px;
    display:none; overflow-y:auto;
  }
  nav.open{display:flex;}
  nav a{padding:16px; font-size:16px; border-bottom:1px solid var(--line); border-radius:0;}
  .nav-cta{margin-top:10px; text-align:center; justify-content:center;}

  .products-subhead{margin:0 -18px; padding:0 18px;}
}
@media(max-width:520px){
  .cat-grid{grid-template-columns:1fr;}
  .card{padding:22px;}
  .wrap{padding:0 18px;}
}