/* BEST OF MIAZGA — redesign tokens & primitives */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Manrope:wght@400;500;600;700;800&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* Brand */
  --pink: #FF2E9F;
  --pink-2: #E5147A;
  --magenta: #C81D8C;
  --purple: #6F1FB6;
  --purple-2: #4A1485;
  --deep: #2A0F4A;
  --ink: #15082A;
  --muted: #6B5778;
  --line: rgba(21, 8, 42, 0.10);
  --line-2: rgba(21, 8, 42, 0.06);
  --cream: #FBF7F4;
  --paper: #FFFFFF;
  --soft: #F4ECF6;

  --grad: linear-gradient(96deg, #FF2E9F 0%, #C81D8C 45%, #6F1FB6 100%);
  --grad-soft: linear-gradient(135deg, #FFE1F0 0%, #EAD8F7 100%);

  --display: 'Mulish', 'Helvetica Neue', sans-serif;
  --body: 'Manrope', 'Helvetica Neue', sans-serif;
  --script: 'Caveat', cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.bom {
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.bom h1, .bom h2, .bom h3, .bom h4, .bom h5 {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.bom p { margin: 0; line-height: 1.55; }

.bom a { color: inherit; text-decoration: none; }
.bom button { font-family: inherit; cursor: pointer; }

/* Gradient text — used sparingly */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.script {
  font-family: var(--script);
  font-style: normal;
  font-weight: 600;
  color: var(--purple);
}

/* Eyebrow */
.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad);
  color: white;
  box-shadow: 0 10px 30px -10px rgba(255, 46, 159, 0.6);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -12px rgba(255, 46, 159, 0.8);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: white; }
.btn-light {
  background: white;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(21, 8, 42, 0.08);
}

.btn-sm { padding: 12px 18px; font-size: 12px; }

/* Pills / chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 46, 159, 0.10);
  color: var(--pink-2);
}
.chip-dark { background: var(--ink); color: white; }
.chip-out { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.chip-grad { background: var(--grad); color: white; }

/* Card */
.card {
  background: white;
  border-radius: 24px;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(21, 8, 42, 0.02), 0 18px 40px -28px rgba(21, 8, 42, 0.18);
  overflow: hidden;
}

/* Program "poster" cover */
.poster {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
}
.poster .label {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.poster .name {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: 56px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: white;
  text-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* Icon meta row on program cards */
.meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 12px;
  background: var(--cream);
  border-radius: 12px;
  border: 1px solid var(--line-2);
}
.meta-item .icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--grad);
  color: white;
}
.meta-item .num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.meta-item .lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}
.poster .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Specific posters — real cover photos */
.cover-beton20    { background: #15082A url('assets/covers/beton20.jpg') center/cover no-repeat; }
.cover-lipo3      { background: #15082A url('assets/covers/lipolizja3.jpg') center/cover no-repeat; }
.cover-lipo2      { background: #15082A url('assets/covers/lipolizja2.png') center/cover no-repeat; }
.cover-lipo1      { background: #15082A url('assets/covers/lipolizja.jpg') center/cover no-repeat; }
.cover-trylog1    { background: #6F1FB6 url('assets/covers/trylogja.jpg') center/cover no-repeat; }
.cover-trylog2    { background: #6F1FB6 url('assets/covers/trylogja2.jpg') center/cover no-repeat; }
.cover-siostry-prem { background: #6F1FB6 url('assets/covers/trzysiostrypremium.jpg') center/cover no-repeat; }
.cover-siostry    { background: #6F1FB6 url('assets/covers/trzysiostry.jpg') center/cover no-repeat; }
.cover-kuzynki    { background: #6F1FB6 url('assets/covers/kuzynki.jpg') center/cover no-repeat; }
.cover-starter    { background: #6F1FB6 url('assets/covers/starter.jpg') center/cover no-repeat; }
.cover-all        { background: #15082A url('assets/covers/pakiet.png') center/cover no-repeat; }

/* Burst / sticker */
.burst {
  --r: 36px;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  background: white;
  color: var(--pink-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 11px;
  text-align: center;
  line-height: 1;
  letter-spacing: -0.01em;
  position: relative;
  filter: drop-shadow(0 6px 14px rgba(21,8,42,0.18));
}

/* Underline accent */
.scribble {
  position: relative;
  display: inline-block;
}
.scribble::after {
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  bottom: 4%;
  height: 0.18em;
  background: var(--grad);
  border-radius: 999px;
  z-index: -1;
  opacity: 0.85;
}

/* Section spacing */
.section { padding: 100px 0; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

/* Marquee — kept but tamed */
.marquee {
  display: flex;
  overflow: hidden;
  gap: 28px;
  align-items: center;
  white-space: nowrap;
}
.marquee-track {
  display: flex;
  gap: 28px;
  align-items: center;
  animation: marquee 36s linear infinite;
  flex-shrink: 0;
  padding-right: 28px;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Soft shadow card */
.softcard {
  background: white;
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--line-2);
}

/* Tag dots */
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); display: inline-block; }

/* Mini detail rows on cards */
.meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

/* Price */
.price-old {
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
  font-weight: 600;
}
.price-now {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  color: var(--ink);
}

/* Avatar */
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
}

/* Quote glyph */
.quote-glyph {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 80px;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Star */
.stars { color: var(--pink); letter-spacing: 2px; font-size: 14px; }

/* Header / nav */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 244, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  color: var(--ink);
  opacity: 0.75;
  transition: opacity .15s;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
}

/* Logo wordmark — used inline so we don't depend on PNG transparency choices */
.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.85;
  display: flex;
  flex-direction: column;
}
.wordmark .small {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: none;
  font-style: italic;
  font-weight: 800;
}
.wordmark .big {
  font-size: 22px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wordmark .tag {
  font-family: var(--script);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: var(--purple);
  margin-top: -2px;
}

/* ============================================================
   RESPONSIVE LAYER
   ============================================================ */

/* Tablet — < 1024px */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .section { padding: 72px 0; }

  /* Collapse 2-col grids to single column */
  .bom div[style*="grid-template-columns: 1fr 1fr"],
  .bom div[style*="grid-template-columns: 1fr 1.05fr"],
  .bom div[style*="grid-template-columns: 1fr 1.1fr"],
  .bom div[style*="grid-template-columns: 1fr 1.2fr"],
  .bom div[style*="grid-template-columns: 1.05fr 1fr"],
  .bom div[style*="grid-template-columns: 1.1fr 1fr"],
  .bom div[style*="grid-template-columns: 1.2fr 1fr"],
  .bom div[style*="grid-template-columns: 1.4fr 1fr"],
  .bom div[style*="grid-template-columns: 0.9fr 1.3fr"],
  .bom div[style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Programs grid 3col → 2col */
  .bom div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Headlines tame */
  .bom h1 { font-size: 64px !important; }
  .bom h2 { font-size: 48px !important; }
  .bom h3 { font-size: 24px !important; }

  /* Hero numbers */
  .bom div[style*="font-size: 88px"],
  .bom div[style*="font-size: 96px"] { font-size: 64px !important; }
}

/* Mobile — < 768px */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }

  /* All multi-col grids → single column */
  .bom div[style*="grid-template-columns: repeat(2"],
  .bom div[style*="grid-template-columns: repeat(3"],
  .bom div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* But keep stat strips as 2 col on mobile */
  .bom .stat-grid,
  .bom div[data-stat-grid] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Headlines */
  .bom h1 { font-size: 44px !important; line-height: 1 !important; }
  .bom h2 { font-size: 36px !important; line-height: 1.05 !important; }
  .bom h3 { font-size: 22px !important; }

  /* Big script sizes */
  .bom .script,
  .bom div[style*="font-family: var(--script)"] { font-size: 28px !important; }

  /* Eyebrow + small caps stay */
  .bom .eyebrow { font-size: 11px !important; }

  /* Hide nav links, show only logo + cart on mobile */
  .nav-links { display: none !important; }
  .nav { padding: 14px 0 !important; }

  /* Buttons full width */
  .bom .btn { padding: 14px 18px !important; font-size: 13px !important; }

  /* Sticky overrides — disable sticky covers on mobile so layout flows */
  .bom div[style*="position: sticky"] { position: static !important; }

  /* Hero / poster — keep aspect, but cap padding */
  .bom .poster { padding: 24px !important; }

  /* Footer grid → stack */
  .bom footer div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Marquee — slow down a bit */
  .marquee-track { animation-duration: 28s !important; }

  /* Inline gaps that are too big */
  .bom div[style*="gap: 80px"],
  .bom div[style*="gap: 64px"] { gap: 32px !important; }
  .bom div[style*="padding: 120px"] { padding: 64px 0 !important; }
  .bom div[style*="padding: 100px"] { padding: 56px 0 !important; }

  /* Hero title with very large sizes */
  .bom h1[style*="font-size: 120px"],
  .bom h1[style*="font-size: 110px"],
  .bom h1[style*="font-size: 100px"] { font-size: 48px !important; }

  /* Reduce huge price */
  .bom span[style*="font-size: 56px"],
  .bom div[style*="font-size: 48px"] { font-size: 36px !important; }

  /* Sticky buy bar — stack content */
  .bom div[style*="position: sticky"][style*="bottom: 0"] {
    position: sticky !important;
    bottom: 0 !important;
  }
}

/* Very small — < 420px */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .bom h1 { font-size: 36px !important; }
  .bom h2 { font-size: 28px !important; }
}