/* JJ Softworks v2 design system.
   Tokens and values from the Round 2 handoff. Space-themed dark canvas with
   per-page accent colours; the shared footer stays gold on every page. */

:root{
  --canvas:#060607;
  --card:#0d0d10;
  --inset:#08080a;
  --ink:#ececea;
  --ink-2:#9a9a94;
  --ink-3:#5a5a55;
  --gold:#e8b04b;
  --gold-hover:#f2c87c;
  --green:#4ade80;
  --hairline:rgba(255,255,255,0.08);
  --hairline-soft:rgba(255,255,255,0.06);
  --hairline-strong:rgba(255,255,255,0.12);
  --border-btn:rgba(255,255,255,0.2);
  --sans:"Space Grotesk",sans-serif;
  --mono:"JetBrains Mono",monospace;
  --accent:var(--gold);
  --accent-hover:var(--gold-hover);
}
/* per-page accents; the body carries data-accent */
body[data-accent="green"]{--accent:#4ade80;--accent-hover:#86efac}
body[data-accent="coral"]{--accent:#fb923c;--accent-hover:#fdba74}
body[data-accent="turquoise"]{--accent:#2dd4bf;--accent-hover:#5eead4}
body[data-accent="violet"]{--accent:#a78bfa;--accent-hover:#c4b5fd}
body[data-accent="blue"]{--accent:#60a5fa;--accent-hover:#93c5fd}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none;transition:color .15s,background-color .15s,border-color .15s}
a:hover{color:var(--accent-hover)}
h1,h2,h3,p,figure{margin:0}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
:target{scroll-margin-top:90px}

.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
@media (max-width:720px){.wrap{padding:0 20px}}

/* ------------------------------------------------------------- starfield */
.starfield-layer{
  position:fixed;top:0;left:0;width:100%;
  height:100vh;height:100lvh;   /* large viewport unit: immune to URL-bar collapse */
  z-index:-1;transform:translateZ(0);
}
main,header,footer{position:relative;z-index:1}

/* ------------------------------------------------------------------ nav */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(6,6,7,0.88);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.site-header .wrap{
  padding:18px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
@media (max-width:720px){.site-header .wrap{padding:14px 20px}}
.brand img{height:26px;width:auto}
.nav{display:flex;gap:30px;font-size:12px;letter-spacing:2px;font-weight:500;flex-wrap:wrap}
.nav a{color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.nav-cta{
  background:var(--accent);color:var(--canvas) !important;font-weight:700;font-size:13px;
  padding:11px 20px;border-radius:8px;white-space:nowrap;letter-spacing:0;
}
.nav-cta:hover{background:var(--accent-hover)}
@media (max-width:860px){.nav{gap:14px}}
@media (max-width:660px){.nav{display:none}}

/* ------------------------------------------------------------ mobile menu */
.nav-toggle{
  display:none;background:none;border:1px solid var(--border-btn);
  border-radius:8px;padding:8px 10px;cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin:4px 0;border-radius:1px}
@media (max-width:660px){
  .nav-toggle{display:block;margin-left:auto}
  .site-header .wrap{gap:12px}
  .nav-cta{padding:9px 14px;font-size:12px}
}
.mobile-menu{display:none;padding:4px 20px 14px;border-top:1px solid var(--hairline-soft)}
.mobile-menu.open{display:block}
@media (min-width:661px){.mobile-menu.open{display:none}}
.mobile-menu a{
  display:block;padding:13px 4px;font-size:13px;letter-spacing:2px;font-weight:500;
  color:var(--ink-2);border-bottom:1px solid var(--hairline-soft);
}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover{color:var(--ink)}
.mobile-menu a[aria-current="page"]{color:var(--accent)}

/* ------------------------------------------------------------- typography */
.eyebrow{
  font-size:12px;letter-spacing:3px;color:var(--accent);
  font-weight:500;margin-bottom:22px;text-transform:uppercase;
}
.eyebrow-mono{font-family:var(--mono)}
.h1{font-size:clamp(34px,4.6vw,60px);line-height:1.04;font-weight:700;letter-spacing:-1.5px;text-wrap:pretty}
.h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-1px}
.lead{font-size:17px;line-height:1.65;color:var(--ink-2)}
.body{font-size:14px;line-height:1.6;color:var(--ink-2)}
.dim{color:var(--ink-3)}
.mono{font-family:var(--mono)}
@media (max-width:720px){
  .eyebrow{font-size:10px;letter-spacing:2px}
  .lead{font-size:14px}
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block;font-weight:700;font-size:14px;
  padding:15px 26px;border-radius:8px;white-space:nowrap;border:none;
  font-family:var(--sans);cursor:pointer;
}
.btn-primary{background:var(--accent);color:var(--canvas)}
.btn-primary:hover{background:var(--accent-hover);color:var(--canvas)}
.btn-secondary{
  background:transparent;border:1px solid var(--border-btn);
  color:var(--ink);font-weight:500;padding:14px 26px;
}
.btn-secondary:hover{border-color:rgba(255,255,255,0.4);color:var(--ink)}
.btn-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--card);border:1px solid var(--hairline);
  border-radius:14px;padding:28px;
}
.card-inset{
  background:var(--inset);border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
}
.shot-card{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--hairline-strong);
  box-shadow:0 40px 90px rgba(0,0,0,0.55);
}
.rule-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.rule-head .eyebrow{margin-bottom:0}
.rule-head::after{content:"";flex:1;border-top:1px solid rgba(255,255,255,0.1)}
.rule-head .aside{font-size:12px;color:var(--ink-2);order:3}
.rule-head.has-aside::after{order:2}

.chip{
  font-family:var(--mono);font-size:11px;color:var(--ink-2);
  border:1px solid var(--hairline);border-radius:6px;padding:5px 9px;
}
.chip-accent{color:var(--accent);border-color:var(--accent)}
.pill{border-radius:999px}

/* -------------------------------------------------------------- keyframes */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes bgslide{0%{background-position:0 0}100%{background-position:28px 0}}
@keyframes packet{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes sweep{0%{transform:translateY(-120%)}100%{transform:translateY(220%)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 44px 0 var(--glow,rgba(232,176,75,0.14))}}
@keyframes ripple{0%{transform:scale(0.6);opacity:0.7}100%{transform:scale(2.2);opacity:0}}
@keyframes logline{0%,3%{opacity:0;transform:translateY(4px)}6%,22%{opacity:1;transform:translateY(0)}26%,100%{opacity:0.28}}
.anim-float{animation:float 9s ease-in-out infinite}
.anim-floatB{animation:floatB 8s ease-in-out infinite}
.anim-pulse{animation:pulse 2.2s ease-in-out infinite}

/* ------------------------------------------------------------------ footer */
.site-footer{border-top:1px solid var(--hairline);background:var(--inset)}
.site-footer .wrap{padding:44px 40px 0}
@media (max-width:720px){.site-footer .wrap{padding:36px 20px 0}}
.foot-grid{display:grid;grid-template-columns:1.2fr 0.7fr 1.1fr;gap:44px;padding-bottom:36px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr;gap:32px}}
.foot-logo{height:20px;width:auto;opacity:0.6;margin-bottom:14px}
.foot-blurb{font-size:13px;color:var(--ink-2);max-width:40ch;line-height:1.65}
.foot-label{font-size:11px;letter-spacing:2px;color:var(--ink-3);font-weight:500;margin-bottom:14px}
.foot-links{display:flex;flex-direction:column;gap:10px;font-size:13px;font-weight:500}
.foot-links a{color:var(--ink-2)}
.foot-links a:hover{color:var(--gold-hover)}
.foot-endeavors{height:44px;width:auto;margin-bottom:14px}
.foot-company{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:13px;font-weight:500}
.foot-company:hover{color:var(--gold-hover)}
.foot-company img{height:18px;width:auto}
.foot-company .arrow{color:var(--gold)}
.foot-legal{
  border-top:1px solid var(--hairline-soft);padding:18px 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:11px;letter-spacing:1px;color:var(--ink-3);
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}