/* starpower.tools / Setlist */

:root{
  --bg:#161616;          /* app background */
  --panel:#1e1e1e;       /* app raised surface (sidebar, panels) */
  --elev2:#262626;       /* app highest surface (cards, dropdowns) */
  --ink:#f4efe4;         /* warm bone, primary text */
  --ink-dim:#a89e8d;     /* muted grey, secondary text */
  --ghost:#6b6356;       /* faint, captions + footer */
  --amber:#e69a47;       /* accent, matches the app icon */
  --amber-deep:#c97e30;  /* darker amber if needed */
  --line:#323232;        /* app border */
  --row-hover:#242424;   /* app row hover */
  --selected:#3a3a3a;    /* app selected row */
  --cyan:#5ce1ff;        /* starpower.tools brand cyan */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:#1a1208}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}

/* ---------- top bar ---------- */
.topbar{width:100%;border-bottom:1px solid var(--line)}
.bar{max-width:1200px;margin-inline:auto;padding:18px clamp(22px,5vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.back{display:inline-flex;align-items:center;gap:.5em;
  font-size:.84rem;font-weight:500;color:var(--ink-dim);transition:color .18s}
.back .arrow{transition:transform .18s}
.back:hover{color:var(--ink)}
.back:hover .arrow{transform:translateX(-3px)}
.back .dot{color:var(--cyan)}

/* ---------- main ---------- */
main{flex:1;width:100%}

/* hero */
.hero{max-width:1200px;margin-inline:auto;
  padding:clamp(54px,11vh,128px) clamp(22px,5vw,48px) clamp(46px,8vh,80px)}
.logo{display:flex;align-items:center;gap:.3em;line-height:1;
  font-family:'Gemunu Libre',sans-serif;font-weight:425;color:var(--amber);
  font-size:clamp(2.7rem,7.5vw,5rem);letter-spacing:.004em}
.logo-mark{display:inline-flex}
.logo-mark svg{width:.92em;height:.92em;display:block}
.hero-text{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(34px,5vw,80px);align-items:start}
.lead{margin-top:clamp(20px,3.5vh,32px);font-size:clamp(1.32rem,2.7vw,2rem);font-weight:500;line-height:1.32;color:var(--ink)}
.sub{font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.62;color:var(--ink-dim);max-width:46ch}

/* download buttons */
.downloads{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,5vh,46px)}
.dl-btn{display:inline-flex;align-items:center;gap:.6em;
  padding:13px 22px;border:1px solid var(--line);border-radius:10px;
  background:var(--elev2);color:var(--ink);
  font-weight:600;font-size:1rem;line-height:1;
  transition:background .16s ease,border-color .16s ease}
.dl-btn:hover{background:var(--selected);border-color:#4a4a4a}
.dl-ico{width:1.55em;height:1.55em;flex:none;display:block}

/* screenshot frame */
.shot{position:relative;margin-top:clamp(18px,3vh,28px);width:100%;
  border:1px solid var(--line);border-radius:12px;background:var(--elev2);overflow:hidden}
.shot:not(:has(.shot-img)){aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.shot-img{display:block;width:100%;height:auto;cursor:zoom-in}
.shot:has(.shot-img) .shot-hint{display:none}
.shot-hint{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ghost)}
.shot-hint svg{width:34px;height:34px;opacity:.75}
.shot-hint span{font-family:'Bebas Neue',sans-serif;letter-spacing:.24em;
  text-transform:uppercase;font-size:.82rem}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,8,.9);padding:clamp(20px,5vw,64px);cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox-img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lightbox-close{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--elev2);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font-size:1.7rem;line-height:1;cursor:pointer;transition:background .16s,border-color .16s}
.lightbox-close:hover{background:var(--selected);border-color:#4a4a4a}

/* library grid (full-bleed warm band, contained content) */
.set{width:100%;background:var(--panel);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.set-in{max-width:1200px;margin-inline:auto;
  padding:clamp(46px,7.5vh,80px) clamp(22px,5vw,48px)}
.set-label{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1rem;
  letter-spacing:.36em;text-transform:uppercase;color:var(--ghost);
  margin-bottom:clamp(28px,4.5vh,44px)}

.rows{list-style:none;display:grid;grid-template-columns:1fr 1fr}
.row{position:relative;transition:background .18s ease;
  padding:clamp(24px,3.6vh,34px) clamp(20px,2.4vw,32px) clamp(24px,3.6vh,34px) clamp(30px,3vw,44px)}
.row:nth-child(even){border-left:1px solid var(--line)}
.row:nth-child(n+3){border-top:1px solid var(--line)}
.row:hover{background:var(--row-hover)}
.row-mark{position:absolute;left:clamp(12px,1.2vw,18px);top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:2px;background:var(--amber);transition:height .2s ease}
.row:hover .row-mark{height:58%}
.row-title{font-family:'Gemunu Libre',sans-serif;font-weight:600;line-height:1.12;
  font-size:clamp(1.35rem,2.4vw,2rem);color:var(--ink);transition:color .2s ease}
.row:hover .row-title{color:var(--amber)}
.row-desc{margin-top:11px;max-width:48ch;
  font-size:clamp(1rem,1.4vw,1.06rem);line-height:1.6;color:var(--ink-dim)}

/* ---------- footer ---------- */
footer{width:100%;border-top:1px solid var(--line)}
.foot{max-width:1200px;margin-inline:auto;padding:24px clamp(22px,5vw,48px) 32px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:.74rem;color:var(--ghost);line-height:1.6}
.foot-right{white-space:nowrap;transition:color .18s}
.foot-right:hover{color:var(--ink-dim)}
.foot-right .dot{color:var(--cyan)}
.foot-nav{display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap}
.foot-nav a{transition:color .18s}
.foot-nav a:hover{color:var(--ink-dim)}

/* ---------- legal / document pages ---------- */
.legal{max-width:760px;margin-inline:auto;
  padding:clamp(44px,7vh,88px) clamp(22px,5vw,48px) clamp(56px,9vh,96px)}
.legal-title{font-family:'Gemunu Libre',sans-serif;font-weight:600;color:var(--ink);
  font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.08;letter-spacing:.005em}
.legal-updated{margin-top:10px;font-family:'Bebas Neue',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--ghost)}
.legal-intro{margin-top:clamp(22px,3.5vh,34px);font-size:1.06rem;line-height:1.7;color:var(--ink-dim)}
.legal section{margin-top:clamp(30px,4.5vh,46px)}
.legal h2{font-family:'Gemunu Libre',sans-serif;font-weight:600;color:var(--ink);
  font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.2;margin-bottom:12px}
.legal p{font-size:1rem;line-height:1.72;color:var(--ink-dim);margin-bottom:12px}
.legal p:last-child{margin-bottom:0}
.legal a.inline{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.legal a.inline:hover{color:var(--amber-deep)}
.legal strong{color:var(--ink);font-weight:600}

/* ---------- one quiet load-in, motion-safe only ---------- */
@media (prefers-reduced-motion:no-preference){
  .logo,.lead,.sub,.downloads,.shot,.set-label,.row{opacity:0;transform:translateY(12px);
    animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
  .logo{animation-delay:.04s}
  .lead{animation-delay:.12s}
  .sub{animation-delay:.18s}
  .downloads{animation-delay:.24s}
  .shot{animation-delay:.28s}
  .set-label{animation-delay:.34s}
  .row:nth-child(1){animation-delay:.40s}
  .row:nth-child(2){animation-delay:.47s}
  .row:nth-child(3){animation-delay:.54s}
  .row:nth-child(4){animation-delay:.61s}
}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- tablet / stacked ---------- */
@media (max-width:860px){
  .hero-text{grid-template-columns:1fr;gap:clamp(30px,5vh,44px)}
  .sub{max-width:560px}
  .rows{grid-template-columns:1fr}
  .row:nth-child(even){border-left:none}
  .row:nth-child(n+2){border-top:1px solid var(--line)}
}

/* ---------- small screens ---------- */
@media (max-width:560px){
  .logo{font-size:clamp(2.7rem,15vw,3.6rem)}
  .lead{font-size:1.2rem}
}