/* ============================================================
   fiksz klub — podcast pages design system
   Forrás: fiksz-design skill (Zodiak display + Switzer body,
   near-monochrome + egy lila accent #6C4AF6, pill gombok).
   Fontok: Fontshare CDN (Zodiak + Switzer).
   ============================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=zodiak@300,400,700,800&f[]=switzer@300,400,500,600,700&display=swap');

:root{
  --black:#000000; --near-black:#080103; --white:#FFFFFF;
  --purple:#6C4AF6; --purple-700:#5435e0; --purple-300:#9b84f9; --purple-100:#e7e1fe;
  --grey-100:#EDEDED; --grey-050:#F7F7F7; --grey-700:#4F4F4F;
  --fg-on-dark-2:rgba(255,255,255,.66);
  --font-display:'Zodiak',Georgia,'Times New Roman',serif;
  --font-body:'Switzer',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --radius-pill:44px; --radius-card:20px; --radius-sm:12px;
  --shadow-md:0 8px 24px rgba(8,1,3,.12);
  --shadow-glow:0 12px 48px rgba(108,74,246,.35);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-body); font-weight:400; color:var(--black);
  background:var(--grey-100); line-height:1.4;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ---- Type ---- */
.wordmark{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1;text-transform:lowercase}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1.04}
.display-md{font-size:clamp(28px,6vw,40px)}
.display-lg{font-size:clamp(36px,8vw,56px)}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.body-lg{font-size:18px;font-weight:300;line-height:1.5}
.body-md{font-size:16px;line-height:1.5}
.body-sm{font-size:14px;line-height:1.5}
.muted{color:var(--grey-700)}
a{color:var(--purple-700)}

/* ---- Layout ---- */
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
.section{padding:48px 0}
.center{text-align:center}

/* hero: világos szürke sáv */
.hero{background:var(--grey-100);padding:56px 0 44px}
/* sötét/gradient szekció: a brand grain gradiens asset */
.dark{
  background:#080103 url('/assets/bg-gradient.jpg') center/cover no-repeat;
  color:var(--white);
}
.dark .muted{color:var(--fg-on-dark-2)}
.dark a:not(.btn){color:var(--purple-300)}

/* ---- Buttons (pill) ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:500;font-size:18px;
  padding:18px 32px;border-radius:var(--radius-pill);border:0;cursor:pointer;
  text-decoration:none;transition:transform .18s ease,background .18s ease,filter .18s ease;
  width:100%;
}
.btn:active{transform:scale(.97)}
.btn .chev{width:18px;height:18px;flex:0 0 auto}
/* elsődleges (sötét felületen): világos kitöltés, fekete szöveg */
.btn-primary{background:var(--grey-100);color:var(--black)}
.btn-primary:hover{background:var(--white)}
.btn-primary .chev{filter:none}
/* lila variáns */
.btn-purple{background:var(--purple);color:var(--white)}
.btn-purple:hover{background:var(--purple-300)}
.btn-purple:active{background:var(--purple-700)}
/* platform-színek (pill formában) */
.btn-spotify{background:#1DB954;color:#000}
.btn-spotify:hover{filter:brightness(1.06)}
.btn-apple{background:#111;color:#fff}
.btn-apple:hover{filter:brightness(1.25)}
.btn-disabled{background:rgba(255,255,255,.08);color:var(--fg-on-dark-2);cursor:default;border:1px solid rgba(255,255,255,.14)}
.btn-disabled:active{transform:none}

/* ---- Cards / inputs ---- */
.card{background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:20px;text-decoration:none;color:inherit;display:block}
.card:hover{transform:translateY(-2px);transition:transform .18s ease}
.input{
  width:100%;font-family:var(--font-body);font-size:14px;color:var(--black);
  background:var(--white);border:1px solid rgba(8,1,3,.16);border-radius:var(--radius-sm);
  padding:13px 14px;
}
.input:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 3px rgba(108,74,246,.16)}
.dark .input{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}

.hint{font-size:13px;line-height:1.5;margin:8px 2px 0}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;text-decoration:none;color:var(--grey-700)}
.back:hover{color:var(--black)}
.dark .back{color:var(--fg-on-dark-2)} .dark .back:hover{color:#fff}