:root{
  --bg:#0b1220;
  --card:#111827;
  --border:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  margin:0;
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x: hidden;
}

.wrap{
  min-height:100dvh;             /* accounts for mobile browser UI */
  display:grid;
  place-items:center;
  row-gap: 12px;                 /* space between header and grid */
  padding:16vh 4vw;               /* more breathing room */
  margin-top: -5vh;            /* pull up to reduce initial scroll */
}

.hero{
  text-align: center;
  max-width: 920px;
  padding: 0 8px;
}
.hero h1{
  margin: 0 0 8px 0;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(28px, 4.2vw, 44px);
  /* subtle gradient text */
  background: linear-gradient(180deg, #e5e7eb, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .sub{
  margin: 0;
  color: var(--muted, #9ca3af);
  font-size: clamp(14px, 1.4vw, 18px);
}

/* Footer pinned to bottom without affecting layout height */
.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted, #9ca3af);
  pointer-events: none;          /* never blocks clicks on cards */
}

.grid{
  width:min(1100px, 96vw);       /* wider container */
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* bigger cards */
  gap:24px;                      /* larger gutters */
}

.card{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  padding:28px 28px 24px;        /* thicker padding */
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:fit-content;              /* taller cards */
  box-shadow: 0 20px 40px rgba(0,0,0,.25); /* optional depth */
}

.card h2{
  margin:0;
  font-size: clamp(22px, 2.6vw, 30px); /* scales up on large screens */
}

.card p{
  margin:0;
  color:var(--muted);
  font-size: clamp(14px, 1.2vw, 18px);
}

.card a{
  margin-top:auto;               /* stick the button to the bottom */
  align-self:flex-start;
  padding:12px 16px;             /* bigger button */
  border-radius:12px;
  border:1px solid var(--border);
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  transition: background .2s, border-color .2s, transform .06s ease;
}
.card a:hover{
  background:#0f172a;
  border-color:#374151;
  transform: translateY(-1px);
}

/* small screens still look great */
@media (max-width: 500px){
  .wrap{ padding: 8vh 2vw; margin-top: auto;}
  .grid{ grid-template-columns: 1fr; }
  .card{ min-height:220px; padding:22px; }
}

/* Gate status */
.gate-status{
  text-align:center;
  font-size:14px;
  color:var(--muted, #9ca3af);
  background: color-mix(in hsl, var(--card, #111827) 92%, white 8%);
  border: 1px solid var(--border, #1f2937);
  border-radius: 10px;
  padding: 10px 12px;
  width:min(900px, 96vw);
  margin: 0 auto;
}

.gate-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
}

/* “Add Gumroad license key →” — matches your Straico link style */
.license-key-link{
  position: static; /* not fixed on landing */
  padding: 8px 12px;
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text, #e5e7eb);
  background: var(--card, #111827);
  border: 1px solid var(--border, #1f2937);
  border-radius: 8px;
  cursor: pointer;
}
.license-key-link:hover{ text-decoration: underline; }
.gate-actions{ width:min(1100px,96vw); margin: 8px auto 0; }

/* Lock the “Go to …” buttons until verified */
.gate-link.locked{
  opacity:.55;
  pointer-events:none;
  cursor:not-allowed;
}

/* Modal (copy of your canvas modal styles) */
.modal-overlay{
  position: fixed; inset: 0;
  display: none; place-items: center;
  background: rgba(0,0,0,.35);
  z-index: 9999;
}
.modal-overlay:not([hidden]){ display:grid; }
.modal{
  width: min(360px, 90vw);
  background: var(--card, #111827);
  color: var(--text, #e5e7eb);
  border: 1px solid var(--border, #1f2937);
  border-radius: 10px;
  padding: 14px;
}
.modal h3{
  margin: 0 0 10px;
  font-size: 14px;
  display: flex; gap: 6px; align-items: center;
}
.keycap{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--border, #1f2937);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: color-mix(in hsl, var(--card, #111827) 80%, white 20%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.modal .desc{ font-size: 12px; color: var(--muted, #9ca3af); margin-bottom: 10px; }
.modal input[type="password"]{
  width:100%; padding:8px;
  border:1px solid var(--border, #1f2937); border-radius:6px;
  background: var(--card, #111827); color: var(--text, #e5e7eb);
}
.modal .row{ display:flex; gap:8px; margin-top:10px; }
.modal button{
  appearance:none; border:1px solid var(--border, #1f2937);
  background: var(--card, #111827); color: var(--text, #e5e7eb);
  padding:6px 10px; border-radius:6px; cursor:pointer;
}
.modal button.primary{ background: var(--accent, #34d399); color:#fff; border-color: var(--accent, #34d399); }