/* SHERO — style unikalne dla tej strony. Ładować po base.css. */

.hero { padding-top: 56px; padding-bottom: 80px; text-align: center; }
.hero h1 { font-size: clamp(30px, 5.4vw, 48px); font-weight: 600; line-height: 1.2; margin: 0 0 22px; text-wrap: balance; }
.hero .sub { font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 34px; }

/* dla kogo */
.dla-kogo { padding-top: 30px; padding-bottom: 90px; }
.dla-kogo-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.dla-kogo-photo { order: -1; }
.dla-kogo-photo img { width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: 0 26px 60px -22px rgba(60, 42, 99, 0.32); }
.dla-kogo-text { text-align: center; }
@media (min-width: 760px) {
  .dla-kogo-grid { grid-template-columns: 0.85fr 1.15fr; gap: 50px; }
  .dla-kogo-photo { order: 0; max-width: 340px; }
  .dla-kogo-text { order: 1; text-align: left; }
  .dla-kogo p.body-p { margin-left: 0; margin-right: 0; max-width: none; }
}
.dla-kogo h2 { font-size: clamp(24px, 3.8vw, 32px); margin: 0 0 22px; text-wrap: balance; }
.dla-kogo p.body-p { color: var(--ink-soft); font-size: 16.5px; max-width: 54ch; margin: 0 auto 14px; }
.dla-kogo p.body-p.emph { color: var(--purple-deep); font-weight: 600; }

/* formaty współpracy */
.formaty { padding-top: 20px; padding-bottom: 90px; }
.formaty h2 { text-align: center; font-size: clamp(24px, 3.8vw, 32px); margin: 0 0 14px; text-wrap: balance; }
.formaty .sub { text-align: center; max-width: 52ch; margin: 0 auto 44px; color: var(--ink-soft); }
.formaty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .formaty-grid { grid-template-columns: 1fr; } }
.format-card { border: 1px solid var(--line); background: var(--paper-raised); border-radius: 14px; padding: 26px 26px 24px; }
.format-card .name { font-weight: 700; font-size: 16px; margin-bottom: 10px; display: block; }
.format-card p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-soft); }
.format-card .price-tag { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rose); }
.hero h1 .rose-word { color: var(--rose); border-bottom: 3px solid var(--gold); padding-bottom: 2px; }
.fundament-box .lead-in { text-align: center; font-size: 15px; color: var(--ink-soft); max-width: 50ch; margin: 0 auto 30px; }

/* fundament / model block */
.fundament { padding-top: 30px; padding-bottom: 90px; }
.fundament-box { background: var(--purple-tint); border-radius: 22px; padding: 52px 44px; }
@media (max-width: 640px) { .fundament-box { padding: 36px 22px; } }
.fundament-box .kicker { text-align: center; }
.fundament-box .pull { text-align: center; font-size: clamp(20px, 3.2vw, 27px); color: var(--purple-deep); max-width: 40ch; margin: 0 auto 40px; text-wrap: balance; }
.model-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 760px) { .model-grid { grid-template-columns: repeat(1, 1fr); } }
.model-item { background: var(--paper-raised); border-radius: 12px; padding: 18px 16px; text-align: center; }
.model-item .letter { font-family: 'Fraunces', serif; font-weight: 600; font-size: 30px; color: var(--purple); display: block; margin-bottom: 6px; }
.model-item .name { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; display: block; margin-bottom: 2px; }
.model-item .gloss { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 12.5px; color: var(--ink-faint); display: block; margin-bottom: 10px; }
.model-item p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.fundament-box .close-line { text-align: center; font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 17px; color: var(--purple-deep); margin: 34px 0 0; }

/* bridge */
.bridge { padding-top: 20px; padding-bottom: 90px; }
.bridge-box { border: 1.5px dashed var(--line); border-radius: 18px; padding: 34px 36px; text-align: center; }
.bridge-box .kicker { margin-bottom: 14px; }
.bridge-box p { margin: 0; font-size: 15.5px; color: var(--ink-soft); max-width: 52ch; margin-left: auto; margin-right: auto; }
.bridge-box .name { color: var(--purple); font-weight: 700; }

/* testimonials */
.testimonials { padding-top: 20px; padding-bottom: 90px; }
.testimonials h2 { font-size: clamp(24px, 3.8vw, 32px); margin: 14px 0 40px; text-wrap: balance; }
.testi-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.testi-card { position: relative; border: 1px solid var(--line); background: var(--paper-raised); border-radius: 18px; padding: 32px 40px 28px; text-align: center; box-shadow: 0 20px 44px -26px rgba(60, 42, 99, 0.35); }
.testi-card .pull { font-size: 17px; color: var(--purple-deep); margin: 0 auto 14px; text-wrap: balance; max-width: 68ch; }
.testi-name { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--purple); display: block; }
.testi-context { font-size: 11.5px; color: var(--ink-faint); display: block; margin-top: 4px; }
@media (max-width: 640px) { .testi-card { padding: 24px 24px 24px; } }

/* join */
.join { padding-top: 20px; padding-bottom: 110px; text-align: center; }
.join h2 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 40px; text-wrap: balance; }
.plans { display: flex; margin: 0 auto 20px; }
.plans .plan-card { width: 100%; }
.plan-card { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 36px 40px; background: var(--paper-raised); text-align: center; box-shadow: 0 20px 44px -26px rgba(60, 42, 99, 0.35); }
.plan-card .price { font-family: 'Fraunces', serif; font-weight: 600; font-size: 40px; color: var(--purple-deep); margin: 0; }
.plan-card .price .unit { font-family: 'Karla', sans-serif; font-weight: 500; font-size: 16px; color: var(--ink-faint); }
.plan-card .price-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; }
.plan-card .title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; margin-bottom: 18px; }
.join .note { font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; }