/* ──────────────────────────────────────────────────────────────────
   Paw Player — shared stylesheet for every page
   Brand palette + layout primitives + components.
   When this migrates to Django, becomes static/css/main.css.
   ────────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#060B18;
  --bg-2:#0A1226;
  --surface:rgba(255,255,255,.04);
  --surface-hover:rgba(255,255,255,.07);
  --surface-strong:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --text:#f2f4f7;
  --text-2:rgba(242,244,247,.72);
  --text-3:rgba(242,244,247,.42);
  --gold:#FFB74D;
  --gold-2:#E6A33C;
  --cyan:#00D4FF;
  --purple:#7B61FF;
  --pink:#FF61D5;
  --green:#22C55E;
  --red:#EF4444;
  --radius:14px;
  --radius-lg:20px;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;line-height:1.55;min-height:100vh;
}

/* ── Animated background ── */
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:.55;will-change:transform}
.mesh::before{width:60vw;height:60vw;top:-20vw;left:-10vw;
  background:radial-gradient(circle,var(--cyan) 0%,transparent 60%);
  animation:float 22s ease-in-out infinite alternate}
.mesh::after{width:55vw;height:55vw;top:10vh;right:-10vw;
  background:radial-gradient(circle,var(--purple) 0%,transparent 60%);
  animation:float 26s ease-in-out infinite alternate-reverse}
.mesh-3{position:absolute;width:50vw;height:50vw;top:55vh;left:30vw;
  background:radial-gradient(circle,var(--gold) 0%,transparent 60%);
  filter:blur(140px);opacity:.18;
  animation:float 30s ease-in-out infinite alternate}
@keyframes float{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4vw,-3vh) scale(1.1)}
  100%{transform:translate(-3vw,2vh) scale(.95)}
}
.grid-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center top,black 30%,transparent 70%);
}

/* ── Layout ── */
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.wrap-narrow{max-width:680px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

/* ── Nav ── */
nav.site{position:sticky;top:0;z-index:50;
  backdrop-filter:blur(20px) saturate(180%);
  background:rgba(6,11,24,.7);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:32px;height:32px;border-radius:8px}
.brand-text{font-weight:800;font-size:17px;letter-spacing:-.01em}
.brand-text .gold{color:var(--gold)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--text)}
.nav-cta{display:flex;gap:10px;align-items:center}
@media (max-width:780px){.nav-links{display:none}}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:10px;
  font-weight:600;font-size:14px;text-decoration:none;
  transition:all .2s ease;cursor:pointer;border:0;white-space:nowrap;
  font-family:inherit;}
.btn-ghost{color:var(--text-2);background:transparent;border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);background:var(--surface);border-color:var(--border-strong)}
.btn-primary{color:#1a1208;
  background:linear-gradient(135deg,#FFD089 0%,var(--gold) 50%,var(--gold-2) 100%);
  box-shadow:0 0 0 1px rgba(255,183,77,.4),0 12px 30px -8px rgba(255,183,77,.4)}
.btn-primary:hover{transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,183,77,.6),0 16px 40px -8px rgba(255,183,77,.55)}
.btn-secondary{color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong)}
.btn-secondary:hover{background:var(--surface-hover);border-color:var(--text-3)}
.btn-danger{color:var(--red);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25)}
.btn-danger:hover{background:rgba(239,68,68,.15)}
.btn-lg{padding:14px 28px;font-size:15px;border-radius:12px}
.btn-block{width:100%;justify-content:center}

/* ── Cards / panels ── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;
  backdrop-filter:blur(20px);
}
.card-glow{
  position:relative;
  background:linear-gradient(180deg,rgba(255,183,77,.06),rgba(255,183,77,.02));
  border:1px solid rgba(255,183,77,.25);
  box-shadow:0 50px 100px -20px rgba(255,183,77,.15);
}
.card-glow::before{
  content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle,rgba(255,183,77,.08) 0%,transparent 50%);
  pointer-events:none;border-radius:inherit;
}
.card-glow > *{position:relative}

/* ── Form fields ── */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:.01em}
.field .hint{font-size:12.5px;color:var(--text-3);margin-top:-2px}
.input{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,.03);border:1px solid var(--border-strong);
  border-radius:11px;color:var(--text);font-size:15px;font-family:inherit;
  transition:all .2s;
  letter-spacing:.02em;
}
.input::placeholder{color:var(--text-3);letter-spacing:0}
.input:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 4px rgba(255,183,77,.12);
}
.input.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:14px}

/* ── Status badges ── */
.status{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
}
.status-dot{width:7px;height:7px;border-radius:50%}
.status.active{background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.3)}
.status.active .status-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.status.trial{background:rgba(255,183,77,.12);color:var(--gold);border:1px solid rgba(255,183,77,.3)}
.status.trial .status-dot{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.status.expired{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.status.expired .status-dot{background:var(--red);box-shadow:0 0 8px var(--red)}
.status.inactive{background:var(--surface);color:var(--text-3);border:1px solid var(--border-strong)}
.status.inactive .status-dot{background:var(--text-3)}

/* ── Section headers (reused) ── */
.section-header{text-align:center;max-width:620px;margin:0 auto 56px}
.eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px}
.section-header h2{font-size:clamp(30px,4.5vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:16px}
.section-header p{font-size:16px;color:var(--text-2)}

/* ── Footer ── */
footer.site{padding:50px 0 32px;border-top:1px solid var(--border);margin-top:80px}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{color:var(--text-2);text-decoration:none;font-size:13.5px;transition:color .2s}
.footer-links a:hover{color:var(--text)}
.footer-copy{color:var(--text-3);font-size:12.5px}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* ── Utility ── */
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.gap-6{gap:24px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.text-center{text-align:center}
.muted{color:var(--text-3)}.dim{color:var(--text-2)}