/* FULFILLIONAIRE — site stylesheet (marketing pages)
   Palette + type matched to the game so the whole domain feels like one product. */
:root{
  --ink:#0e1116; --panel:#151a22; --panel2:#1c232e; --line:#262f3d;
  --ember:#3d8bff; --emberlite:#ffc266; --paper:#e8edf4; --dim:#8b98ab;
  --good:#3ddc84; --copy:#c3ccd9;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--copy);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 900px 500px at 75% -10%, rgba(61,139,255,.07), transparent 60%),
    radial-gradient(ellipse 700px 420px at 8% 4%, rgba(61,220,132,.04), transparent 60%);
  background-repeat:no-repeat;
}
::selection{background:rgba(61,139,255,.32); color:#fff}
a{color:var(--emberlite)}
h1,h2,h3{color:var(--paper); line-height:1.2; font-weight:700}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ---------- nav ---------- */
nav.top{
  position:sticky;top:0;z-index:50;
  background:rgba(14,17,22,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.top .wrap{display:flex;align-items:center;gap:22px;height:58px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--paper);
  font-family:'JetBrains Mono',monospace;font-weight:800;letter-spacing:-.02em}
.brand .bm-box{flex:none;display:block}
.brand .bm-word{display:flex;flex-direction:column;line-height:.92;font-size:14.5px}
.brand .bm-word .e{color:var(--ember)}
.brand .bm-word .ll{color:#ffc24d;text-shadow:0 0 6px rgba(255,178,77,.45)}
nav.top .links{display:flex;gap:18px;margin-left:auto;align-items:center}
nav.top .links a{color:var(--dim);text-decoration:none;font-size:13.5px;font-weight:500}
nav.top .links a:hover{color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;
  padding:11px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn-ember{background:var(--ember);color:#0b0e13;box-shadow:0 4px 18px rgba(61,139,255,.28);font-weight:800}
.btn-ember:hover{background:var(--emberlite);transform:translateY(-1px)}
.nav-play{font-weight:800;letter-spacing:.07em;padding:9px 16px;border:2px solid rgba(11,14,19,.4)} /* v0.10.3 RJ#13: PLAY must READ as PLAY */
.btn-ghost{border-color:var(--line);color:var(--paper);background:rgba(21,26,34,.6)}
.btn-ghost:hover{border-color:var(--dim);transform:translateY(-1px)}
.btn-sm{padding:8px 14px;font-size:12px}
.nav-play{margin-left:6px}

/* ---------- hero ---------- */
.hero{padding:72px 0 54px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.kicker{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.24em;
  color:var(--ember);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:26px;height:1px;background:var(--ember)}
.hero h1{font-size:clamp(34px,4.6vw,52px);margin:16px 0 18px;letter-spacing:-.02em}
.hero h1 .em{color:var(--ember)}
.lede{font-size:17.5px;max-width:34em}
.hero .cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero .meta-note{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--dim)}

/* hero art panel */
.vidpanel{position:relative;background:#0b0f15;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vidpanel video{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;background:#000}
.vidtag{position:absolute;left:22px;bottom:20px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:var(--paper);background:rgba(14,17,22,.82);border:1px solid var(--line);border-radius:6px;padding:4px 9px;pointer-events:none}
.strip{padding:26px 0 6px}
.strip .artgrid figure{transition:transform .18s ease,border-color .18s ease}
.strip .artgrid figure:hover{transform:translateY(-3px);border-color:var(--ember)}
.crew{max-width:640px;margin:0 auto;text-align:center}
.crew form{display:flex;gap:10px;max-width:460px;margin:22px auto 0}
.crew input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:13px;outline:none}
.crew input:focus{border-color:var(--ember)}
.crew .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.crew .fine{margin-top:12px;font-size:11px;color:var(--dim)}
.crew .ok{color:var(--good);font-weight:700}
.artgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.artgrid figure{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:10px 6px 8px;text-align:center;overflow:hidden}
/* v0.10.5 RJ G15: bigger thumbnails + hover zoom */
.artgrid img{width:100%;max-width:140px;display:block;margin:0 auto 4px;border-radius:8px;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.artgrid figure:hover img{transform:scale(1.4)}
.artgrid figcaption{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--dim);
  letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- sections ---------- */
section.block{padding:56px 0;border-top:1px solid var(--line)}
section.block h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.01em;margin-bottom:8px}
.sub{color:var(--dim);max-width:44em;margin-bottom:34px}
.prose p{margin-bottom:16px;max-width:44em}
.prose strong{color:var(--paper);font-weight:600}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 16px}
.stat b{display:block;font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--ember);font-weight:800}
.stat span{font-size:12px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.ti{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.ti b{display:block;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper);letter-spacing:.06em;text-transform:uppercase}
.ti span{font-size:11px;color:var(--dim);line-height:1.5;display:block;margin-top:4px}

/* feature grid */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
  transition:border-color .15s ease, transform .15s ease}
.feat:hover{border-color:#37455a;transform:translateY(-2px)}
.feat .ic{font-size:22px;margin-bottom:10px}
.feat h3{font-size:15.5px;margin-bottom:6px}
.feat p{font-size:13.5px;color:var(--dim);line-height:1.6}

/* steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;position:relative}
.step::before{counter-increment:step;content:"0" counter(step);
  font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:var(--ember);
  display:inline-block;border:1px solid rgba(61,139,255,.4);border-radius:8px;padding:3px 8px;margin-bottom:12px}
.step h3{font-size:14.5px;margin-bottom:5px}
.step p{font-size:13px;color:var(--dim);line-height:1.6}

/* faq */
details.faq{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;padding:16px 20px;color:var(--paper);font-weight:600;
  font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:'JetBrains Mono',monospace;color:var(--ember);font-size:18px;flex:none}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 20px 18px;font-size:14.5px;color:var(--copy);max-width:46em}

/* updates / changelog */
.ver{margin-bottom:30px}
.ver .head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.ver .tag{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:13px;color:#141005;
  background:var(--ember);border-radius:7px;padding:3px 10px}
.ver .tag.hot{background:var(--good)}
.ver time{color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:12px}
.ver h3{font-size:17px}
.ver ul{list-style:none;display:grid;gap:6px;margin-top:8px}
.ver ul li{padding-left:22px;position:relative;font-size:14px;color:var(--copy)}
.ver ul li::before{content:"▸";position:absolute;left:4px;color:var(--ember)}
.ver ul li b{color:var(--paper);font-weight:600}

/* page hero (interior pages) */
.pagehero{padding:56px 0 30px;border-bottom:1px solid var(--line)}
.pagehero h1{font-size:clamp(28px,3.6vw,40px);margin-top:14px;letter-spacing:-.015em}
.pagehero .sub{margin-bottom:0;margin-top:12px}

/* contact cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.card h3{font-size:15px;margin:10px 0 6px}
.card p{font-size:13.5px;color:var(--dim)}
.card .ic{font-size:22px}
.card a.word{color:var(--emberlite);word-break:break-all}

/* footer */
footer.site{border-top:1px solid var(--line);margin-top:20px;padding:34px 0 44px;
  background:rgba(12,15,20,.6)}
footer.site .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer.site .fbrand{font-family:'JetBrains Mono',monospace;font-weight:800;color:var(--paper);font-size:14px}
footer.site .fbrand em{color:var(--ember);font-style:normal}
footer.site nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer.site nav a{color:var(--dim);text-decoration:none;font-size:13px}
footer.site nav a:hover{color:var(--paper)}
footer.site .legal{margin-top:22px;font-size:12px;color:#5f6b7d;max-width:60em;line-height:1.7}
footer.site .copy{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#4d5866}

/* callout */
.callout{background:rgba(61,139,255,.07);border:1px solid rgba(61,139,255,.35);
  border-radius:14px;padding:22px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.callout .txt{flex:1;min-width:240px}
.callout h3{font-size:17px;margin-bottom:4px}
.callout p{font-size:13.5px;color:var(--dim)}

/* policy prose */
.policy{max-width:46em}
.policy h2{font-size:19px;margin:34px 0 10px;color:var(--emberlite)}
.policy h3{font-size:15.5px;margin:20px 0 8px}
.policy p,.policy li{font-size:14.5px;margin-bottom:12px}
.policy ul{padding-left:22px;margin-bottom:14px}
.policy li{margin-bottom:7px}
.policy .eff{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim)}

/* responsive */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .featgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
}
@media(max-width:620px){
  nav.top .links a.hideable{display:none}
  .featgrid,.steps{grid-template-columns:1fr}
  .artgrid{grid-template-columns:repeat(5,1fr)}
  .hero{padding:46px 0 40px}
}

/* ---------- mobile menu (v0.9.5 audit) ---------- */
.navtg{display:none}
.navburger{display:none;cursor:pointer;color:var(--dim);font-size:19px;line-height:1;padding:8px 11px;border:1px solid var(--line);border-radius:10px;user-select:none;-webkit-user-select:none}
.navburger:hover{color:var(--paper);border-color:var(--dim)}
.navpop{display:contents}
footer.site{color:#9aa7ba}
@media(max-width:620px){
  nav.top .links{position:relative;gap:10px}
  .navburger{display:flex;align-items:center}
  .navpop{display:none;position:absolute;top:calc(100% + 8px);right:0;flex-direction:column;align-items:flex-start;background:#151a23;border:1px solid var(--line);border-radius:12px;padding:12px 16px;gap:13px;z-index:99;box-shadow:0 12px 32px rgba(0,0,0,.55);min-width:160px}
  .navtg:checked~.navpop{display:flex}
  .navpop a{font-size:15px !important;color:var(--paper) !important}
}

/* v0.9.6 — reserved display-ad slot (invisible until an ad unit is configured) */
.ad-reserve{display:none}
.ad-reserve.on{display:block;min-height:280px}

/* v0.9.6 — faint footer hit counter */
.hitc{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.12em;color:var(--dim);opacity:.6;margin-top:6px;min-height:12px}

/* v0.9.6 — stats backroom link + cookie banner */
.hitc a{color:inherit;text-decoration:none;cursor:pointer}
.hitc a:hover{color:#dfe6ef}
.cbanner{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(16,21,29,.92);backdrop-filter:blur(6px);border-top:1px solid var(--line);display:none}
.cbanner.show{display:block}
.cb-in{max-width:960px;margin:0 auto;padding:14px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cbanner p{margin:0;font-size:12px;color:var(--dim);max-width:560px;line-height:1.5}
.cbanner a{color:var(--ember)}
.cb-btns{display:flex;gap:10px}
.cb-yes{background:var(--ember);color:#14100b;border:0;padding:9px 18px;border-radius:6px;font:700 11px "Space Grotesk",sans-serif;letter-spacing:.12em;cursor:pointer}
.cb-no{background:transparent;color:var(--dim);border:1px solid var(--line);padding:9px 14px;border-radius:6px;font:700 11px "Space Grotesk",sans-serif;letter-spacing:.12em;cursor:pointer}

/* v0.10.2 — desktop/mobile screenshot grid on the home page */
.shotgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;align-items:start}
.shotgrid figure{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:10px;margin:0;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.shotgrid img{width:100%;display:block;border-radius:9px;border:1px solid var(--line)}
.shotgrid figcaption{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--dim);padding:8px 2px 2px;text-align:center}
@media (max-width:820px){.shotgrid{grid-template-columns:1fr}}

/* guides hub + article pages (v0.10.18) */
.guidegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.gcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;transition:border-color .15s ease,transform .15s ease}
.gcard:hover{border-color:var(--ember);transform:translateY(-2px)}
.gcard h3{margin:0 0 8px;font-size:16px}
.gcard p{margin:0 0 12px;font-size:13px;color:var(--dim);line-height:1.55}
.gcard .gread{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--ember);text-transform:uppercase;font-weight:700}
.guide h2{margin:34px 0 12px;font-size:21px}
.guide p{color:var(--dim);line-height:1.7}
.guide strong{color:var(--paper);font-weight:600}
.guide .cta{margin-top:36px}
.guidehub h2{margin:0 0 16px;font-size:21px}
.guidehub .guidegrid a{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;font-weight:600;color:var(--paper)}
.guidehub .guidegrid a:hover{border-color:var(--ember);color:var(--ember)}
@media(max-width:640px){.guidegrid{grid-template-columns:1fr 1fr}.gcard{padding:14px}}