:root {
  --bg: #090b08;
  --panel: #11160f;
  --panel-2: #171e14;
  --text: #f3f0e8;
  --muted: #b7b2a4;
  --line: rgba(255,255,255,.12);
  --accent: #b8ff5d;
  --accent-2: #d5a85b;
  --danger: #ff6b5d;
  --shadow: 0 28px 80px rgba(0,0,0,.38);
  --radius: 22px;
  --container: 1180px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 10% 5%, rgba(184,255,93,.18), transparent 28rem),
    radial-gradient(circle at 90% 0%, rgba(213,168,91,.14), transparent 24rem),
    linear-gradient(180deg, #080a07 0%, #0e120d 55%, #080a07 100%);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.skip-link { position:absolute; left:-999px; top:8px; padding:10px; background:var(--accent); color:#111; z-index:999; }
.skip-link:focus { left: 8px; }
.site-header { position: sticky; top:0; z-index:30; backdrop-filter: blur(18px); background: rgba(9,11,8,.78); border-bottom:1px solid var(--line); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand strong { display:block; letter-spacing:.02em; font-size:1.05rem; }
.brand small { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; }
.site-nav { display:flex; align-items:center; gap:10px; }
.site-nav a { color:var(--muted); padding:10px 12px; border-radius:999px; transition:.2s ease; }
.site-nav a:hover, .site-nav .nav-cta { color:var(--text); background:rgba(255,255,255,.08); }
.nav-toggle { display:none; background:transparent; color:var(--text); border:1px solid var(--line); border-radius:999px; padding:9px 13px; }
.hero { padding: 72px 0 42px; position:relative; overflow:hidden; }
.hero:before { content:""; position:absolute; inset:40px 0 auto auto; width:48vw; height:48vw; background:linear-gradient(135deg, rgba(184,255,93,.10), rgba(213,168,91,.10)); border:1px solid var(--line); transform:rotate(12deg); border-radius:80px; filter:blur(.2px); opacity:.7; }
.hero-grid { position:relative; display:grid; grid-template-columns: minmax(0, 1.1fr) 420px; gap:42px; align-items:center; }
.eyebrow { margin:0 0 12px; color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-weight:800; font-size:.78rem; }
h1, h2, h3 { line-height:1.03; margin:0; letter-spacing:-.04em; }
h1 { font-size: clamp(3.2rem, 8vw, 7.7rem); max-width: 920px; }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
h3 { font-size:1.22rem; }
.lead { max-width: 700px; color:var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.32rem); margin:24px 0 0; }
.hero-actions, .dialog-actions, .social-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:999px; border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.06); font-weight:800; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); background:rgba(255,255,255,.1); }
.button.primary { background:var(--accent); color:#11160f; border-color:transparent; }
.button.ghost { background:transparent; }
.button.small { min-height:38px; padding:0 13px; font-size:.88rem; }
.button.disabled { opacity:.45; pointer-events:none; }
.trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:42px 0 0; }
.trust-row div { border:1px solid var(--line); border-radius:18px; padding:16px; background:rgba(255,255,255,.04); }
.trust-row dt { font-weight:900; }
.trust-row dd { margin:5px 0 0; color:var(--muted); font-size:.92rem; }
.hero-card { border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.hero-card:before { content:"TJ"; position:absolute; top:22px; right:24px; font-size:8rem; line-height:1; font-weight:1000; color:rgba(255,255,255,.045); letter-spacing:-.12em; }
.status-pill { align-self:flex-start; border:1px solid rgba(184,255,93,.3); color:var(--accent); padding:8px 12px; border-radius:999px; font-size:.88rem; margin-bottom:auto; background:rgba(184,255,93,.07); }
.status-pill span { display:inline-block; width:8px; height:8px; background:var(--accent); border-radius:50%; margin-right:7px; box-shadow:0 0 18px var(--accent); }
.hero-card p { color:var(--muted); }
.mini-stack { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.mini-stack span, .tag-row span { border:1px solid var(--line); background:rgba(255,255,255,.05); border-radius:999px; padding:7px 10px; color:var(--muted); font-size:.82rem; }
.notice { border:1px solid rgba(213,168,91,.35); background:rgba(213,168,91,.08); color:#efe4d0; border-radius:18px; padding:16px 18px; margin-top:16px; }
.section { padding:76px 0; }
.section-head { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.filter { border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.04); border-radius:999px; padding:9px 13px; cursor:pointer; }
.filter.active, .filter:hover { color:#10140e; background:var(--accent); border-color:transparent; }
.product-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.product-card { border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.product-image { width:100%; border:0; padding:0; position:relative; background:linear-gradient(135deg, #1a2116, #0e130d); cursor:pointer; aspect-ratio: 4/3; overflow:hidden; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.product-card:hover .product-image img { transform:scale(1.035); }
.badge { position:absolute; top:12px; left:12px; padding:7px 10px; border-radius:999px; background:rgba(0,0,0,.58); color:var(--accent); font-size:.78rem; font-weight:900; }
.badge.reserverad { color:var(--accent-2); }
.badge.sald { color:var(--danger); }
.product-body { padding:18px; }
.product-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:10px; }
.product-body p { color:var(--muted); font-size:.94rem; min-height:66px; }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; }
.product-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:space-between; }
.product-foot strong { font-size:1.12rem; }
.ad-slot { min-height:120px; border:1px dashed rgba(255,255,255,.2); border-radius:var(--radius); background:rgba(255,255,255,.035); display:flex; align-items:center; justify-content:center; text-align:center; padding:28px; color:var(--muted); }
.ad-slot span { display:block; color:var(--accent); font-weight:900; text-transform:uppercase; letter-spacing:.14em; }
.feature-band { background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:42px; }
.steps { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0; margin:0; }
.steps li { border:1px solid var(--line); border-radius:20px; padding:18px; background:rgba(255,255,255,.045); }
.steps span { color:var(--accent); font-weight:1000; }
.steps strong { display:block; margin-top:16px; }
.steps p, .muted { color:var(--muted); }
.social-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-card { border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:var(--radius); padding:28px; }
.muted-card { background:linear-gradient(135deg, rgba(184,255,93,.06), rgba(213,168,91,.05)); }
code { background:rgba(255,255,255,.08); padding:2px 6px; border-radius:7px; }
.site-footer { border-top:1px solid var(--line); padding:34px 0; color:var(--muted); }
.footer-grid { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.footer-grid nav { display:flex; gap:14px; }
.product-dialog { width:min(960px, calc(100% - 32px)); border:1px solid var(--line); border-radius:26px; background:var(--panel); color:var(--text); box-shadow:var(--shadow); padding:0; }
.product-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter: blur(6px); }
.dialog-close { position:absolute; top:12px; right:14px; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:rgba(0,0,0,.38); color:var(--text); font-size:1.7rem; cursor:pointer; z-index:2; }
.dialog-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap:0; }
.dialog-image { width:100%; height:100%; min-height:460px; object-fit:cover; background:#151b12; }
.dialog-grid > div { padding:44px; }
.dialog-price { font-size:1.7rem; color:var(--accent); font-weight:1000; }
.detail-list { padding-left:20px; color:var(--muted); }
.empty { grid-column:1/-1; color:var(--muted); }
@media (max-width: 980px) {
  .hero-grid, .steps-grid, .social-grid { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .hero-card { min-height:300px; }
  .trust-row { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .container { width:min(100% - 28px, var(--container)); }
  .nav-toggle { display:inline-flex; }
  .site-nav { display:none; position:absolute; left:14px; right:14px; top:70px; flex-direction:column; align-items:stretch; background:rgba(17,22,15,.98); border:1px solid var(--line); border-radius:18px; padding:10px; }
  .site-nav.open { display:flex; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .filters { justify-content:flex-start; }
  .product-grid, .steps { grid-template-columns:1fr; }
  .dialog-grid { grid-template-columns:1fr; }
  .dialog-image { min-height:260px; }
  .dialog-grid > div { padding:28px; }
  .footer-grid { align-items:flex-start; flex-direction:column; }
}

/* Version 2: military surplus refinement */
:root {
  --bg: #0b0d08;
  --panel: #171a10;
  --panel-2: #222719;
  --text: #f2ead8;
  --muted: #b8b09d;
  --line: rgba(242,234,216,.16);
  --accent: #d2b46f;
  --accent-2: #8ea15c;
  --danger: #d46b4c;
  --olive: #4b5730;
  --canvas: #c7b68a;
}
body {
  background:
    linear-gradient(135deg, rgba(75,87,48,.10) 0 18%, transparent 18% 32%, rgba(142,161,92,.07) 32% 49%, transparent 49% 67%, rgba(95,82,48,.10) 67% 100%),
    radial-gradient(circle at 12% 8%, rgba(210,180,111,.18), transparent 24rem),
    radial-gradient(circle at 86% 2%, rgba(142,161,92,.16), transparent 26rem),
    linear-gradient(180deg, #0b0d08 0%, #11140d 56%, #090b07 100%);
}
.site-header { background: rgba(13,15,10,.86); }
.brand img { filter: sepia(.22) saturate(.85); }
.brand small { color: var(--canvas); }
.language-switch { display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:rgba(255,255,255,.04); }
.language-switch button { border:0; color:var(--muted); background:transparent; border-radius:999px; padding:7px 10px; font-weight:900; cursor:pointer; }
.language-switch button.active { color:#12150d; background:var(--accent); }
.eyebrow { color:var(--accent); }
h1 { text-transform:uppercase; letter-spacing:-.055em; }
.hero:before {
  background:linear-gradient(135deg, rgba(75,87,48,.22), rgba(210,180,111,.10));
  border-style:dashed;
  opacity:.75;
}
.button.primary { background:var(--accent); color:#12150d; }
.button.ghost, .button { border-color:rgba(210,180,111,.22); }
.trust-row div, .contact-card, .steps li, .product-card, .hero-card {
  background:linear-gradient(180deg, rgba(242,234,216,.065), rgba(242,234,216,.025));
  border-color:rgba(210,180,111,.18);
}
.hero-card:before { content:"MIL"; color:rgba(210,180,111,.055); letter-spacing:-.08em; }
.status-pill { border-color:rgba(210,180,111,.38); color:var(--accent); background:rgba(210,180,111,.08); }
.status-pill span { background:var(--accent); box-shadow:0 0 18px var(--accent); }
.notice { border-color:rgba(210,180,111,.42); background:rgba(210,180,111,.095); }
.filter.active, .filter:hover { background:var(--accent); color:#12150d; }
.product-image { background:linear-gradient(135deg, #242a18, #11140d); }
.badge { color:var(--accent); border:1px solid rgba(210,180,111,.22); text-transform:uppercase; letter-spacing:.08em; }
.badge.available { color:#cfe7a0; }
.badge.reserved { color:var(--accent); }
.badge.sold { color:var(--danger); }
.product-meta { color:var(--canvas); }
.product-foot strong, .dialog-price { color:var(--accent); }
.feature-band { background:linear-gradient(180deg, rgba(75,87,48,.12), rgba(13,15,10,.12)); }
.ad-slot { border-color:rgba(210,180,111,.32); }
.ad-slot span, .steps span { color:var(--accent); }
.dialog-image { background:#222719; }
@media (max-width:720px) {
  .language-switch { align-self:flex-start; margin:4px 0; }
}