/* WW2 Duel landing page. Olive drab, khaki and paper; stencil headings (Black Ops One), typewriter accents (Special Elite). */
@font-face { font-family: "Black Ops One"; src: url("../fonts/BlackOpsOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("../fonts/SpecialElite-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --ink: #1d1f16;
  --olive: #3a3f2b;
  --olive-2: #4b5236;
  --drab: #2a2d20;
  --khaki: #c9b37e;
  --khaki-2: #e3d3a6;
  --paper: #efe6cf;
  --paper-2: #e4d8b8;
  --red: #9c2f22;
  --text: #2b2a22;
  --muted: #6b6650;
  --radius: 6px;
  --stencil: "Black Ops One", Impact, "Arial Black", sans-serif;
  --type: "Special Elite", "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.55 var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(255,255,255,.35), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 2px, transparent 2px 4px),
    var(--paper);
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---- top bar ---- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: rgba(29, 31, 22, .94);
  color: var(--khaki-2);
  border-bottom: 3px solid var(--khaki);
  backdrop-filter: blur(6px);
}
.brand { font: 24px var(--stencil); letter-spacing: 2px; text-decoration: none; color: var(--khaki-2); }
.brand .star { color: var(--khaki); }
.bar nav { display: flex; gap: 22px; margin-left: auto; font-family: var(--type); }
.bar nav a { text-decoration: none; opacity: .85; }
.bar nav a:hover { opacity: 1; text-decoration: underline; }
.lang { display: flex; border: 1px solid var(--khaki); border-radius: var(--radius); overflow: hidden; }
.lang button {
  background: transparent; color: var(--khaki-2); border: 0; padding: 4px 10px; cursor: pointer;
  font: 14px var(--stencil); letter-spacing: 1px;
}
.lang button.on { background: var(--khaki); color: var(--ink); }

/* ---- hero ---- */
.hero { position: relative; min-height: min(86vh, 760px); display: grid; align-items: end; overflow: hidden; color: var(--paper); }
.hero-bg {
  position: absolute; inset: 0;
  background: url("../img/hero.jpg") center 40% / cover no-repeat;
  filter: sepia(.25) saturate(.9) contrast(1.05);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,22,15,.15) 0%, rgba(20,22,15,.35) 45%, rgba(20,22,15,.92) 100%),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.45) 100%);
}
.hero-inner { position: relative; z-index: 1; padding: 0 clamp(16px, 6vw, 96px) clamp(40px, 8vh, 88px); max-width: 980px; }
.hero h1 {
  margin: 4px 0 8px;
  font: clamp(52px, 9vw, 124px)/0.95 var(--stencil);
  letter-spacing: clamp(2px, .5vw, 7px);
  white-space: nowrap;
  color: var(--khaki-2);
  text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 40px rgba(0,0,0,.4);
}
.stamp {
  display: inline-block; margin: 0;
  font: 15px var(--type); letter-spacing: 2px; text-transform: uppercase;
  color: #f3d9c9; border: 2px solid #c5654f; padding: 3px 10px; transform: rotate(-2deg);
  background: rgba(156, 47, 34, .35);
}
.tagline { font: clamp(18px, 2.2vw, 24px)/1.4 var(--type); max-width: 640px; margin: 0 0 26px; color: #efe6cf; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fine { font-size: 14px; color: var(--muted); }
.hero .fine { color: #cfc6ad; margin-top: 14px; }
.center { text-align: center; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 13px 24px; border-radius: var(--radius); cursor: pointer; text-decoration: none;
  font: 18px var(--stencil); letter-spacing: 1.5px; text-transform: uppercase;
  border: 2px solid transparent; transition: transform .08s ease, filter .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--khaki); color: var(--ink); border-color: #8f7d4f; box-shadow: 0 3px 0 #6f6140; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; color: var(--khaki-2); border-color: var(--khaki); }
.section .btn.ghost { color: var(--olive); border-color: var(--olive-2); }
.btn.off { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.6); }

/* ---- sections ---- */
.section { padding: clamp(48px, 8vw, 96px) clamp(16px, 6vw, 96px); }
.section.alt { background: rgba(58, 63, 43, .08); border-top: 1px dashed #b9ab84; border-bottom: 1px dashed #b9ab84; }
.section.narrow { padding-left: max(16px, calc(50% - 440px)); padding-right: max(16px, calc(50% - 440px)); }
.section h2 { font: clamp(30px, 4vw, 44px) var(--stencil); letter-spacing: 2px; color: var(--olive); margin: 0 0 10px; }
.lead { font: 19px/1.5 var(--type); max-width: 760px; margin: 0 0 32px; color: #4a4636; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.card {
  position: relative; padding: 26px 24px 22px; border-radius: var(--radius);
  background: linear-gradient(180deg, #f6efdc, #eadfc0);
  border: 1px solid #c8b98e; box-shadow: 0 1px 0 #fff inset, 0 8px 22px rgba(43, 42, 34, .12);
}
.card.detected { outline: 3px solid var(--olive-2); outline-offset: 3px; }
.card.detected::before {
  content: attr(data-badge); position: absolute; top: -12px; right: 16px;
  background: var(--olive); color: var(--khaki-2); font: 12px var(--type); letter-spacing: 1px; padding: 3px 8px; border-radius: 3px;
}
.card h3 { font: 26px var(--stencil); margin: 6px 0 2px; color: var(--drab); letter-spacing: 1px; }
.card .meta { margin: 0 0 16px; font: 15px var(--type); color: var(--muted); }
.card .btn { width: 100%; }
.card .note { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.os-icon svg { width: 40px; height: 40px; fill: var(--olive); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px 34px; }
.feature h3 { font: 21px var(--stencil); color: var(--olive); margin: 0 0 6px; letter-spacing: 1px; }
.feature h3::before { content: "■ "; color: var(--red); font-size: 14px; vertical-align: 3px; }
.feature p { margin: 0; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }
.gallery figure {
  margin: 0; background: #fbf7ea; padding: 10px 10px 4px; border: 1px solid #d3c59c;
  box-shadow: 0 6px 18px rgba(0,0,0,.14); transform: rotate(-.4deg);
}
.gallery figure:nth-child(even) { transform: rotate(.5deg); }
.gallery img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; filter: sepia(.12); }
.gallery figcaption { font: 15px var(--type); color: #4a4636; padding: 8px 2px; }

.reqs { margin: 0; padding-left: 20px; }
.reqs li { margin: 6px 0; }

.foot { background: var(--drab); color: #cfc6ad; padding: 28px clamp(16px, 6vw, 96px); font-family: var(--type); }
.foot p { margin: 4px 0; }
.foot .fine { color: #9d967d; }

@media (max-width: 720px) {
  .bar nav { display: none; }
  .lang { margin-left: auto; }
}