:root {
  --bg: #0b1210;
  --bg-2: #0f1714;
  --text: #f3f6f5;
  --muted: #b9c4c0;
  --brand: #4fd1a5;
  --accent: #d0fbf1;
  --card: #121b18;
  --stroke: #1e2a26;
  --warn: #ffc857;
  --red: #ff8c7a;
  --maxw: 1200px;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);

  --bg-overlay: rgba(10, 17, 15, 0.55);
}

html { min-height: 100%; }

/* Base */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* Fixed site-wide background image */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)), url('/assets/Front1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transform: translateZ(0);
}

/* Links & layout */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
.muted { color: var(--muted); }
.spacer { height: 12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Header / Nav */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(120%) blur(8px);
  background: color-mix(in srgb, var(--bg), transparent 20%);
  border-bottom: 1px solid var(--stroke);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px; }
.brand img { height: 36px; width:auto; display:block; }
.brand span { color: var(--text); font-size: 1.05rem; }
.nav-links { display:none; gap:1rem; align-items:center; }
.nav-links a { color: var(--muted); font-weight:500; }
.nav-cta { display:none; gap:.5rem; }
.menu { background: transparent; border: 1px solid var(--stroke); color: var(--muted); border-radius: 10px; padding:.45rem .6rem; }
.mobile-panel { display:none; border-top:1px solid var(--stroke); padding:.75rem 0 1rem; }
.mobile-panel a { display:block; padding:.4rem 0; color:var(--muted); }
@media (min-width: 900px) {
  .nav-links { display:flex; }
  .nav-cta { display:flex; }
  .menu { display:none; }
  .mobile-panel { display:none !important; }
}

/* Buttons / Chips */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .9rem; border-radius: 999px; border:1px solid var(--stroke); background: #0f1714; color: var(--text); font-weight:600; }
.btn:hover { filter: brightness(1.1); text-decoration:none; }
.btn-primary { background: linear-gradient(180deg, var(--brand), #39b98e); color:#0a140f; border-color: transparent; }
.btn-ghost { background: transparent; border-color: var(--stroke); color: var(--muted); }
.chip { display:inline-flex; gap:.4rem; align-items:center; font-size:.8rem; padding:.25rem .5rem; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); background:#0f1714; }
.chip[aria-pressed="true"] { background:#173229; color:#c8efe2; border-color:#2a4b40; }

/* Sections / Titles */
section { padding: 2rem 0; border-bottom: 1px solid var(--stroke); }
.section-title { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom: 1rem; }
h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); line-height:1.15; margin:.25rem 0; }
h2 { font-size: clamp(1.2rem, 3.2vw, 1.8rem); margin:0; }
.sub { color: var(--muted); font-size:.95rem; }

/* Hero shared */
.hero {
  position: relative; overflow:hidden;
  background: radial-gradient(1200px 500px at 80% -10%, #10332880 0%, transparent 60%),
              radial-gradient(900px 500px at -10% 10%, #13221d80 0%, transparent 60%),
              transparent;
  border-bottom: 1px solid var(--stroke);
}
.hero-wrap { padding: 3.5rem 0 2.25rem; display:grid; gap:1.25rem; }
.eyebrow { color: var(--brand); font-weight:700; letter-spacing:.08em; text-transform: uppercase; font-size:.8rem; }
.hero p { max-width: 70ch; color: var(--muted); }
.hero-ctas { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; }
.note { font-size:.9rem; color:var(--muted); }

/* Grids / Tiles */
.grid-3 { display:grid; gap:.8rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow); display:grid; gap:.6rem; }
.tile h3 { margin: 0; }

/* Tools strip */
.tools { display:grid; gap:.8rem; grid-template-columns: 1fr; }
.tool { background: linear-gradient(180deg, #101916, #0e1613); border:1px solid var(--stroke); border-radius: var(--radius); padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.tool h4 { margin:.1rem 0; }
.tool p { margin:0; color: var(--muted); font-size:.95rem; }
.tool .cta { white-space:nowrap; }
@media (min-width: 720px) { .tools { grid-template-columns: repeat(3, 1fr); } }

/* Cards */
.cards { display:grid; gap:.8rem; grid-template-columns: 1fr; }
@media (min-width: 880px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); display:grid; grid-template-rows: auto 1fr; }
.card img { width:100%; aspect-ratio: 16/9; object-fit: cover; display:block; }
.card-body { padding: .9rem; display:grid; gap:.4rem; }
.tags { display:flex; gap:.4rem; flex-wrap:wrap; }
.tag { font-size:.75rem; padding:.1rem .45rem; border-radius:999px; background:#12231e; color:#a9d5c3; border:1px solid #1a2f27; }
.meta { color: var(--muted); font-size:.85rem; }

/* Region / Map box */
.region { display:grid; gap:1rem; grid-template-columns: 1fr; }
.region aside { background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius); padding:.8rem; }
.mapbox { background: linear-gradient(180deg, #0b1210, #0e1613); border:1px dashed var(--stroke); border-radius: 12px; aspect-ratio: 16/10; display:grid; place-items:center; color: var(--muted); font-size:.95rem; }
@media (min-width: 960px) { .region { grid-template-columns: 1.4fr .9fr; align-items:start; } }

/* Tips & downloads */
.tips { display:grid; gap:.6rem; }
.tip { background: linear-gradient(180deg, #101916, #0e1613); border:1px solid var(--stroke); border-radius: 12px; padding:.8rem; }
.tip strong { color:#d9ece6; } .tip small { color: var(--muted); }

.downloads { display:grid; gap:.8rem; grid-template-columns: 1fr; }
.dl { background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius); padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.dl h4 { margin:.1rem 0; } .dl p { margin:0; color:var(--muted); }
@media (min-width: 720px) { .downloads { grid-template-columns: repeat(2, 1fr); } }

/* Upgrade block */
.upgrade { background: linear-gradient(180deg, #0d1613, #0c1412); border:1px solid var(--stroke); border-radius: var(--radius); padding:1rem; display:grid; gap:.6rem; }
.ulist { margin:0; padding-left:1.2rem; color:var(--muted); }

/* Footer */
footer { padding: 2rem 0; color: var(--muted); }
.foot { display:grid; gap:1rem; grid-template-columns: 1fr; }
.foot .cols { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; }
.foot small { color: #93a29d; }
@media (min-width: 900px) { .foot { grid-template-columns: auto 1fr; align-items:start; } .foot .cols{ grid-template-columns: repeat(4, 1fr);} }


/* --- Mobile stability guard (BonedOut) --- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
.container, main, section { overflow-x: hidden; }
/* --- End guard --- */

/* --- Menu button tap target improvements (BonedOut) --- */
#menu { position: relative; z-index: 10001; min-width: 48px; min-height: 48px; padding: 10px 12px; border-radius: 12px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
#menu::after { content: ""; position: absolute; inset: -8px; }
@media (max-width: 480px) { #menu { margin-right: 10px; } }
/* --- End menu improvements --- */

/* --- Back-to-top button v3 (BonedOut) --- */
.back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 68px; height: 60px; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(0,0,0,0.2); background: #0ea5e9; color: #ffffff; font-weight: 700; font-size: 15px; letter-spacing: .02em; box-shadow: 0 8px 26px rgba(0,0,0,0.28); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, background .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: #0288c7; } .back-to-top:active { background: #0174aa; } .back-to-top:focus { outline: 2px dashed #3a87ff; outline-offset: 3px; } .back-to-top svg { width: 22px; height: 22px; }
/* --- End back-to-top --- */

/* Edge scroll fix */ html { overflow-y: auto; } body { overflow-y: visible; }