:root{
  --bg: #0F120E;
  --panel: #171B14;
  --panel-2: #1E241A;
  --stencil: #E7E3D3;
  --stencil-dim: #A9A794;
  --olive: #4B5320;
  --olive-light: #6B7A2E;
  --hazard: #7FA05C;
  --hazard-bright: #A3C285;
  --hazard-dim: #384A2D;
  --red-tag: #8B3A3A;
  --line: rgba(231,227,211,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--stencil);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(75,83,32,0.12), transparent 40%),
    radial-gradient(circle at 90% 60%, rgba(232,89,12,0.06), transparent 45%);
}
.stencil{ font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.03em; }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

.hazard-rule{
  height:10px;
  background: repeating-linear-gradient(135deg, var(--hazard) 0 18px, #171B14 18px 36px);
  opacity:0.9;
}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,18,14,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  position:relative;
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{ height:60px; width:auto; border-radius:2px; }
.brand-sub{ font-size:10px; color:var(--stencil-dim); letter-spacing:0.18em; margin-top:2px;}
nav ul{ list-style:none; display:flex; gap:32px; }
nav a{ text-decoration:none; font-size:13px; letter-spacing:0.12em; color:var(--stencil-dim); transition:color .15s;}
nav a:hover, nav a:focus-visible{ color:var(--hazard); }
nav a.active{ color:var(--hazard); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--stencil); display:block; }
.nav-right{ display:flex; align-items:center; gap:14px; }

.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-grid{
  max-width:1180px; margin:0 auto; padding:88px 24px 72px;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em;
  color:var(--hazard); border:1px solid var(--hazard-dim); padding:5px 10px; border-radius:2px;
  margin-bottom:22px;
}
.eyebrow::before{ content:"●"; font-size:8px; }
h1{ font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.02; font-weight:700; margin-bottom:22px; }
h1 span{ color:var(--hazard); }
.hero p.lead{ font-size:17px; color:var(--stencil-dim); max-width:46ch; margin-bottom:34px; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px; border-radius:2px; text-decoration:none;
  font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:500; transition:transform .15s, background .15s;
}
.btn-primary{ background:var(--hazard); color:#0E1309; }
.btn-primary:hover, .btn-primary:focus-visible{ transform:translateY(-1px); background:var(--hazard-bright); }
.btn-ghost{ border:1px solid var(--line); color:var(--stencil); }
.btn-ghost:hover, .btn-ghost:focus-visible{ border-color:var(--stencil-dim); }

.hero-plate{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:22px; position:relative; }
.hero-plate img{ border-radius:2px; width:100%; object-fit:cover; }
.plate-tag{
  position:absolute; top:-12px; left:22px; background:var(--hazard); color:#0E1309;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  padding:4px 10px; letter-spacing:0.08em; border-radius:2px;
}
.plate-caption{ margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--stencil-dim); display:flex; justify-content:space-between;}

section{ max-width:1180px; margin:0 auto; padding:88px 24px; }
.section-head{ margin-bottom:48px; max-width:60ch; }
.kicker{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--olive-light); letter-spacing:0.16em; margin-bottom:10px;}
h2{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; }
.section-head p{ color:var(--stencil-dim); margin-top:14px; font-size:15.5px; }

.arsenal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.spec-card{ background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; }
.spec-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0b0d09;}
.spec-img img{ width:100%; height:100%; object-fit:cover; }
.spec-code{
  position:absolute; top:14px; right:14px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--stencil);
  background:rgba(15,18,14,0.8); border:1px solid var(--line); padding:4px 9px; border-radius:2px;
}
.spec-body{ padding:26px; display:flex; flex-direction:column; gap:16px; flex:1; }
.spec-title-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.spec-title{ font-family:'Oswald',sans-serif; font-size:22px; font-weight:600; letter-spacing:0.01em; }
.spec-price{ font-family:'JetBrains Mono',monospace; color:var(--hazard); font-size:14px; white-space:nowrap;}
.spec-tagline{ color:var(--stencil-dim); font-size:14px; }
.spec-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--stencil-dim); border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); padding:14px 0; }
.spec-list li strong{ color:var(--stencil); display:block; font-size:12px; }
.spec-actions{ display:flex; gap:10px; margin-top:auto; flex-wrap:wrap; }
.spec-actions .btn{ padding:11px 16px; font-size:12.5px; flex:1; justify-content:center; }
.variant-swatches{ display:flex; gap:8px; align-items:center; }
.swatch{ width:14px; height:14px; border-radius:50%; border:1px solid var(--line); }

.roadmap-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.roadmap-item{ display:grid; grid-template-columns: 90px 1fr 140px; gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.roadmap-item .stat{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--red-tag); border:1px solid var(--red-tag); padding:4px 8px; border-radius:2px; text-align:center; letter-spacing:0.06em; }
.roadmap-item h3{ font-family:'Oswald',sans-serif; font-size:17px; font-weight:500; letter-spacing:0.02em; }
.roadmap-item p{ font-size:13px; color:var(--stencil-dim); margin-top:4px; }
.roadmap-item .stage{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--stencil-dim); text-align:right;}

.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about-copy p{ color:var(--stencil-dim); margin-bottom:16px; font-size:15.5px; }
.about-copy p strong{ color:var(--stencil); }
.stat-row{ display:flex; gap:32px; margin-top:28px; flex-wrap:wrap; }
.stat-block .num{ font-family:'Oswald',sans-serif; font-size:32px; font-weight:700; color:var(--hazard); }
.stat-block .lbl{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--stencil-dim); letter-spacing:0.08em; }
.about-img{ border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.about-img img{ width:100%; height:100%; object-fit:cover; }

.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.video-embed{ background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; }
.video-frame iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.video-label{ padding:14px 16px; font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.03em; color:var(--stencil-dim); border-top:1px dashed var(--line); }

.promo-banner{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--panel-2); border:1px solid var(--hazard-dim); border-radius:4px;
  padding:16px 22px; margin-bottom:36px;
}
.promo-banner .promo-tag{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em;
  background:var(--hazard); color:#0E1309; padding:4px 10px; border-radius:2px; white-space:nowrap;
}
.promo-banner p{ font-size:14px; color:var(--stencil); margin:0; }
.promo-banner p strong{ color:var(--hazard); }

/* Cart icon in header */
.cart-link{ position:relative; display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--stencil); font-size:13px; letter-spacing:0.08em; }
.cart-badge{ display:none; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--hazard); color:#0E1309; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; }

.warranty-badge{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em;
  border:1px solid var(--hazard-dim); color:var(--hazard); padding:5px 10px; border-radius:2px;
}

.footer-socials{ display:flex; justify-content:center; gap:22px; margin-bottom:16px; flex-wrap:wrap; }
.footer-socials a{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.06em; color:var(--stencil); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.footer-socials a:hover{ color:var(--hazard); border-color:var(--hazard); }

.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
  text-decoration:none; transition:transform .15s;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:28px; height:28px; }
@media (max-width:600px){
  .wa-float{ width:50px; height:50px; bottom:16px; right:16px; }
  .wa-float svg{ width:25px; height:25px; }
}

/* Color selector on product cards */
.color-select-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.color-select-row label{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--stencil-dim); letter-spacing:0.06em; }
.color-select-row select{
  background:var(--bg); color:var(--stencil); border:1px solid var(--line); border-radius:2px;
  padding:8px 10px; font-family:'Inter',sans-serif; font-size:13px;
}
.qty-row{ display:flex; align-items:center; gap:10px; }
.qty-row button{
  width:30px; height:30px; border-radius:2px; border:1px solid var(--line); background:var(--bg);
  color:var(--stencil); font-size:16px; cursor:pointer;
}
.qty-row span{ font-family:'JetBrains Mono',monospace; min-width:20px; text-align:center; }

/* Custom order banner within a product card */
.custom-banner{
  background:var(--bg); border:1px dashed var(--olive-light); border-radius:3px;
  padding:12px 14px; display:flex; flex-direction:column; gap:6px;
}
.custom-banner .custom-head{ display:flex; justify-content:space-between; align-items:baseline; }
.custom-banner .custom-head strong{ font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.02em; text-transform:uppercase; }
.custom-banner .custom-head span{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--hazard); }
.custom-banner p{ font-size:12.5px; color:var(--stencil-dim); }
.custom-banner a{ align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:12px; text-decoration:underline; color:var(--stencil); }

/* Checkout page */
.cart-table{ width:100%; border-collapse:collapse; margin-bottom:24px; }
.cart-table th{ text-align:left; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--stencil-dim); letter-spacing:0.08em; border-bottom:1px solid var(--line); padding:0 0 12px; }
.cart-table td{ padding:16px 0; border-bottom:1px solid var(--line); vertical-align:middle; font-size:14px; }
.cart-item-name{ font-family:'Oswald',sans-serif; letter-spacing:0.01em; }
.cart-item-color{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--stencil-dim); }
.cart-remove{ color:var(--red-tag); font-family:'JetBrains Mono',monospace; font-size:11px; text-decoration:underline; background:none; border:none; cursor:pointer; }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--stencil-dim); }
.summary-panel{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:24px; max-width:420px; margin-left:auto; }
.summary-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:14px; }
.summary-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:14px; font-family:'Oswald',sans-serif; font-size:18px; font-weight:600; }
.summary-row.discount{ color:var(--hazard); }
.checkout-form{ display:flex; flex-direction:column; gap:14px; margin:24px 0; }
.checkout-form label{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--stencil-dim); letter-spacing:0.06em; display:block; margin-bottom:6px; }
.checkout-form input, .checkout-form textarea{
  width:100%; background:var(--bg); color:var(--stencil); border:1px solid var(--line); border-radius:2px;
  padding:11px 12px; font-family:'Inter',sans-serif; font-size:14px;
}
.checkout-form textarea{ min-height:70px; resize:vertical; }
.checkout-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .checkout-two-col{ grid-template-columns:1fr; } }

.timeline{ border-top:1px solid var(--line); margin-top:20px; }
.timeline-item{ display:grid; grid-template-columns:130px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); }
.timeline-item .date{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--hazard); }
.timeline-item h3{ font-family:'Oswald',sans-serif; font-size:16px; font-weight:500; margin-bottom:6px; letter-spacing:0.02em;}
.timeline-item p{ color:var(--stencil-dim); font-size:14px; }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px; }
.value-card{ background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:24px; }
.value-card .idx{ font-family:'JetBrains Mono',monospace; color:var(--hazard-dim); font-size:12px; margin-bottom:10px; }
.value-card h3{ font-family:'Oswald',sans-serif; font-size:16px; margin-bottom:8px; letter-spacing:0.02em;}
.value-card p{ color:var(--stencil-dim); font-size:13.5px; }

.comms{
  background:var(--panel-2); border:1px solid var(--line); border-radius:4px;
  padding:56px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
}
.comms h2{ margin-bottom:12px; }
.comms p{ color:var(--stencil-dim); font-size:15px; max-width:48ch; }
.comms-panel{ background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:24px; }
.comms-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--line); font-family:'JetBrains Mono',monospace; font-size:12.5px;}
.comms-row:last-child{ border-bottom:none; }
.comms-row span:first-child{ color:var(--stencil-dim); }
.comms-panel .btn{ width:100%; justify-content:center; margin-top:18px; }

footer{ border-top:1px solid var(--line); padding:32px 24px; text-align:center; }
footer p{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--stencil-dim); letter-spacing:0.04em;}
footer .disclaimer{ max-width:60ch; margin:10px auto 0; font-size:11px; opacity:0.7; }

.page-hero{ padding:64px 24px 20px; max-width:1180px; margin:0 auto; }
.page-hero .kicker{ margin-bottom:14px; }
.page-hero p{ color:var(--stencil-dim); font-size:15.5px; max-width:60ch; margin-top:14px; }

.faq-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.faq-item{ padding:26px 0; border-bottom:1px solid var(--line); }
.faq-item h3{ font-family:'Oswald',sans-serif; font-size:17px; font-weight:500; letter-spacing:0.02em; margin-bottom:10px; }
.faq-item p{ color:var(--stencil-dim); font-size:14.5px; }
.faq-item p a{ text-decoration:underline; }

.notify-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; max-width:420px; }
.notify-form input{
  flex:1; min-width:180px; background:var(--bg); color:var(--stencil); border:1px solid var(--line);
  border-radius:2px; padding:11px 12px; font-family:'Inter',sans-serif; font-size:14px;
}
.notify-form button{
  border:none; cursor:pointer; background:var(--hazard); color:#0E1309;
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:0 20px; border-radius:2px;
}
.notify-status{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--hazard); margin-top:10px; display:none; }

.review-badge{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:12px 18px;
}
.review-badge .stars{ color:#F5C518; font-size:15px; letter-spacing:1px; }
.review-badge .review-text{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--stencil); }
.review-badge .review-text span{ color:var(--stencil-dim); }

@media (max-width: 900px){
  .hero-grid, .about-grid, .comms{ grid-template-columns:1fr; }
  .about-img{ order:-1; }
  .arsenal-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr; }
  nav ul{ display:none; }
  .nav-toggle{ display:flex; }
  nav{ position:absolute; top:100%; left:0; right:0; background:var(--panel); border-bottom:1px solid var(--line); z-index:49; }
  nav.nav-open ul{ display:flex; flex-direction:column; gap:0; padding:8px 24px 16px; }
  nav ul li{ border-top:1px solid var(--line); }
  nav ul li:first-child{ border-top:none; }
  nav a{ display:block; padding:14px 0; font-size:14px; }
  .roadmap-item{ grid-template-columns: 70px 1fr; }
  .roadmap-item .stage{ display:none; }
  .timeline-item{ grid-template-columns:1fr; gap:6px; }
  .comms{ padding:32px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}