@import url("https://fonts.googleapis.com/css2?family=Bungee&family=IBM+Plex+Sans:wght@400;600&display=swap");

:root {
  --bg: #141a10;
  --bg-2: #0f140c;
  --panel: #1f2a19;
  --line: #2a3520;
  --line-2: #4a5a3a;
  --text: #ece6d6;
  --text-2: #c9c2b0;
  --muted: #a3ad98;
  --gold: #d8b24a;
  --gold-dark: #a8842a;
  --fire: #ff8a2a;
  --fire-dark: #b85a10;
  --green: #7fe08a;
  --red: #ff6a6a;
  --shadow: #0a0d08;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
a { color: var(--gold); }
a:hover { color: #ffd66b; }
h1, h2, h3, .display { font-family: "Bungee", "IBM Plex Sans", sans-serif; font-weight: 400; letter-spacing: 0.5px; }
h2 { font-size: 15px; color: var(--gold); margin: 0 0 10px; text-transform: uppercase; }
h3 { font-size: 13px; color: var(--muted); margin: 18px 0 8px; text-transform: uppercase; }

.topbar { display: flex; align-items: center; gap: 24px; padding: 14px 40px; border-bottom: 3px solid var(--line); background: var(--bg-2); }
.topbar .brand { font-family: "Bungee", sans-serif; font-size: 20px; color: var(--gold); text-decoration: none; letter-spacing: 1px; }
.topbar .spacer { flex: 1; }
.topbar a:not(.brand) { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.topbar a:hover { color: var(--gold); }

.btn { display: inline-block; padding: 10px 18px; font: 600 15px "IBM Plex Sans", sans-serif; color: var(--bg-2); background: var(--gold); border: 3px solid var(--gold-dark); box-shadow: 4px 4px 0 var(--shadow); text-decoration: none; cursor: pointer; }
.btn:hover { color: var(--bg-2); background: #ffd66b; }
.btn.primary { font-family: "Bungee", sans-serif; font-weight: 400; background: var(--fire); border-color: var(--fire-dark); }
.btn.primary:hover { background: #ffa14f; }
.btn.secondary { color: var(--text); background: var(--panel); border-color: var(--line-2); }
.btn.secondary:hover { color: var(--text); background: #2a3822; }
.btn.danger { color: #fff; background: #b83a3a; border-color: #7a2020; }
.btn.small { padding: 6px 12px; font-size: 13px; box-shadow: 3px 3px 0 var(--shadow); }
.btn:disabled { opacity: 0.5; cursor: default; }

.hero { position: relative; min-height: 560px; overflow: hidden; border-bottom: 3px solid var(--line); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,20,12,0.92) 0%, rgba(15,20,12,0.75) 42%, rgba(15,20,12,0.05) 100%); }
.hero .copy { position: relative; max-width: 620px; padding: 88px 40px 64px; display: flex; flex-direction: column; gap: 22px; }
.hero h1 { margin: 0; font-size: clamp(40px, 6vw, 72px); line-height: 0.95; color: #fff; text-shadow: 6px 6px 0 var(--line); }
.hero p { margin: 0; font-size: 19px; color: #d9d2c0; max-width: 520px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .note { font-size: 13px; color: var(--muted); }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 3px solid var(--line); }
.features > div { padding: 30px 40px; border-right: 3px solid var(--line); }
.features > div:last-child { border-right: 0; }
.features p { margin: 0; font-size: 15px; color: var(--text-2); }

.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 40px; }
.shots img { width: 100%; height: 300px; object-fit: cover; border: 3px solid var(--line); box-shadow: 8px 8px 0 var(--shadow); display: block; }
.shots h2 { color: var(--fire); margin: 12px 0 6px; font-size: 14px; }
.shots p { margin: 0; font-size: 15px; color: var(--text-2); }

.wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px 48px; }
.panel { background: var(--panel); border: 3px solid var(--line); box-shadow: 6px 6px 0 var(--shadow); padding: 20px 22px; }
.panel + .panel { margin-top: 20px; }
form { display: grid; gap: 10px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
input, select, textarea { padding: 10px 12px; border: 3px solid var(--line); background: var(--bg-2); color: var(--text); font: 15px "IBM Plex Sans", sans-serif; }
input:focus, select:focus { outline: none; border-color: var(--gold); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.msg { min-height: 1.4em; font-size: 14px; }
.msg.err { color: var(--red); }
.msg.ok { color: var(--green); }
.tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 3px solid var(--line); }
.tabs button { font: 600 14px "IBM Plex Sans", sans-serif; background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; margin-bottom: -3px; padding: 8px 14px; cursor: pointer; }
.tabs button.active { color: var(--gold); border-bottom-color: var(--gold); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
code { background: var(--bg-2); padding: 2px 6px; border: 2px solid var(--line); color: var(--gold); }
.hidden { display: none; }
footer.site { display: flex; align-items: center; gap: 16px; padding: 18px 40px; border-top: 3px solid var(--line); background: var(--bg-2); font-size: 13px; color: var(--muted); }
footer.site .spacer { flex: 1; }
.muted { color: var(--muted); }

@media (max-width: 800px) {
  .features { grid-template-columns: 1fr; }
  .features > div { border-right: 0; border-bottom: 3px solid var(--line); }
  .shots { grid-template-columns: 1fr; padding: 24px 16px; }
  .topbar { padding: 12px 16px; gap: 14px; flex-wrap: wrap; }
  .hero .copy { padding: 56px 16px 40px; }
  .hero .shade { background: rgba(15,20,12,0.8); }
  footer.site { padding: 16px; flex-wrap: wrap; }
}