/* PERDE · shared design system */
:root{
  --bg:#15100D; --bg2:#1E1712; --surface:#221A14; --surface2:#2C221A;
  --line:#3A2C21; --ink:#F0E7DB; --muted:#B0A08E; --faint:#7E7062;
  --gold:#EDBB63; --gold-soft:#F2CD86; --crimson:#D14B45; --crimson-deep:#B5342F; --ring:#EDBB63;
  --ok:#5FBE8E; --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --maxw:1140px;
}
@media (prefers-color-scheme:light){:root{
  --bg:#F4ECE0; --bg2:#EFE5D6; --surface:#FFFFFF; --surface2:#FBF4E9;
  --line:#E2D3BE; --ink:#241C15; --muted:#6E6051; --faint:#948472;
  --gold:#A9781F; --gold-soft:#B8862E; --crimson:#B5342F; --crimson-deep:#9A2A26; --ring:#A9781F; --ok:#2C8C5F;
}}
:root[data-theme="dark"]{
  --bg:#15100D; --bg2:#1E1712; --surface:#221A14; --surface2:#2C221A;
  --line:#3A2C21; --ink:#F0E7DB; --muted:#B0A08E; --faint:#7E7062;
  --gold:#EDBB63; --gold-soft:#F2CD86; --crimson:#D14B45; --crimson-deep:#B5342F; --ring:#EDBB63; --ok:#5FBE8E;
}
:root[data-theme="light"]{
  --bg:#F4ECE0; --bg2:#EFE5D6; --surface:#FFFFFF; --surface2:#FBF4E9;
  --line:#E2D3BE; --ink:#241C15; --muted:#6E6051; --faint:#948472;
  --gold:#A9781F; --gold-soft:#B8862E; --crimson:#B5342F; --crimson-deep:#9A2A26; --ring:#A9781F; --ok:#2C8C5F;
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(1100px 640px at 82% -10%, color-mix(in srgb,var(--gold) 14%,transparent), transparent 60%),
    radial-gradient(900px 560px at 6% 2%, color-mix(in srgb,var(--crimson) 11%,transparent), transparent 62%),
    linear-gradient(var(--bg),var(--bg2));
  min-height:100svh; overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.shell{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit}
/* header */
header.bar{display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:16px}
.brand{display:flex; align-items:baseline; gap:10px; font-family:var(--serif); text-decoration:none}
.brand b{font-size:23px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; color:var(--ink)}
.brand b span{color:var(--crimson)}
.nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.nav a{font-family:var(--sans); font-size:13px; color:var(--muted); text-decoration:none; padding:7px 11px; border-radius:999px; transition:.15s}
.nav a:hover{color:var(--ink); background:color-mix(in srgb,var(--surface) 70%,transparent)}
.nav a.active{color:var(--gold)}
.hbtn{font-family:var(--sans); font-size:13px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; transition:.2s}
.hbtn:hover{color:var(--ink); border-color:var(--gold)}
.hbtn:focus-visible,.nav a:focus-visible,.btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
/* page head */
.eyebrow{font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 14px}
.phead{padding:30px 0 8px}
.phead h1{font-family:var(--serif); font-weight:700; font-size:clamp(32px,4.6vw,50px); line-height:1.04; letter-spacing:-.01em; margin:0 0 14px; text-wrap:balance}
.phead h1 em{font-style:italic; color:var(--crimson)}
.phead p.sub{font-size:17px; color:var(--muted); max-width:56ch; margin:0}
/* generic surface + controls */
.panel{background:color-mix(in srgb,var(--surface) 86%,transparent); border:1px solid var(--line); border-radius:18px; padding:20px}
.btn{font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer; border-radius:11px; padding:12px 18px; border:1px solid var(--line); transition:.2s; text-align:center; text-decoration:none; display:inline-block}
.btn.ghost{background:transparent; color:var(--ink)} .btn.ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn.solid{background:var(--gold); color:#1c1408; border-color:transparent} .btn.solid:hover{background:var(--gold-soft)}
.chip{font-family:var(--sans); font-size:12.5px; color:var(--muted); background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:6px}
.chip[aria-pressed=true]{color:var(--ink); border-color:var(--sel,var(--gold)); box-shadow:inset 0 0 0 1px var(--sel,var(--gold))}
input[type=text],input[type=search]{width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--bg2); border:1px solid var(--line); border-radius:11px; padding:12px 14px}
input::placeholder{color:var(--faint)}
input:focus-visible{outline:2px solid var(--ring); outline-offset:1px; border-color:transparent}
/* platform badge */
.pbadge{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#fff; padding:6px 11px; border-radius:9px}
.pdot{width:9px; height:9px; border-radius:50%; display:inline-block}
/* cta strip */
.cta{margin:56px 0 0; border-top:1px solid var(--line)}
.cta .in{background:color-mix(in srgb,var(--surface) 55%,transparent); border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:40px; flex-wrap:wrap}
.cta h3{font-family:var(--serif); font-size:24px; margin:0 0 4px}
.cta p{margin:0; color:var(--muted); font-size:14.5px}
footer.ft{border-top:1px solid var(--line); padding:26px 0 44px; color:var(--faint); font-size:13px; margin-top:36px}
footer.ft .shell{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer.ft a{color:var(--muted)}
/* ===== unified footer ===== */
.pdfoot{border-top:1px solid var(--line); margin-top:44px; padding:28px 24px 48px; color:var(--faint); font-size:13px}
.pdfoot-in{max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start}
.pdfoot-brand{line-height:1.7}
.pdfoot-brand b{color:var(--ink); font-family:var(--serif); font-weight:700}
.pdfoot-brand span{display:block; margin-top:4px; color:var(--muted)}
.pdfoot-brand a{color:var(--gold); text-decoration:none}
.pdfoot-links{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.pdfoot-links a{color:var(--muted); text-decoration:none}
.pdfoot-links a:hover{color:var(--gold)}
/* ===== unified header ===== */
.pdhead{position:sticky; top:0; z-index:45; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.pdbar{display:flex; align-items:center; gap:14px; padding:13px 24px; max-width:var(--maxw); margin:0 auto}
.pdtag{font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line); padding:3px 8px; border-radius:999px}
.pdnav{display:flex; gap:1px; margin-left:6px; flex:1; min-width:0}
.pdnav a{font-size:13px; color:var(--muted); text-decoration:none; padding:8px 9px; border-radius:8px; white-space:nowrap; transition:.15s}
.pdnav a:hover{color:var(--ink); background:color-mix(in srgb,var(--surface) 70%,transparent)}
.pdnav a.active{color:var(--gold)}
.pdright{display:flex; align-items:center; gap:9px; margin-left:auto}
.pdicon{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:15px; flex:0 0 auto}
.pdicon:hover{color:var(--gold); border-color:var(--gold)}
.pdicon:focus-visible,.pdham:focus-visible,.pdbtn:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.pdbtn{font-family:var(--sans); font-size:13.5px; font-weight:600; border-radius:999px; padding:9px 17px; cursor:pointer; border:1px solid transparent; text-decoration:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.pdbtn.login{background:var(--gold); color:#1c1408} .pdbtn.login:hover{background:var(--gold-soft)}
.pdbtn.profile{background:transparent; border-color:var(--line); color:var(--ink)} .pdbtn.profile:hover{border-color:var(--gold)}
.pdav{width:24px; height:24px; border-radius:50%; background:linear-gradient(150deg,var(--gold-soft),var(--crimson)); color:#1c1408; font-weight:700; font-size:12px; display:inline-flex; align-items:center; justify-content:center}
.pdham{display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer; flex-direction:column; gap:4px; align-items:center; justify-content:center; flex:0 0 auto}
.pdham span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.2s}
.pdham.x span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pdham.x span:nth-child(2){opacity:0}
.pdham.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.pddrawer{display:none; flex-direction:column; padding:6px 20px 18px; border-top:1px solid var(--line); background:var(--bg2)}
.pddrawer.open{display:flex}
.pddrawer a{padding:13px 6px; color:var(--ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent); font-size:15.5px}
.pddrawer a.active{color:var(--gold)}
.pddrawer-auth{margin-top:14px}
.pddrawer-auth .pdbtn{width:100%; justify-content:center}
@media (max-width:1040px){ .pdnav{display:none} .pdham{display:flex} }
/* login / onboarding */
.lg-field{margin-bottom:14px}
.lg-field label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px}
.lg-chips{display:flex; flex-wrap:wrap; gap:7px}
.lg-connect{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.lg-connect button{font-family:var(--sans); font-size:12.5px; text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--ink); cursor:pointer}
.lg-connect button:hover{border-color:var(--gold)}
.lg-connect button small{display:block; color:var(--faint); font-size:11px; margin-top:2px; font-weight:400}
.lg-connect button.live{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.lg-connect button.live small{color:var(--ok)}
/* platform badge with logo */
.pbadge svg{width:15px; height:15px; margin-right:1px; vertical-align:-2px}
/* share sheet */
.scrim{position:fixed; inset:0; background:rgba(8,5,3,.68); display:none; align-items:center; justify-content:center; padding:20px; z-index:60; backdrop-filter:blur(3px)}
.scrim.open{display:flex}
.sheet{background:var(--surface); border:1px solid var(--line); border-radius:20px; max-width:400px; width:100%; padding:24px; box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.sheet h3{font-family:var(--serif); font-size:22px; margin:0}
.sheet .x{float:right; background:transparent; border:0; color:var(--faint); font-size:24px; line-height:1; cursor:pointer; margin:-4px -4px 0 0}
.sheet .x:hover{color:var(--ink)}
.sheet p.hint{color:var(--muted); font-size:13px; margin:4px 0 20px; line-height:1.5}
.social{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
.sbtn{display:flex; flex-direction:column; align-items:center; gap:8px; background:transparent; border:0; cursor:pointer; font-family:var(--sans); font-size:12px; color:var(--muted)}
.sbtn .ic{width:56px; height:56px; border-radius:17px; display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .15s, box-shadow .15s}
.sbtn:hover .ic{transform:translateY(-3px); box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}
.sbtn .ic svg{width:26px; height:26px}
.sbtn:focus-visible{outline:2px solid var(--ring); outline-offset:3px; border-radius:10px}
.sheet .dl{width:100%}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(18px); background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:12px; font-size:13.5px; font-weight:600; opacity:0; transition:.25s; z-index:70; pointer-events:none; max-width:88vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
/* motion */
.load{opacity:0; transform:translateY(12px); animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.04s}.d2{animation-delay:.12s}.d3{animation-delay:.2s}.d4{animation-delay:.28s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.load{animation:none; opacity:1; transform:none} *{transition:none!important}}
@media (max-width:720px){ .nav{display:none} .cta .in{flex-direction:column; align-items:flex-start} }