/* =========================================================
   JOMO – Edyta Grygiel | Heybook
   Paleta: czerń + złoto, sekcje kremowe dla kontrastu.
   ========================================================= */

:root{
  --bg:        #0e0e11;
  --bg-2:      #08080b;
  --panel:     #17171c;
  --panel-2:   #1e1e24;
  --cream:     #f5efe4;
  --cream-2:   #ece3d2;
  --ink:       #211d17;
  --ink-soft:  #5a5245;
  --on-dark:   #efe9dd;
  --on-dark-soft: rgba(239,233,221,.64);
  --gold:      #c9a24a;
  --gold-br:   #e7cd86;
  --gold-dp:   #7f6226;
  --line:      rgba(201,162,74,.30);
  --line-soft: rgba(239,233,221,.12);
  --radius:    14px;
  --maxw:      1160px;

  --ff-display: "Playfair Display", Georgia, serif;
  --ff-read:    "Cormorant Garamond", Georgia, serif;
  --ff-sans:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --gold-grad: linear-gradient(180deg,#f4dc9d 0%,#d9b463 42%,#c9a24a 62%,#9a7b32 100%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--on-dark);
  font-family:var(--ff-sans);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:700; line-height:1.12; }
p{ margin:0 0 1.1em; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.narrow{ max-width:780px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- typografia pomocnicza ---------- */
.eyebrow{
  font-family:var(--ff-sans);
  font-size:.74rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .8em;
}
.section-cream .eyebrow{ color:var(--gold-dp); }
.eyebrow.gold{ color:var(--gold); }
.section-title{
  font-family:var(--ff-display);
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  letter-spacing:.005em; margin:0 0 .7em;
}

/* ---------- przyciski ---------- */
.btn{
  --pad-y:14px; --pad-x:30px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:var(--pad-y) var(--pad-x);
  font-family:var(--ff-sans); font-weight:600; font-size:.94rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:2px;
  transition:transform .2s ease, box-shadow .3s ease, background .3s ease, color .2s ease;
}
.btn-lg{ --pad-y:17px; --pad-x:44px; font-size:1rem; }
.btn-gold{
  background:var(--gold-grad); color:#241c08;
  box-shadow:0 8px 26px -12px rgba(201,162,74,.7);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(201,162,74,.85); }
.btn-ghost{
  background:transparent; color:var(--on-dark); border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-br); }
.btn-dark{
  background:var(--ink); color:var(--cream); border-radius:2px;
}
.btn-dark:hover{ transform:translateY(-2px); background:#100e0b; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(10,10,13,.82);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:inline-flex; align-items:center; }
.brand-logo{ height:50px; width:auto; }
.main-nav{ display:flex; gap:34px; }
.main-nav a{
  text-decoration:none; font-size:.82rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-soft); position:relative; padding:6px 0;
  transition:color .2s;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .28s ease;
}
.main-nav a:hover{ color:var(--on-dark); }
.main-nav a:hover::after{ width:100%; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:40px; height:40px;
  background:none; border:0; cursor:pointer; padding:9px 8px; z-index:70;
}
.nav-toggle span{ height:2px; width:100%; background:var(--on-dark); border-radius:2px; transition:.3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; padding:clamp(48px,8vw,96px) 0 clamp(56px,9vw,104px);
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(201,162,74,.14), transparent 55%),
    radial-gradient(90% 70% at 10% 100%, rgba(201,162,74,.06), transparent 60%),
    var(--bg);
  overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(32px,6vw,80px); align-items:center; }
.hero-cover{ position:relative; display:flex; justify-content:center; }
.hero-cover img{
  width:min(360px,80%); border-radius:4px;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));
}
.hero-cover::after{
  content:""; position:absolute; inset:auto 0 -6% 0; height:44px; margin:0 12%;
  background:radial-gradient(closest-side, rgba(201,162,74,.4), transparent 78%);
  filter:blur(10px);
}
.hero-title{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(4rem,13vw,8.2rem); line-height:1.04; letter-spacing:.04em;
  margin:0 0 .12em; padding-top:.06em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-def{ font-family:var(--ff-read); font-size:1.45rem; line-height:1.4; color:var(--on-dark); margin-bottom:1.1em; }
.hero-def span{ font-style:italic; color:var(--gold-br); }
.hero-copy p{ color:var(--on-dark-soft); max-width:52ch; }
.hero-copy .hero-def{ color:var(--on-dark); }
.hero-author{ font-size:.78rem !important; letter-spacing:.22em; text-transform:uppercase; color:var(--gold) !important; margin-top:1.4em !important; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:1.7em; }

/* =========================================================
   FRAGMENT
   ========================================================= */
.fragment{ padding:clamp(60px,9vw,110px) 0; background:var(--bg-2); border-top:1px solid var(--line-soft); }
.fragment .eyebrow{ color:var(--gold); }
.fragment-teaser{
  font-family:var(--ff-read); font-size:1.42rem; line-height:1.55; color:var(--on-dark);
  max-width:44ch;
}
.fragment-toggle{
  display:inline-flex; align-items:center; gap:14px; margin-top:2em;
  background:transparent; color:var(--on-dark); cursor:pointer;
  border:1px solid var(--line); border-radius:2px; padding:16px 26px;
  font-family:var(--ff-sans); font-weight:600; letter-spacing:.05em; font-size:.92rem;
  transition:border-color .25s, color .25s, background .25s;
}
.fragment-toggle:hover{ border-color:var(--gold); color:var(--gold-br); }
.fragment-toggle-icon{ position:relative; width:14px; height:14px; flex:none; }
.fragment-toggle-icon::before,.fragment-toggle-icon::after{
  content:""; position:absolute; background:currentColor; transition:transform .3s ease, opacity .3s;
}
.fragment-toggle-icon::before{ top:6px; left:0; width:14px; height:2px; }
.fragment-toggle-icon::after{ left:6px; top:0; width:2px; height:14px; }
.fragment-toggle[aria-expanded="true"] .fragment-toggle-icon::after{ transform:scaleY(0); opacity:0; }

.fragment-body{ overflow:hidden; }
.fragment-text{
  margin-top:2.4em; padding-top:2.2em; border-top:1px solid var(--line);
  font-family:var(--ff-read); font-size:1.32rem; line-height:1.68; color:rgba(239,233,221,.9);
  column-count:1;
}
.fragment-text p{ margin:0 0 1.15em; }
.fragment-text .dropcap{ font-style:italic; color:var(--gold-br); font-size:1.5rem; }
.fragment-text .fragment-close{ font-style:italic; color:var(--gold); text-align:right; margin-top:1.6em; }

/* =========================================================
   KARUZELA CYTATÓW
   ========================================================= */
.quotes{
  position:relative; padding:clamp(56px,8vw,96px) clamp(56px,9vw,120px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(201,162,74,.10), transparent 60%),
    var(--bg);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.quote-viewport{ max-width:900px; margin:0 auto; overflow:hidden; }
.quote-track{ display:flex; list-style:none; margin:0; padding:0; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.quote-slide{ flex:0 0 100%; padding:0 8px; display:flex; align-items:center; justify-content:center; }
.quote-slide blockquote{
  margin:0; text-align:center; font-family:var(--ff-display); font-style:italic;
  font-weight:500; font-size:clamp(1.4rem,3.4vw,2.25rem); line-height:1.4;
  color:var(--on-dark); min-height:2.8em; display:flex; align-items:center; justify-content:center;
}
.quote-slide blockquote::first-letter{ color:var(--gold); }
.quote-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border:1px solid var(--line); border-radius:50%;
  background:rgba(20,20,24,.6); cursor:pointer; transition:border-color .25s, background .25s;
}
.quote-arrow:hover{ border-color:var(--gold); background:rgba(201,162,74,.12); }
.quote-arrow::before{
  content:""; position:absolute; top:50%; left:50%; width:9px; height:9px;
  border-top:2px solid var(--gold-br); border-right:2px solid var(--gold-br);
}
.quote-arrow.prev{ left:clamp(12px,3vw,34px); }
.quote-arrow.prev::before{ transform:translate(-30%,-50%) rotate(-135deg); }
.quote-arrow.next{ right:clamp(12px,3vw,34px); }
.quote-arrow.next::before{ transform:translate(-70%,-50%) rotate(45deg); }
.quote-dots{ display:flex; justify-content:center; gap:10px; margin-top:34px; }
.quote-dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:rgba(239,233,221,.25); cursor:pointer; transition:background .25s, transform .25s;
}
.quote-dots button.active{ background:var(--gold); transform:scale(1.35); }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{ padding:clamp(52px,7vw,84px) 0; text-align:center; background:var(--bg-2); }
.cta-band-text{ font-family:var(--ff-display); font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--on-dark); margin-bottom:1em; }
.cta-note{ margin-top:1.4em; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }

/* =========================================================
   SEKCJE KREMOWE (Autorka, Opinie)
   ========================================================= */
.section-cream{ background:var(--cream); color:var(--ink); }
.section-cream .section-title{ color:var(--ink); }
.section-cream p{ color:var(--ink-soft); }

/* Autorka */
.author{ padding:clamp(60px,9vw,110px) 0; }
.author-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,72px); align-items:center; }
.author-photo{ display:flex; justify-content:center; }
.author-photo img{ border-radius:6px; box-shadow:0 26px 50px -22px rgba(33,29,23,.5); width:100%; max-width:360px; object-fit:cover; }
.author-photo-placeholder{
  width:100%; max-width:340px; aspect-ratio:4/5; border:1px solid rgba(33,29,23,.28);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(33,29,23,.03) 0 12px, transparent 12px 24px);
  color:rgba(33,29,23,.62); text-align:center; font-size:.9rem; letter-spacing:.18em; text-transform:uppercase;
}
.author-copy p em{ color:var(--ink); font-style:italic; }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter{
  padding:clamp(56px,8vw,96px) 0; text-align:center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(201,162,74,.12), transparent 60%),
    var(--panel);
  border-top:1px solid var(--line-soft);
}
.newsletter-sub{ color:var(--on-dark-soft); margin-bottom:2em; }
.newsletter-form{ max-width:520px; margin:0 auto; }
.field-inline{ display:flex; gap:10px; }
.field-inline input{
  flex:1; min-width:0; padding:15px 18px; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:2px; color:var(--on-dark); font-size:1rem; font-family:var(--ff-sans);
}
.field-inline input::placeholder{ color:rgba(239,233,221,.4); }
.field-inline input:focus{ outline:none; border-color:var(--gold); }
.field-inline .btn{ flex:none; }

/* zgoda RODO */
.consent{ display:flex; gap:11px; align-items:flex-start; margin-top:16px; text-align:left;
  font-size:.82rem; line-height:1.5; color:var(--on-dark-soft); cursor:pointer; }
.section-cream .consent{ color:var(--ink-soft); }
.consent input{ margin-top:3px; flex:none; width:17px; height:17px; accent-color:var(--gold); }

.form-msg{ margin:14px 0 0; font-size:.9rem; min-height:1.2em; }
.form-msg.ok{ color:var(--gold-br); }
.section-cream .form-msg.ok{ color:var(--gold-dp); }
.form-msg.err{ color:#e2896f; }

/* =========================================================
   OPINIE (form)
   ========================================================= */
.reviews{ padding:clamp(60px,9vw,110px) 0; }
.reviews-sub{ margin-bottom:2.2em; }
.review-form{ max-width:640px; }
.field{ margin-bottom:20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label,.field-label{ display:block; margin-bottom:7px; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.field .req{ color:var(--gold); }
.review-form input:not([type=checkbox]):not([type=radio]),
.review-form textarea{
  width:100%; padding:14px 16px; background:#fff; border:1px solid rgba(33,29,23,.2);
  border-radius:3px; font-size:1rem; font-family:var(--ff-sans); color:var(--ink); resize:vertical;
}
.review-form input:not([type=checkbox]):not([type=radio]):focus,
.review-form textarea:focus{ outline:none; border-color:var(--gold-dp); box-shadow:0 0 0 3px rgba(201,162,74,.16); }
.review-form .consent input{ accent-color:var(--gold-dp); }

/* gwiazdki */
.rating{ display:inline-flex; flex-direction:row-reverse; gap:4px; }
.rating input{ position:absolute; width:1px; height:1px; opacity:0; }
.rating label{ font-size:2rem; line-height:1; color:rgba(33,29,23,.45); cursor:pointer; transition:color .15s; margin:0; }
.rating input:checked ~ label{ color:var(--gold); }
.rating label:hover,.rating label:hover ~ label{ color:var(--gold-br); }
.rating input:focus-visible + label{ outline:2px solid var(--gold-dp); outline-offset:2px; }

/* =========================================================
   WYDAWNICTWO
   ========================================================= */
.publisher{ padding:clamp(60px,9vw,110px) 0; text-align:center; background:var(--bg); }
.publisher-logo{ margin-bottom:2.4em; }
.publisher-logo img{ height:78px; width:auto; margin:0 auto; }
.publisher-text{ max-width:720px; margin:0 auto; }
.publisher-text p{ font-family:var(--ff-read); font-size:1.42rem; line-height:1.55; color:var(--on-dark); }
.publisher-text p:first-child{ color:var(--gold-br); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding:clamp(56px,8vw,100px) 0; background:var(--bg-2); border-top:1px solid var(--line-soft); }
.accordion{ margin-top:1.4em; border-top:1px solid var(--line-soft); }
.acc-item{ border-bottom:1px solid var(--line-soft); }
.acc-head{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:22px 4px; color:var(--on-dark); font-family:var(--ff-sans); font-weight:500; font-size:1.06rem;
  transition:color .2s;
}
.acc-head:hover{ color:var(--gold-br); }
.acc-icon{ position:relative; flex:none; width:14px; height:14px; }
.acc-icon::before,.acc-icon::after{ content:""; position:absolute; background:var(--gold); transition:transform .3s; }
.acc-icon::before{ top:6px; left:0; width:14px; height:2px; }
.acc-icon::after{ left:6px; top:0; width:2px; height:14px; }
.acc-head[aria-expanded="true"] .acc-icon::after{ transform:scaleY(0); }
.acc-panel{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.acc-panel p{ margin:0 4px 22px; color:var(--on-dark-soft); }
.acc-panel a{ color:var(--gold); }
.faq-note{ margin-top:2.4em; font-size:.84rem; letter-spacing:.06em; color:var(--on-dark-soft); font-style:italic; }

/* =========================================================
   KONTAKT
   ========================================================= */
.contact{ padding:clamp(60px,9vw,110px) 0; text-align:center; background:var(--bg); }
.contact-cards{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin:0 auto 3em; }
.contact-card{
  flex:1 1 240px; max-width:320px; text-decoration:none; padding:26px 24px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  transition:border-color .25s, transform .25s, background .25s;
  display:flex; flex-direction:column; gap:8px;
}
.contact-card:hover{ border-color:var(--gold); transform:translateY(-3px); background:var(--panel-2); }
.contact-card-label{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-soft); }
.contact-card-mail{ font-family:var(--ff-display); font-size:1.24rem; color:var(--gold-br); word-break:break-word; }
.socials p{ color:var(--on-dark-soft); }
.socials ul{ list-style:none; margin:.6em 0 1.4em; padding:0; display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:center; }
.socials a{ text-decoration:none; color:var(--on-dark); border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .2s, border-color .2s; }
.socials a:hover{ color:var(--gold-br); border-color:var(--gold); }
.socials-note{ max-width:560px; margin:0 auto; font-size:.95rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ padding:56px 0 44px; background:var(--bg-2); border-top:1px solid var(--line-soft); text-align:center; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.footer-logo{ height:52px; width:auto; opacity:.9; }
.footer-tag{ font-family:var(--ff-read); font-size:1.2rem; font-style:italic; color:var(--on-dark-soft); margin:0; }
.footer-copy{ font-size:.82rem; color:rgba(239,233,221,.4); margin:0; }
.footer-copy a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.footer-links{ margin:0; }
.footer-links a{ color:var(--gold-br); text-decoration:none; font-size:.95rem;
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .2s, border-color .2s; }
.footer-links a:hover{ color:var(--gold); border-color:var(--gold); }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
/* animacja tylko gdy JS aktywny – bez JS treść jest normalnie widoczna */
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
html.js .reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */
@media (max-width:900px){
  .header-inner{ height:64px; }
  /* bez backdrop-filter na mobile – inaczej tworzy blok zawierający dla fixed i psuje wysuwane menu */
  .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(8,8,11,.94); }
  .nav-toggle{ display:flex; }
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px);
    flex-direction:column; gap:0; justify-content:center; align-items:flex-start;
    padding:80px 40px; background:rgba(8,8,11,.98); backdrop-filter:blur(10px);
    transform:translateX(100%); transition:transform .35s ease; box-shadow:-30px 0 60px rgba(0,0,0,.5);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ font-size:1.05rem; padding:16px 0; letter-spacing:.1em; }
  body.nav-open{ overflow:hidden; }

  .hero-grid{ grid-template-columns:1fr; text-align:center; gap:36px; }
  .hero-cover{ order:-1; }
  .hero-copy p,.fragment-teaser{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .hero-def{ font-size:1.28rem; }

  .author-grid{ grid-template-columns:1fr; text-align:center; gap:30px; }
  .author-photo{ order:-1; }
  .author-copy p{ margin-left:auto; margin-right:auto; max-width:56ch; }
  .author-photo-placeholder{ margin:0 auto; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  .quotes{ padding:clamp(48px,10vw,72px) 20px; }
  .quote-arrow{ display:none; } /* na mobile: swipe + kropki, bez kolizji z tekstem */
  .quote-slide blockquote{ font-size:1.22rem; }
  .field-inline{ flex-direction:column; }
  .field-inline .btn{ width:100%; }
  .field-row{ grid-template-columns:1fr; }
  .fragment-text{ font-size:1.2rem; }
  .contact-cards{ flex-direction:column; align-items:stretch; }
  .contact-card{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.js .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   POPRAWKI v2 (ciemny motyw): fix tytułu, header, centrowanie
   ========================================================= */

/* --- fix przycinania liter JOMO (gradient + background-clip:text) --- */
.hero-title{
  line-height:1.18; padding:.18em .05em .12em; margin:0 0 .1em;
  overflow:visible;
}

/* --- HEADER: bez wersalików, subtelny przycisk zamawiania, sticky ze stanem scroll --- */
.header-inner{ display:flex; align-items:center; justify-content:flex-start; gap:26px; }
.brand{ margin-right:auto; }
.main-nav a{ text-transform:none; font-size:.96rem; letter-spacing:.015em; }
.nav-order{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:11px 26px; border:0; border-radius:2px;
  color:#241c08; background:var(--gold-grad); text-decoration:none;
  font-family:var(--ff-sans); font-weight:600; font-size:.84rem; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 8px 24px -12px rgba(201,162,74,.7);
  transition:transform .2s ease, box-shadow .3s ease;
}
.nav-order:hover,.nav-order:focus-visible{ transform:translateY(-2px); box-shadow:0 14px 32px -12px rgba(201,162,74,.9); outline:none; }
.site-header{ transition:background .3s ease, box-shadow .3s ease; }
.site-header.scrolled{ background:rgba(8,8,11,.95); box-shadow:0 10px 34px -10px rgba(0,0,0,.65); }

/* --- CENTROWANIE sekcji (eyebrow + tytuł + elementy) --- */
.fragment .wrap{ text-align:center; }
.fragment-teaser{ margin-left:auto; margin-right:auto; }
.fragment-text{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; max-width:680px; margin-left:auto; margin-right:auto; }

/* Autorka: układ dwukolumnowy (zdjęcie po lewej), wyśrodkowany tylko tekst */
.author-copy{ text-align:center; }
.author-copy p{ margin-left:auto; margin-right:auto; max-width:60ch; }

.faq .wrap{ text-align:center; }
.acc-head{ text-align:left; }
.acc-panel p{ text-align:left; }

/* --- CTA: mała okładka po lewej, tekst obok --- */
.cta-band .wrap{ display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:clamp(28px,5vw,56px); flex-wrap:wrap; }
.cta-cover{ width:clamp(120px,15vw,164px); height:auto; margin:0; border-radius:3px;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.6)); }
.cta-text{ text-align:center; }

/* --- WYDAWNICTWO: dużo większe logo --- */
.publisher-logo img{ height:clamp(150px,24vw,250px); max-width:100%; }

@media (max-width:900px){
  .nav-order{ padding:8px 14px; font-size:.86rem; }
  .brand-logo{ height:44px; }
}
@media (max-width:400px){
  .nav-order{ padding:7px 11px; font-size:.8rem; }
}

/* hero: tekst i przyciski wyśrodkowane (okładka zostaje po lewej) */
.hero-copy{ text-align:center; }
.hero-copy p{ margin-left:auto; margin-right:auto; }
.hero-cta{ justify-content:center; }

/* desktop: opcje menu wyśrodkowane między logo a przyciskiem „Zamów książkę” */
@media (min-width:901px){
  .header-inner{ position:relative; justify-content:space-between; }
  .brand{ margin-right:0; }
  .main-nav{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
}

/* =========================================================
   POPRAWKI v3
   ========================================================= */

/* przycisk „Przeczytaj fragment”: domyślnie w kolorze, hover jak „Zamów książkę” */
.fragment-toggle{ background:transparent; color:var(--gold-br); border-color:var(--gold); }
.fragment-toggle:hover{ background:var(--gold); color:#241c08; border-color:var(--gold); transform:translateY(-1px); }

/* --- Fragment jako panel czytania: podgląd + zanik + „Czytaj dalej” --- */
.fragment-panel{
  position:relative; max-width:720px; margin:2.6em auto 0; text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006));
  border:1px solid var(--line); border-radius:6px;
  padding:clamp(30px,5vw,58px) clamp(24px,4vw,54px);
  box-shadow:0 40px 90px -45px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.045);
}
.fragment-text{
  margin-top:0; padding-top:0; border-top:0;
  overflow:hidden; max-height:360px; transition:max-height .55s ease;
}
.fragment-epigraph{
  font-family:var(--ff-read); font-style:italic; font-size:1.55rem; line-height:1.4;
  color:var(--gold-br); text-align:center; margin:0 0 1.35em;
}
.fragment-text .has-dropcap::first-letter{
  float:left; font-family:var(--ff-display); font-weight:700; font-size:3.5em; line-height:.72;
  color:var(--gold); margin:.04em .14em -.02em 0;
}
.fragment-fade{
  position:absolute; left:1px; right:1px; bottom:1px; height:210px; pointer-events:none;
  border-radius:0 0 6px 6px;
  background:linear-gradient(to bottom, rgba(8,8,11,0) 0%, rgba(8,8,11,.75) 60%, #08080b 100%);
  transition:opacity .45s ease;
}
.fragment-panel.open .fragment-fade{ opacity:0; }
.fragment-toggle{ margin-top:2em; }

/* hero: mniejszy odstęp góra/dół o 20px */
.hero{ padding-top:calc(clamp(48px,8vw,96px) - 20px); padding-bottom:calc(clamp(56px,9vw,104px) - 20px); }

/* „Edyta Grygiel · powieść” większe (+4px) */
.hero-author{ font-size:1.02rem !important; letter-spacing:.18em; }

/* nagłówki sekcji +2px */
.section-title{ font-size:clamp(1.82rem,3.7vw,2.62rem); }

/* manifest wydawnictwa: większy i wyraźniejszy */
.publisher-text p{ font-size:1.55rem; color:var(--on-dark); }
.publisher-text p:first-child{ color:var(--gold-br); font-weight:500; }

/* pasek przewijania w kolorze złota */
html{ scrollbar-color:var(--gold) #0b0b0e; scrollbar-width:thin; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#0b0b0e; }
::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:8px; border:3px solid #0b0b0e; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-br); }

/* --- Strona /opinie/ : formularz na ciemnym tle --- */
.reviews-dark{ background:var(--bg); color:var(--on-dark);
  padding-top:clamp(56px,9vw,110px); padding-bottom:clamp(56px,9vw,110px); }
.reviews-dark .wrap{ text-align:center; }
.reviews-dark .section-title{ color:var(--on-dark); }
.reviews-dark p{ color:var(--on-dark-soft); }
.reviews-dark .review-form{ text-align:left; margin-left:auto; margin-right:auto; }
.reviews-dark .field label,.reviews-dark .field-label{ color:var(--on-dark-soft); }
.reviews-dark .review-form input:not([type=checkbox]):not([type=radio]),
.reviews-dark .review-form textarea{
  background:rgba(255,255,255,.05); border-color:var(--line); color:var(--on-dark);
}
.reviews-dark .review-form input::placeholder,
.reviews-dark .review-form textarea::placeholder{ color:rgba(239,233,221,.4); }
.reviews-dark .review-form input:focus,.reviews-dark .review-form textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,74,.16); }
.reviews-dark .rating label{ color:rgba(239,233,221,.45); }
.reviews-dark .rating input:checked ~ label{ color:var(--gold); }
.reviews-dark .rating label:hover,.reviews-dark .rating label:hover ~ label{ color:var(--gold-br); }
.reviews-dark .consent{ color:var(--on-dark-soft); }
.reviews-dark .consent input{ accent-color:var(--gold); }
.back-link{ display:inline-flex; align-items:center; gap:8px; margin-top:2.4em;
  color:var(--on-dark-soft); text-decoration:none; font-size:.92rem; transition:color .2s; }
.back-link:hover{ color:var(--gold-br); }

/* --- Sekcja „O książce” (rozbudowany opis) --- */
.about-book{ padding:clamp(56px,8vw,96px) 0; background:var(--bg); border-top:1px solid var(--line-soft); }
.about-book .wrap{ text-align:center; }
.about-book .eyebrow{ color:var(--gold); }
.about-book p{
  font-family:var(--ff-read); font-size:1.34rem; line-height:1.66;
  color:var(--on-dark-soft); margin:0 auto 1.1em; max-width:60ch;
}
.about-book-close{
  font-style:italic; color:var(--gold-br) !important;
  font-size:1.5rem !important; margin-top:1.5em !important;
}

/* zamknięcie fragmentu (motto na końcu) */
.fragment-outro{
  margin-top:2em; padding-top:1.6em; border-top:1px solid var(--line-soft);
  font-size:1.35rem;
}

/* ============================================================
   FEEDBACK 2026-07-24 (e-book, przypisy, opinia, jasne logo)
   ============================================================ */

/* --- Hero: formaty + ceny (papier / e-book) widoczne od góry --- */
.hero-formats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin:1.4em 0 0 !important;
  max-width:none !important; font-family:var(--ff-sans); letter-spacing:.01em;
}
.hero-formats .fmt{
  display:inline-flex; align-items:center; gap:.5em;
  padding:8px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:.9rem; color:var(--on-dark-soft); background:rgba(201,162,74,.06);
}
.hero-formats .fmt strong{ color:var(--gold-br); font-weight:600; }

/* --- Fragment: przypisy do cytatów --- */
.fn-ref{ font-size:.62em; color:var(--gold); font-style:normal; vertical-align:super; line-height:0; padding-left:2px; }
.fragment-notes{
  list-style:decimal; margin:2.2em 0 0; padding:1.4em 0 0 1.5em;
  border-top:1px solid var(--line-soft); text-align:left; hyphens:none;
  font-family:var(--ff-sans); font-size:.85rem; line-height:1.55; color:var(--on-dark-soft);
}
.fragment-notes li{ margin:0 0 .5em; padding-left:.3em; }
.fragment-notes li::marker{ color:var(--gold); }

/* --- Autorka: link do opinii na dole (sekcja kremowa) --- */
.author-review-link{ margin-top:1.8em !important; }
.author-review-link a{
  color:var(--gold-dp); text-decoration:none; font-weight:600;
  font-family:var(--ff-sans); font-size:.98rem;
  border-bottom:1px solid rgba(154,123,50,.45); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.author-review-link a:hover{ color:var(--ink); border-color:var(--gold-dp); }

/* --- Jasne tło pod logo (czarno-złote logo): header / Wydawnictwo / stopka --- */
.site-header{ background:rgba(245,239,228,.9); border-bottom:1px solid rgba(33,29,23,.10); }
.site-header.scrolled{ background:rgba(245,239,228,.97); box-shadow:0 10px 34px -14px rgba(0,0,0,.28); }
.main-nav a{ color:var(--ink-soft); }
.main-nav a:hover{ color:var(--ink); }
.nav-toggle span{ background:var(--ink); }

.publisher{ background:var(--cream); border-top:1px solid rgba(33,29,23,.08); }
.publisher-text p{ color:var(--ink); }
.publisher-text p:first-child{ color:var(--gold-dp); }

.site-footer{ background:var(--cream); border-top:1px solid rgba(33,29,23,.10); }
.footer-tag{ color:var(--ink-soft); }
.footer-copy{ color:rgba(33,29,23,.66); }
.footer-copy a{ color:var(--gold-dp); }
.footer-logo{ opacity:1; }

/* mobilne menu też jasne (spójnie z jasnym headerem) */
@media (max-width:900px){
  .site-header{ background:rgba(245,239,228,.96); }
  .main-nav{ background:rgba(245,239,228,.99); box-shadow:-30px 0 60px rgba(0,0,0,.18); }
}

/* --- CTA band: dwie opcje zakupu (papier / e-book), dwa przyciski --- */
.cta-options{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:1.7em; width:100%; }
.cta-option{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  flex:1 1 340px; max-width:400px;
  padding:30px 34px 32px;
  border:1px solid var(--line); border-radius:14px; background:rgba(201,162,74,.05);
}
.cta-option-label{ font-family:var(--ff-sans); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.cta-option-price{ font-family:var(--ff-display); font-size:2.1rem; line-height:1; color:var(--on-dark); }
.cta-option-points{ list-style:none; margin:6px 0 4px; padding:0; text-align:left; align-self:stretch; }
.cta-option-points li{
  position:relative; padding-left:26px; margin:0 0 11px;
  font-family:var(--ff-sans); font-size:.9rem; line-height:1.45; color:var(--on-dark-soft);
}
.cta-option-points li:last-child{ margin-bottom:0; }
.cta-option-points li::before{
  content:""; position:absolute; left:4px; top:.1em;
  width:6px; height:11px; border:solid var(--gold); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.cta-option .btn{ margin-top:10px; width:100%; }
@media (max-width:820px){
  .cta-options{ flex-direction:column; align-items:center; }
  .cta-option{ width:100%; max-width:420px; }
}