/* Imprint: Creature Wilds — imprintwilds.com (static: no scripts, no cookies, no trackers)
   Nightbloom identity: night indigo, the Imprint Plant's violet, bioluminescent mint, one warm gold. */
:root {
  --night: #050a18; --night-2: #0a1530; --ink: #e9f7f3; --dim: #a7bdc4; --faint: #6f8790;
  --mint: #7dffd8; --mint-2: #2fbfa6; --violet: #8d6bff; --gold: #ffd98a;
  --glass: rgba(14, 36, 56, .48); --glass-line: rgba(190, 255, 236, .16); --glass-top: rgba(220, 255, 245, .32);
  --display: "Marcellus SC", "Marcellus", Georgia, serif;
  --body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; color: var(--ink); font: 400 17px/1.65 var(--body); background:
  radial-gradient(1200px 600px at 85% -10%, rgba(141, 107, 255, .14), transparent 60%),
  radial-gradient(900px 500px at 10% 30%, rgba(47, 191, 166, .08), transparent 60%),
  linear-gradient(180deg, var(--night) 0%, #071026 50%, var(--night) 100%); }
a { color: var(--mint); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 max(22px, env(safe-area-inset-left)) 0 max(22px, env(safe-area-inset-right)); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; text-wrap: balance; letter-spacing: .02em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0 0 .35em; }
h3 { font-size: 1.3rem; margin: 0 0 .3em; }
.eyebrow { font: 600 .78rem/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--mint); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--mint)); }

/* header: floats over the hero on the home page, solid on the others */
header.top { position: absolute; inset: 0 0 auto 0; z-index: 3; }
header.top.solid { position: relative; background: linear-gradient(180deg, rgba(10, 21, 48, .9), rgba(5, 10, 24, .9)); border-bottom: 1px solid var(--glass-line); }
header.top .wrap { display: flex; align-items: center; gap: 12px; padding-block: 18px; }
header.top .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
header.top .brand img { width: 34px; height: 34px; }
header.top .brand span { font: 400 1.25rem/1 var(--display); letter-spacing: .14em; }
header.top nav { margin-left: auto; display: flex; gap: 26px; flex-wrap: wrap; }
header.top nav a { color: var(--ink); opacity: .78; text-decoration: none; font-weight: 500; font-size: .95rem; transition: opacity .2s; }
header.top nav a:hover { opacity: 1; }

/* hero: the real game render, type on the calm left */
.hero { position: relative; min-height: min(94vh, 880px, 64vw); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero > img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(3, 7, 18, .92) 0%, rgba(3, 7, 18, .72) 30%, rgba(3, 7, 18, .15) 58%, transparent 75%),
  linear-gradient(0deg, var(--night) 0%, transparent 22%); }
.hero .wrap { width: 100%; padding-top: 90px; padding-bottom: 70px; }
.hero .copy { max-width: 580px; }
.hero .logo { width: min(440px, 86%); height: auto; margin: 0 0 22px -10px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
.hero h1 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 0 0 .5em; color: #f4fffb; }
.hero p.lead { color: var(--dim); font-size: 1.08rem; margin: 0 0 30px; max-width: 30em; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 190px; padding: 10px 22px; border-radius: 16px; text-decoration: none;
  color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); border-top-color: var(--glass-top); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.store small { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.store b { font-weight: 700; font-size: 1.12rem; line-height: 1.2; }
.store.soon b::after { content: "Coming soon"; display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 99px; font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  color: var(--night); background: var(--mint); vertical-align: 3px; }

section.band { padding-block: clamp(64px, 9vw, 110px); }
.intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.intro p { color: var(--dim); margin: 0; }

/* the loop: three glass steps */
.loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step { position: relative; padding: 28px 26px 26px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); border-top-color: var(--glass-top); overflow: hidden; }
.step::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(125, 255, 216, .16), transparent); }
.step .n { font: 400 2.6rem/1 var(--display); color: var(--mint); opacity: .9; }
.step h3 { margin-top: 14px; }
.step p { color: var(--dim); margin: 0; font-size: .98rem; }
.step b { color: var(--ink); font-weight: 600; }

/* the four wilds */
.regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.region { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--night-2); border: 1px solid var(--glass-line); isolation: isolate; }
.region img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.region:hover img { transform: scale(1.05); }
.region::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(3, 7, 18, .9) 100%); }
.region .txt { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.region h3 { margin: 0 0 4px; font-size: 1.25rem; }
.region p { margin: 0; color: var(--dim); font-size: .88rem; line-height: 1.45; }

/* numbers */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--glass-line); }
.fact { padding: 26px 22px 0 0; }
.fact b { display: block; font: 400 3.2rem/1 var(--display); color: #f4fffb; }
.fact b em { font-style: normal; color: var(--mint); }
.fact span { color: var(--dim); font-size: .95rem; }

/* screenshots */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.shots img { border-radius: 18px; border: 1px solid var(--glass-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }

.free { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; padding: 40px; border-radius: 26px;
  background: linear-gradient(135deg, rgba(141, 107, 255, .12), rgba(47, 191, 166, .08)); border: 1px solid var(--glass-line); }
.free p { margin: 0; color: var(--dim); }

/* documents: privacy and support */
.doc { max-width: 760px; padding-block: 48px 80px; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin: 0 0 .3em; }
.doc h2 { font-size: 1.6rem; margin: 1.8em 0 .4em; }
.doc .meta { color: var(--faint); font-size: .95rem; }
.doc p, .doc li { color: #cfe0e2; }
.doc li { margin: .3em 0; }
.note { background: var(--glass); border: 1px solid var(--glass-line); border-left: 3px solid var(--mint); border-radius: 14px; padding: 16px 18px; color: #dcecec; }
details { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 14px; padding: 14px 18px; margin: 10px 0; }
details[open] { border-top-color: var(--glass-top); }
summary { font-weight: 600; cursor: pointer; color: var(--ink); }
details p { margin: .6em 0 .2em; }

footer.bottom { border-top: 1px solid var(--glass-line); color: var(--faint); font-size: .9rem; }
footer.bottom .wrap { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; padding-block: 28px 40px; }
footer.bottom img { width: 26px; height: 26px; }
footer.bottom a { color: var(--dim); text-decoration: none; }
footer.bottom a:hover { color: var(--ink); }
footer.bottom .sp { margin-right: auto; display: flex; align-items: center; gap: 10px; }

@media (max-width: 900px) {
  .loop, .intro, .free { grid-template-columns: 1fr; gap: 18px; }
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  header.top nav { gap: 16px; }
  header.top nav a.wide { display: none; }
  /* phones: the art becomes a band on top, the words sit below it */
  .hero { display: block; min-height: 0; }
  .hero > img.art { position: relative; height: 62vw; min-height: 300px; max-height: 460px; object-position: 80% 50%; z-index: 0; }
  .hero::before { inset: 0 0 auto 0; height: max(300px, min(62vw, 460px)); z-index: 1; background: linear-gradient(0deg, var(--night) 0%, transparent 35%), linear-gradient(180deg, rgba(3, 7, 18, .7), transparent 30%); }
  .hero .wrap { position: relative; z-index: 2; padding-top: 0; margin-top: -70px; padding-bottom: 40px; }
  .hero .logo { width: 82%; margin-bottom: 16px; }
  .regions, .shots, .facts { grid-template-columns: 1fr; }
  .region { aspect-ratio: 16 / 10; }
  .free { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) { .region img { transition: none; } }