/* ==============================
   The Cipher Hunt — v9 (clean rollback to hero-v4.1)
   - No image filters
   - No overlay haze
   - Transparent How-it-Works section
   - SEO-only H1 (sr-only)
   ============================== */

:root{
  --bg: #0c0c0c;
  --ink: #ffffff;
  --muted: #c9c9c9;
  --brand: #e7b86c;
  --brand-dark: #c79a4f;
  --paper: #f8f1e1;
  --paper-edge: #e1d7be;
  --shadow: rgba(0,0,0,.18);
  --radius: 14px;
  --maxw: 1100px;
}

*{ box-sizing: border-box; }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; background:var(--bg); color:var(--ink); line-height:1.55; }

/* A11y utility */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.container.narrow{ max-width: 820px; }
.row{ display:flex; align-items:center; gap:16px; }
.space-between{ justify-content:space-between; }

/* Header */
.site-header{ position: sticky; top:0; z-index:10; background: rgba(12,12,12,.78); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,.06); }
.brand{ display:inline-block; font-weight:700; letter-spacing:.4px; color:var(--ink); text-decoration:none; padding:14px 0; }
.nav{ display:flex; gap:12px; align-items:center; }
.nav-link{ color:var(--muted); text-decoration:none; padding:10px 12px; }
.nav-link:hover{ color:var(--ink); }

/* Buttons */
.btn{ display:inline-block; text-decoration:none; cursor:pointer; border:1px solid var(--brand); padding:10px 16px; border-radius:999px; font-weight:600; transition: transform .08s ease, background .2s ease; }
.btn:hover{ transform: translateY(-1px); }
.btn.primary{ background:var(--brand); color:#101010; border-color:var(--brand); }
.btn.primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn.cta{ background: transparent; color: var(--brand); }
.btn.cta:hover{ background: rgba(231,184,108,.12); }
.btn.wide{ width:100%; text-align:center; }

/* Hero */
.hero{ position: relative; }
.hero-img{ display:block; width:100%; height:auto; } /* original poster intact */
.hero-overlay{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; } /* for button centering only */
.hero-overlay .btn{ pointer-events:auto; }

/* Sections */
.section-title{ margin:0 0 8px; font-size:28px; }
.how{ padding:40px 0; background:transparent; border-top:none; border-bottom:none; }
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px; }
.step{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius: var(--radius); padding:18px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.step-num{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background: var(--brand); color:#111; font-weight:800; margin-bottom:6px; }

/* Register parchment */
.register{ padding:56px 0; }
.parchment{ background: var(--paper); color:#2c230f; border-radius: calc(var(--radius) + 4px); border:1px solid var(--paper-edge); box-shadow:0 20px 40px rgba(0,0,0,.35); padding:24px 22px; }
.register-form{ display:grid; gap:14px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:grid; gap:6px; }
.label{ font-size:14px; color:#57451c; font-weight:700; letter-spacing:.3px; }
input[type='text'], input[type='email']{ padding:12px 14px; border-radius:10px; border:1px solid #d7c9a8; background:#fffdfa; color:#231b0a; outline:none; }
input[type='text']:focus, input[type='email']:focus{ border-color:#c2a869; box-shadow:0 0 0 3px rgba(231,184,108,.25); }
.checkbox{ display:flex; align-items:center; gap:10px; margin-top:2px; }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.06); padding:24px 0; background:#0f0f0f; }
.muted{ color:var(--muted); }
.small{ font-size:14px; }
.xsmall{ font-size:12px; }

/* Responsive */
@media (max-width: 860px){
  .steps{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}