/* ============================================
   AMORÉ — Zaproszenia Online
   Pressed Flowers × Editorial × Instagram 2026
   ============================================ */

/* === Global smooth scroll behavior === */
html { scroll-behavior: smooth; }

/* === Scroll margin for anchored sections — sticky nav doesn't cover them === */
section[id], [data-view] { scroll-margin-top: 90px; }

/* === Page enter animation — subtle fade-in on every page load === */
/* Prevents the "harsh flash" feeling when navigating between pages.
   Body starts at opacity 0 and fades to 1 over 380ms — barely perceptible
   but feels noticeably smoother than instant render. */
@keyframes amore-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
body {
  animation: amore-page-enter 0.38s ease-out;
}

/* === Reduced motion support (a11y) === */
/* Respect user's OS preference for reduced motion — disables/slows animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  body { animation: none; }
}

/* === Loading spinner for in-button states === */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  color: var(--cream);
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-loading::after { animation: none; border-top-color: currentColor; opacity: 0.5; }
}

/* === Cookie consent banner === */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  max-width: 560px; margin: 0 auto;
  background: #1F1A14; color: #FBF6EC;
  border-radius: 14px; padding: 20px 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  z-index: 9500;
  display: none;
  font-family: Inter, system-ui, sans-serif;
  transform: translateY(120%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  border: 1px solid rgba(176,122,112,0.3);
}
.cookie-banner.show { display: block; transform: translateY(0); }
.cookie-banner .cb-title {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px;
  margin-bottom: 6px; color: #FBF6EC;
}
.cookie-banner .cb-text {
  font-size: 13px; line-height: 1.55;
  color: rgba(251,246,236,0.78);
  margin-bottom: 14px;
}
.cookie-banner .cb-text a {
  color: #D4A5A5; border-bottom: 1px solid rgba(212,165,165,0.4);
}
.cookie-banner .cb-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.cookie-banner .cb-btn {
  flex: 1; min-width: 110px; padding: 11px 16px;
  border-radius: 8px; border: 1px solid rgba(251,246,236,0.2);
  background: transparent; color: #FBF6EC;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
  font-family: inherit;
}
.cookie-banner .cb-btn:hover { background: rgba(251,246,236,0.08); }
.cookie-banner .cb-btn.cb-primary {
  background: #B07A70; border-color: #B07A70;
}
.cookie-banner .cb-btn.cb-primary:hover { background: #C68B7F; border-color: #C68B7F; }
@media (max-width: 480px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; }
  .cookie-banner .cb-actions .cb-btn { flex: 1 1 100%; min-width: 0; }
}

:root {
  /* DRESS CODE — odległość kółek z kolorami od sylwetek pary.
     Jedna liczba dla WSZYSTKICH motywów, żeby sekcja wyglądała tak samo
     niezależnie od szablonu. Wcześniej każdy motyw miał swoją: motyw 1
     rozpychał środkową kolumnę siatki na `1fr`, więc kółka lądowały
     na skrajnych krawędziach kolumny (104 px od sylwetek), a motyw 2
     miał 43 px policzone z własnej planszy. Wartość wzięta z planszy
     „5 ekran lokalizacja i dresscode.svg": 18 jednostek na 900,
     czyli 2 % szerokości płótna. */
  --rg-dress-odstep: clamp(12px, 2.2vw, 18px);

  /* Palette — Editorial Espresso 2026 (warm ivory + espresso + champagne gold) */
  --cream: #FBF6EC;
  --bone: #F0E8D6;
  --paper: #FCF8EF;
  --sage: #A4AC97;          /* muted, used sparingly */
  --sage-deep: #6A7456;
  --moss: #3D4A38;
  --rose: #D4B6A3;          /* warm dusty (rarely used) */
  --rose-deep: #4F3526;     /* ← deep espresso brown — the new primary accent */
  --terracotta: #B8654A;    /* deeper, less orange */
  --gold: #C9A554;          /* richer champagne gold */
  --gold-deep: #8E6E48;
  --ink: #1F1A14;           /* warm near-black */
  --ink-soft: #5A4A3A;      /* warm soft */
  --muted: #8B7E6A;
  --line: rgba(60, 45, 30, 0.14);
  --shadow-soft: 0 30px 60px -30px rgba(60, 45, 30, 0.28);
  --shadow-card: 0 24px 48px -24px rgba(45, 35, 25, 0.22);

  /* Typography */
  --serif-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --serif-body: "Cormorant Garamond", Georgia, serif;
  --script: "La Belle Aurore", "Dancing Script", cursive;
  --sans: "Inter", "Helvetica Neue", sans-serif;

  /* Layout */
  --container: 1280px;
  --radius-soft: 4px;
  --radius-card: 12px;
  --transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;
  /* Better mobile vh handling (URL bar overlap on iOS) */
  height: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  /* prevent content from being trapped behind viewport edges */
  -webkit-overflow-scrolling: touch;
}

img, svg, video, iframe { max-width: 100%; }

/* Subtle warm paper grain — quiet, single-tone (editorial 2026) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.22;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(120, 90, 55, 0.05) 0, transparent 55%);
  background-size: 800px 800px;
  mix-blend-mode: multiply;
}

img { max-width: 100%; display: block; }
/* Ten reset nadpisywał regułę przeglądarki dla atrybutu `hidden`, więc
   każdy obrazek ukryty przez setSrc() (motyw nie ma danej części:
   pinezka lokalizacji, winieta, ilustracja) DALEJ zajmował miejsce —
   pod przyciskiem „Dojazd" siedział pusty biały kwadrat 18×18. */
img[hidden] { display: none; }
a { color: inherit; text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.7; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.display {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.display em {
  font-style: italic;
  color: var(--rose-deep);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 500;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink-soft);
}

.script {
  font-family: var(--script);
  font-weight: 400;
  font-style: normal;
  color: var(--rose-deep);
  font-size: 1.3em;
  line-height: 1;
}

.section-title {
  font-family: var(--serif-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.section-title em {
  font-style: italic;
  color: var(--rose-deep);
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

section { padding: 120px 0; position: relative; z-index: 2; }

@media (max-width: 968px) {
  section { padding: 88px 0; }
}

@media (max-width: 768px) {
  section { padding: 72px 0; }
  .container { padding: 0 20px; }
}

@media (max-width: 480px) {
  section { padding: 56px 0; }
  .container { padding: 0 16px; }
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 246, 238, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: padding var(--transition);
}

.nav-brand {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-brand::before {
  content: "♥";
  font-size: 14px;
  color: var(--rose-deep);
  display: inline-block;
  transform: translateY(-2px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 14px;
  font-weight: 400;
}

.nav-links a {
  color: var(--ink-soft);
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--rose-deep);
  transition: width var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-switch {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  transition: all var(--transition);
}

.lang-switch:hover { background: var(--bone); border-color: var(--ink-soft); }
.lang-switch::after { content: " ▾"; opacity: 0.5; font-size: 9px; }

/* Lang dropdown menu */
.lang-menu {
  position: fixed;
  z-index: 9999;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 50px rgba(31, 30, 26, 0.18);
  padding: 8px;
  min-width: 200px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lang-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-menu .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
  font-family: var(--sans);
}
.lang-menu .lang-item:hover { background: var(--bone); }
.lang-menu .lang-item.active { background: var(--ink); color: var(--cream); }
.lang-menu .lang-flag { font-size: 16px; }
.lang-menu .lang-name { flex: 1; font-size: 14px; font-family: var(--serif-display); font-style: italic; }
.lang-menu .lang-code { font-size: 10px; letter-spacing: 0.2em; opacity: 0.6; }

@media (max-width: 968px) {
  .nav { padding: 16px 20px; }
  .nav-links { display: none; }
  .nav-brand { font-size: 24px; }
  .nav-cta .btn-pill { padding: 8px 12px; font-size: 10px; }
}
@media (max-width: 480px) {
  .nav { padding: 12px 16px; }
  .nav-cta { gap: 8px; }
}

/* ============================================
   MOBILE NAV (hamburger + rozwijane menu)
   ============================================ */

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(250, 246, 238, 0.97);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(31, 30, 26, 0.12);
  padding: 12px 24px 24px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu a {
  display: block;
  padding: 14px 4px;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.active { color: var(--rose-deep); }

.mobile-menu-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
}
.mobile-menu-langs button {
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--sans);
}
.mobile-menu-langs button.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

@media (max-width: 968px) {
  .nav-burger { display: flex; }
  /* Na mobile pasek zostawiamy minimalny: logo + główne CTA + hamburger.
     Przełącznik języka i link logowania/konta przenoszą się do menu. */
  .nav-cta .lang-switch { display: none !important; }
  .nav-cta [data-auth-chunk] > a:not(.btn-pill) { display: none !important; }
  .nav-cta [data-auth-chunk] > span:not(.btn-pill) { display: none !important; }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  transition: all var(--transition);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.btn:hover {
  background: var(--moss);
  border-color: var(--moss);
  transform: translateY(-2px);
  opacity: 1;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-outline:hover { background: var(--ink); color: var(--cream); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 12px 22px;
}

.btn-ghost:hover { background: var(--bone); border-color: var(--ink-soft); transform: none; }

.btn-pill {
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
}

.btn-arrow::after {
  content: "→";
  margin-left: 6px;
  transition: transform var(--transition);
}

.btn-arrow:hover::after { transform: translateX(4px); }

/* ============================================
   HERO
   ============================================ */

.hero {
  min-height: 100vh;
  padding: 140px 0 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@media (max-width: 968px) {
  .hero { min-height: auto; padding: 120px 0 60px; }
}
@media (max-width: 480px) {
  .hero { padding: 100px 0 48px; }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
  /* Wider spread — both sides pushed ~1.5cm outward from center */
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

.hero-text {
  min-width: 0; /* allow text to shrink within grid track */
}

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; max-width: 100%; padding: 0 24px; }
}

@media (max-width: 968px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; max-width: 520px; padding: 0 24px; }
}
@media (max-width: 480px) {
  .hero-grid { padding: 0 20px; }
}

.hero-eyebrow {
  margin-bottom: 36px;
}

.hero-title {
  font-family: var(--serif-display);
  font-weight: 300;
  /* Sized to fit longest Polish words inside the tighter grid */
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

@media (max-width: 1180px) {
  .hero-title { font-size: clamp(2.2rem, 4.8vw, 3.8rem); }
}

@media (max-width: 968px) {
  .hero-title { font-size: clamp(2.6rem, 8.5vw, 4.6rem); }
}

.hero-title .line { display: block; overflow: hidden; }
.hero-title em { font-style: italic; color: var(--rose-deep); }
.hero-title .ampersand {
  font-family: var(--script);
  font-size: 0.6em;
  color: var(--rose-deep);
  display: inline-block;
  transform: translateY(0.05em) rotate(-6deg);
  padding: 0 0.08em;
}

.hero-sub {
  font-family: var(--serif-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 460px;
  margin-bottom: 40px;
  font-style: italic;
}

@media (max-width: 1180px) {
  .hero-sub { font-size: 17px; max-width: 420px; }
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.hero-trust {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--serif-body);
  font-style: italic;
}

.hero-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--rose-deep); }

.hero-trust .stars { color: var(--gold); letter-spacing: 1px; }

/* Hero visual / envelope */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
}

/* ============ CARD STACK — editorial wedding portfolio composition ============ */
.card-stack {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 540px;
}
.stack-card {
  position: absolute;
  width: 280px;
  aspect-ratio: 5 / 7;
  background: linear-gradient(170deg, #FFFEFA 0%, #F4ECDA 100%);
  border-radius: 4px;
  padding: 38px 28px 32px;
  box-shadow: 0 28px 50px rgba(60, 45, 30, 0.32), 0 6px 14px rgba(60, 45, 30, 0.18);
  text-align: center;
  color: #3D2D1F;
  cursor: pointer;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.6s ease;
  outline: none;
}
.stack-card:focus-visible { box-shadow: 0 0 0 3px #C9A554, 0 28px 50px rgba(60, 45, 30, 0.32); }
/* Wax seal — only visible on the card currently in center position */
.stack-card:not(.stack-card--center) .sc-seal { opacity: 0; transform: translateX(-50%) scale(0.5); pointer-events: none; }
.stack-card .sc-seal { transition: opacity 0.6s ease 0.2s, transform 0.6s cubic-bezier(0.34, 1.6, 0.64, 1) 0.2s; }
.stack-card::before {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(201, 165, 84, 0.4);
  border-radius: 2px;
  pointer-events: none;
}
.sc-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.sc-eyebrow {
  font-family: "Inter", sans-serif; font-size: 9px; letter-spacing: 0.42em;
  text-transform: uppercase; color: rgba(60,45,30,0.7); margin-bottom: 22px;
}
.sc-names {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: 38px; line-height: 1.05; color: #2A2018;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sc-names .amp {
  font-family: "Tangerine", cursive; font-style: normal;
  font-size: 1.3em; line-height: 0.55;
}
.sc-names--allcaps { font-family: "Italiana", "Marcellus", serif; font-style: normal; font-size: 28px; letter-spacing: 0.08em; text-transform: uppercase; }

.sc-rule {
  width: 60px; height: 1px; background: #9C7A50; opacity: 0.55;
  margin: 22px 0 16px;
}
.sc-rule--gold { background: #C9A554; opacity: 0.75; }

.sc-date {
  font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.4em;
  text-transform: uppercase; color: #5C4530; margin-bottom: 10px;
}
.sc-place {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 13px; color: rgba(74,58,40,0.8);
}

/* Positions + rotations for each card */
.stack-card--left {
  left: 0; top: 60px;
  transform: rotate(-9deg);
  z-index: 1;
}
.stack-card--right {
  right: 0; top: 60px;
  transform: rotate(8deg);
  z-index: 1;
}
.stack-card--center {
  left: 50%; top: 12px;
  margin-left: -160px;
  width: 320px;
  z-index: 3;
  transform: rotate(0);
  box-shadow: 0 38px 64px rgba(60, 45, 30, 0.4), 0 10px 22px rgba(60, 45, 30, 0.22);
}

/* Toscana — warm terracotta accent */
.stack-card--tuscana { background: linear-gradient(170deg, #FBF1E0 0%, #F2DFC0 100%); }
.stack-card--tuscana::before { border-color: rgba(201, 123, 94, 0.45); }
.stack-card--tuscana .sc-eyebrow { color: #7B3A2A; }
.stack-card--tuscana .sc-names .amp { color: #C97B5E; }
.stack-card--tuscana .sc-rule { background: #C97B5E; }

/* Editorial — dark with gold */
.stack-card--editorial {
  background: linear-gradient(170deg, #1F1A14 0%, #15110c 100%);
  color: #F1E9DC;
}
.stack-card--editorial::before { border-color: rgba(201, 165, 84, 0.5); }
.stack-card--editorial .sc-eyebrow { color: #C9A554; }
.stack-card--editorial .sc-names { color: #F1E9DC; }
.stack-card--editorial .sc-names .amp { color: #C9A554; }
.stack-card--editorial .sc-rule { background: #C9A554; }
.stack-card--editorial .sc-date { color: #C9A554; }
.stack-card--editorial .sc-place { color: rgba(241,233,220,0.7); }

/* Como (center / front) — sage + gold */
.stack-card--como .sc-names .amp { color: #4F3526; }

/* Wax seal hanging from front card */
.sc-seal {
  position: absolute; left: 50%; bottom: -30px;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Italiana", "Marcellus", serif; font-size: 20px; letter-spacing: 1px; color: #F6D9B0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,232,205,0.62) 0%, transparent 30%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,0.45) 0%, transparent 44%),
    radial-gradient(ellipse at center, #A8472E 8%, #7E2A1A 54%, #561608 100%);
  border-radius: 48% 52% 47% 53% / 52% 47% 53% 48%;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,205,175,0.4), 0 10px 22px rgba(80,25,12,0.45);
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  z-index: 4;
}
.sc-seal::before {
  content: ""; position: absolute; inset: 6px;
  border: 1.4px solid rgba(246,217,176,0.45); border-radius: 50%;
}

/* Fan-out hover effect — side cards spread, front lifts */
.card-stack:hover .stack-card--left { transform: rotate(-13deg) translateX(-14px) translateY(-4px); }
.card-stack:hover .stack-card--right { transform: rotate(12deg) translateX(14px) translateY(-4px); }
.card-stack:hover .stack-card--center { transform: translateY(-10px); box-shadow: 0 46px 72px rgba(60, 45, 30, 0.46), 0 14px 26px rgba(60, 45, 30, 0.26); }

/* Idle drift — subtle, single card */
@keyframes stack-drift { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(-10.5deg); } }
.stack-card--left { animation: stack-drift 9s ease-in-out infinite; }
.card-stack:hover .stack-card--left { animation: none; }

@media (max-width: 968px) {
  .hero-visual { min-height: 480px; }
  .card-stack { max-width: 380px; height: 440px; }
  .stack-card { width: 220px; padding: 28px 20px 24px; }
  .stack-card--center { width: 250px; margin-left: -125px; }
  .sc-names { font-size: 28px; }
  .sc-names--allcaps { font-size: 21px; }
  .sc-place { font-size: 11px; }
}

/* ============ COMPANION INVITATION CARD (sits behind phone, right-tilted) ============ */
.invite-card-side {
  position: absolute;
  right: -4%; top: 14%;
  width: min(240px, 55%);
  aspect-ratio: 5 / 7;
  background: linear-gradient(170deg, #FFFEFA 0%, #F4ECDA 100%);
  border-radius: 4px;
  padding: 28px 22px 22px;
  box-shadow: 0 28px 50px rgba(60, 45, 30, 0.32), 0 6px 14px rgba(60, 45, 30, 0.18);
  transform: rotate(7deg);
  z-index: 1;
  text-align: center;
  color: #3D2D1F;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.invite-card-side::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(201, 123, 94, 0.4);
  border-radius: 2px;
  pointer-events: none;
}
.invite-card-side:hover { transform: rotate(4deg) translateY(-6px); }
.ics-inner { position: relative; z-index: 2; }
.ics-eyebrow {
  font-family: "Inter", sans-serif; font-size: 8px; letter-spacing: 0.4em;
  text-transform: uppercase; color: #7B3A2A; margin-bottom: 18px;
}
.ics-names {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: clamp(22px, 2vw, 30px); line-height: 0.98; color: #3D2D1F;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.ics-names .amp {
  font-family: "Tangerine", cursive; font-style: normal;
  color: #C97B5E; font-size: 1.4em; line-height: 0.6;
}
.ics-orn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 10px;
}
.ics-orn .ln { width: 28px; height: 1px; background: #9C7A50; opacity: 0.55; }
.ics-orn .dot { width: 3px; height: 3px; background: #9C7A50; border-radius: 50%; }
.ics-date {
  font-family: "Inter", sans-serif; font-size: 9px; letter-spacing: 0.36em;
  text-transform: uppercase; color: #5C4530; margin-bottom: 6px;
}
.ics-place {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 11px; color: #7A5A40;
}
.ics-seal {
  position: absolute; bottom: -18px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Italiana", "Marcellus", serif; font-size: 13px; color: #F6D9B0; letter-spacing: 0.5px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,232,205,0.6) 0%, transparent 30%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,0.45) 0%, transparent 44%),
    radial-gradient(ellipse at center, #A8472E 8%, #7E2A1A 54%, #561608 100%);
  border-radius: 48% 52% 47% 53% / 52% 47% 53% 48%;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.45), inset 0 2px 4px rgba(255,205,175,0.4), 0 6px 14px rgba(80,25,12,0.5);
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
@media (max-width: 968px) {
  .invite-card-side { display: none; }   /* hide companion on mobile; phone alone */
  .hero-visual { min-height: 540px; }
}

/* ============ PHONE MOCKUP — live demo invitation slideshow ============ */
.phone-mockup {
  position: relative;
  width: min(290px, 70%);
  margin-right: 14%;   /* shift left so card peeks out on right */
  z-index: 2;
  filter: drop-shadow(0 50px 80px rgba(60, 45, 30, 0.5)) drop-shadow(0 20px 30px rgba(60, 45, 30, 0.28));
}
@media (max-width: 968px) { .phone-mockup { width: 240px; margin: 0 auto; } }

.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.2;
  background: linear-gradient(140deg, #1a1612 0%, #2a2018 45%, #15110c 100%);
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    inset 0 0 0 1.5px rgba(140, 100, 60, 0.32),
    inset 0 2px 0 rgba(255, 220, 180, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6);
}

.phone-notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 24px;
  background: #050505;
  border-radius: 999px;
  z-index: 10;
}

.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #1a1612;
}

/* === SLIDESHOW — 5 slides cross-fade (overlapping opacity, no black gap) === */
.phone-slide {
  position: absolute; inset: 0;
  opacity: 0;
}
/* Each slide has its own keyframe so fade-out of N overlaps fade-in of N+1.
   25s total cycle, each slide visible ~4s with 1s cross-fade either side. */
.phone-slide:nth-child(1) { animation: phone-cycle-1 25s linear infinite; opacity: 1; }
.phone-slide:nth-child(2) { animation: phone-cycle-2 25s linear infinite; }
.phone-slide:nth-child(3) { animation: phone-cycle-3 25s linear infinite; }
.phone-slide:nth-child(4) { animation: phone-cycle-4 25s linear infinite; }
.phone-slide:nth-child(5) { animation: phone-cycle-5 25s linear infinite; }

/* Each slide visible 0-18% of its 20% window, fade-out 18-22% overlaps with next slide's fade-in.
   Loop: slide 5 fade-out 98-100% overlaps with slide 1 fade-in 98-100%. */
@keyframes phone-cycle-1 {
  0%, 18% { opacity: 1; }
  22%, 98% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes phone-cycle-2 {
  0%, 18% { opacity: 0; }
  22%, 38% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes phone-cycle-3 {
  0%, 38% { opacity: 0; }
  42%, 58% { opacity: 1; }
  62%, 100% { opacity: 0; }
}
@keyframes phone-cycle-4 {
  0%, 58% { opacity: 0; }
  62%, 78% { opacity: 1; }
  82%, 100% { opacity: 0; }
}
@keyframes phone-cycle-5 {
  0%, 78% { opacity: 0; }
  82%, 98% { opacity: 1; }
  100% { opacity: 0; }
}

.phone-photo {
  position: absolute; inset: 0;
  background: url("https://images.unsplash.com/photo-1664433451451-11337deef597?w=600&q=80&auto=format&fit=crop") center/cover no-repeat;
  filter: saturate(1.1) contrast(1.05);
  animation: phone-zoom 14s ease-in-out infinite alternate;
}
@keyframes phone-zoom { 0% { transform: scale(1.02); } 100% { transform: scale(1.12); } }

/* === LIGHT-MODE SLIDES (story, schedule, venue, rsvp) === */
.phone-content-light {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, #FBF7EF 0%, #F1E8D6 100%);
  color: #2A2018;
  text-align: center;
  padding: 50px 22px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.phone-content-light--bottom { justify-content: flex-end; padding-bottom: 28px; gap: 4px; }
.phone-eyebrow-dark {
  font-family: "Inter", sans-serif; font-size: 7px; letter-spacing: 0.42em;
  text-transform: uppercase; color: rgba(60,45,30,0.7);
}
.phone-divider-dark {
  width: 30px; height: 1px; background: #9C7A50; opacity: 0.55; margin: 6px 0;
}

/* — Slide 2: story — */
.phone-story {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: 14px; line-height: 1.45; color: #2A2018;
  padding: 0 8px; margin: 0;
}
.phone-story em { color: #9C3A2A; font-style: italic; }
.phone-quote {
  font-family: "Tangerine", cursive; font-size: 22px; color: #9C3A2A; line-height: 1;
}

/* — Slide 3: schedule — */
.phone-timeline { display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 0 6px; margin-top: 4px; }
.ptl {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(150,120,80,0.18);
}
.ptl:last-child { border-bottom: none; }
.ptl-t {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 13px; color: #9C3A2A; min-width: 38px; text-align: right;
}
.ptl-l {
  font-family: "Inter", sans-serif; font-size: 10px;
  color: #3A2D1E; flex: 1; text-align: left;
}

/* — Slide 4: venue / map — */
.phone-map-bg {
  position: absolute; inset: 0;
  background:
    /* "streets" — diagonal lines */
    repeating-linear-gradient(28deg, transparent 0 24px, rgba(150,120,80,0.18) 24px 25px),
    repeating-linear-gradient(-52deg, transparent 0 30px, rgba(150,120,80,0.12) 30px 31px),
    /* "blocks" — soft hills/parcels */
    radial-gradient(circle at 30% 35%, rgba(120,140,80,0.18) 0 60px, transparent 80px),
    radial-gradient(circle at 70% 55%, rgba(80,120,140,0.16) 0 70px, transparent 90px),
    radial-gradient(circle at 50% 80%, rgba(150,120,80,0.14) 0 50px, transparent 70px),
    linear-gradient(180deg, #ECE2CB 0%, #DCCFB0 100%);
}
.phone-map-bg::before {
  /* one main road */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(118deg, transparent 48%, rgba(255,250,238,0.85) 49%, rgba(255,250,238,0.85) 51%, transparent 52%);
}
.phone-map-pin {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -100%);
  z-index: 2;
  animation: pin-bob 2.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(80, 30, 20, 0.4));
}
@keyframes pin-bob { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, -108%); } }
.phone-content-light--bottom { background: none; padding-top: 0; }
.phone-content-light--bottom .phone-eyebrow-dark { color: rgba(60,45,30,0.85); }
.phone-venue-name {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 18px; color: #2A2018; margin-top: 6px;
}
.phone-venue-addr {
  font-family: "Inter", sans-serif; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(60,45,30,0.7);
}
.phone-venue-cta {
  margin-top: 10px;
  font-family: "Inter", sans-serif; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: #9C3A2A; padding: 7px 14px; border: 1px solid #9C3A2A; border-radius: 999px;
  display: inline-block;
}

/* — Slide 5: RSVP — */
.phone-rsvp-greet {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 18px; color: #2A2018; margin-top: 6px;
}
.phone-rsvp-greet em { color: #9C3A2A; font-style: italic; }
.phone-rsvp-sub {
  font-family: "Inter", sans-serif; font-size: 10px;
  color: rgba(60,45,30,0.7); letter-spacing: 0.08em;
}
.phone-rsvp-buttons { display: flex; gap: 8px; margin: 10px 0 4px; }
.rsvp-pill {
  font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 8px 14px; border-radius: 999px;
  cursor: default; border: 1px solid;
}
.rsvp-pill--yes { background: #4F3526; color: #FBF7EF; border-color: #4F3526; }
.rsvp-pill--no { background: transparent; color: rgba(60,45,30,0.6); border-color: rgba(60,45,30,0.3); }
.phone-rsvp-status {
  font-family: "Inter", sans-serif; font-size: 9px; letter-spacing: 0.18em;
  color: #5A7C58; margin-top: 4px;
}

.phone-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,16,12,0.50) 0%, rgba(20,16,12,0.15) 30%, rgba(20,16,12,0.35) 65%, rgba(20,16,12,0.85) 100%),
    radial-gradient(circle at 50% 40%, transparent 30%, rgba(20,16,12,0.40) 100%);
}

.phone-content {
  position: absolute; inset: 0; z-index: 2;
  color: #FBF7EF; text-align: center;
  padding: 50px 20px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.phone-eyebrow {
  font-family: "Inter", sans-serif; font-size: 7px; letter-spacing: 0.42em;
  text-transform: uppercase; color: rgba(251,247,239,0.86);
}
.phone-names {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.4vw, 30px); margin: 4px 0 2px; line-height: 0.95;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.phone-names .amp {
  font-family: "Tangerine", cursive; font-style: normal; color: #E8C99A;
  font-size: 1.35em; line-height: 0.5; margin: 0;
}
.phone-rule {
  display: flex; align-items: center; gap: 8px; margin: 4px 0;
}
.phone-rule span {
  width: 20px; height: 1px; background: rgba(232,201,154,0.7);
}
.phone-rule span + span { background: linear-gradient(90deg, rgba(232,201,154,0.7), transparent); }
.phone-countdown { display: flex; gap: 6px; margin: 8px 0 6px; }
.cd {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 6px;
  border: 1px solid rgba(232,201,154,0.3);
  border-radius: 2px;
  min-width: 34px;
}
.cd-n {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 17px; color: #FBF7EF; line-height: 1;
}
.cd-l {
  font-family: "Inter", sans-serif; font-size: 6px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(251,247,239,0.7); margin-top: 2px;
}
.phone-date {
  font-family: "Inter", sans-serif; font-size: 8px; letter-spacing: 0.36em;
  text-transform: uppercase; color: rgba(251,247,239,0.9); margin-top: 4px;
}
.phone-place {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 10px; color: rgba(251,247,239,0.78);
}

/* side buttons (small details for realism) */
.phone-btn {
  position: absolute;
  background: linear-gradient(90deg, #15110c, #2a2018);
  border-radius: 2px;
}
.phone-btn-r { right: -2px; top: 24%; width: 4px; height: 56px; border-radius: 0 2px 2px 0; }
.phone-btn-l-1 { left: -2px; top: 18%; width: 4px; height: 26px; border-radius: 2px 0 0 2px; }
.phone-btn-l-2 { left: -2px; top: 26%; width: 4px; height: 50px; border-radius: 2px 0 0 2px; }

/* Floating pressed flowers */
.petal {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
  animation: float 14s ease-in-out infinite;
  z-index: 1;
}

.petal-1 { top: 8%; left: -4%; width: 130px; transform: rotate(-20deg); animation-delay: 0s; }
.petal-2 { top: 18%; right: -5%; width: 110px; transform: rotate(35deg); animation-delay: 1.5s; }
.petal-3 { bottom: 12%; left: 6%; width: 95px; transform: rotate(160deg); animation-delay: 3s; }
.petal-4 { bottom: 22%; right: 4%; width: 120px; transform: rotate(-110deg); animation-delay: 4.5s; }
.petal-5 { top: 50%; left: 48%; width: 80px; transform: rotate(45deg); animation-delay: 2s; opacity: 0.25; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-20px) rotate(calc(var(--r, 0deg) + 5deg)); }
}

/* ============================================
   MARQUEE TRUST BAR
   ============================================ */

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  overflow: hidden;
  background: var(--bone);
}

.marquee-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  align-items: center;
}

.marquee-item {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 24px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 64px;
  flex-shrink: 0;
}

.marquee-item::after {
  content: "✦";
  color: var(--rose-deep);
  font-size: 14px;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   FEATURE GRID
   ============================================ */

.section-head {
  text-align: center;
  margin-bottom: 80px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section-head .eyebrow { margin-bottom: 24px; justify-content: center; }
.section-head .eyebrow::before,
.section-head .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink-soft);
}

.section-head p {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  margin-top: 24px;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 968px) { .features { grid-template-columns: 1fr; } }

.feature {
  padding: 56px 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background var(--transition);
}

.feature:nth-child(3n) { border-right: none; }
.feature:hover { background: var(--bone); }

.feature-num {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 56px;
  color: var(--rose-deep);
  line-height: 1;
  margin-bottom: 28px;
  opacity: 0.85;
}

.feature h3 {
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.feature p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ============================================
   TEMPLATES GALLERY
   ============================================ */

.templates-section { background: var(--paper); }

.templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 968px) { .templates-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .templates-grid { grid-template-columns: 1fr; } }

.template-card {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  border: 1px solid var(--line);
  display: block;
}

.template-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(31, 30, 26, 0.35);
}
.template-card:hover .template-thumb { transform: scale(1.06); }
.template-card:hover .template-overlay { opacity: 1; }
.template-card:hover .template-thumb svg { filter: saturate(1.15) contrast(1.05); }

.template-thumb {
  /* 3/5 = proporcja płótna motywów (900×1500). Przy 3/4 preserveAspectRatio
     ="slice" przycinał górę i dół, więc miniatura nie pokazywała planszy. */
  aspect-ratio: 3/5;
  background: var(--bone);
  position: relative;
  overflow: hidden;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.template-thumb svg { transition: filter 0.6s ease; }
.template-thumb .hero-fill { position: absolute; inset: 0; }
.template-thumb .hero-fill svg { width: 100%; height: 100%; display: block; }
.template-thumb .thumb-gradient {
  position: absolute; inset: 0;
  /* Layered scrim: full-bleed vertical fade + radial halo behind centered text
     ensures legibility regardless of photo brightness in any region. */
  background:
    radial-gradient(ellipse 90% 55% at 50% 50%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 55%, transparent 80%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.08) 25%, rgba(0, 0, 0, 0.10) 60%, rgba(0, 0, 0, 0.62) 100%);
  pointer-events: none;
}
.template-thumb .thumb-text {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  color: #FBF7EF;   /* always light cream — readable on the dark scrim */
  pointer-events: none;
}
/* Universal "Como treatment" — applied to ALL theme thumbnails for consistency:
   bold typography (font-weight 500), sharp drop-shadows (no blurry halos),
   editorial film-look on the photo (+15% brightness, +8% saturation, softer contrast). */
.template-thumb .thumb-tagline {
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1;
  margin-bottom: 10px;
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
}
.template-thumb .thumb-names {
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  color: #FBF7EF;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.35);
}
.template-thumb .thumb-date {
  font-family: var(--theme-font-display, var(--serif-display));
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 6px 12px;
  border-top: 1.5px solid rgba(251, 247, 239, 0.7);
  border-bottom: 1.5px solid rgba(251, 247, 239, 0.7);
  display: inline-block;
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
}
/* Editorial film-look on the photo — applied universally */
.template-thumb .hero-fill svg,
.template-thumb .hero-fill {
  filter: brightness(1.15) saturate(1.08) contrast(0.96);
}

.template-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31, 30, 26, 0.55) 100%);
  opacity: 0;
  transition: opacity var(--transition);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
}

.template-overlay span {
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.template-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--cream);
  color: var(--ink);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.template-tag.new { background: var(--rose-deep); color: var(--cream); }

.template-meta {
  padding: 18px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}

.template-meta h4 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.template-meta span {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

/* ============================================
   PROCESS / STEPS
   ============================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}

@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }

.step {
  text-align: center;
  padding: 40px 24px;
}

.step-num {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 80px;
  line-height: 1;
  color: var(--rose-deep);
  margin-bottom: 24px;
  opacity: 0.65;
}

.step h3 {
  font-family: var(--serif-display);
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.step p {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 280px;
  margin: 0 auto;
}

/* ============================================
   COMPARISON / PAPER VS DIGITAL
   ============================================ */

.compare-section { background: var(--moss); color: var(--cream); }
.compare-section .section-title { color: var(--cream); }
.compare-section .section-title em { color: var(--rose); }
.compare-section .eyebrow,
.compare-section .eyebrow::before,
.compare-section .eyebrow::after { color: rgba(250, 246, 238, 0.6); }
.compare-section .eyebrow::before,
.compare-section .eyebrow::after { background: rgba(250, 246, 238, 0.4); }
.compare-section .section-head p { color: rgba(250, 246, 238, 0.7); }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: stretch;
}

@media (max-width: 768px) { .compare-grid { grid-template-columns: 1fr; gap: 24px; } }

.compare-card {
  background: rgba(250, 246, 238, 0.05);
  border: 1px solid rgba(250, 246, 238, 0.15);
  border-radius: var(--radius-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.compare-card.winner {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
  position: relative;
}

.compare-card.winner::before {
  content: "Najlepszy wybór";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rose-deep);
  color: var(--cream);
  padding: 6px 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
}

.compare-card h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 34px;
  margin-bottom: 12px;
}

.compare-card .price {
  font-family: var(--serif-display);
  font-size: 56px;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}

.compare-card .price-note {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 28px;
}

.compare-features {
  list-style: none;
  flex: 1;
}

.compare-features li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(250, 246, 238, 0.1);
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.compare-card.winner .compare-features li { border-color: var(--line); }

.compare-features li::before {
  content: "✓";
  color: var(--rose);
  font-weight: bold;
  flex-shrink: 0;
}

.compare-card.winner .compare-features li::before { color: var(--sage-deep); }

.compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 48px;
  opacity: 0.5;
}

@media (max-width: 768px) { .compare-vs { display: none; } }

/* ============================================
   PRICING
   ============================================ */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 968px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 48px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition);
}

.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.price-card.featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.price-card.featured h3 { color: var(--cream); }

.price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rose-deep);
  color: var(--cream);
  padding: 6px 18px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  border-radius: 999px;
}

.price-card h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 6px;
}

.price-card .sub {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 32px;
}

.price-card .amount {
  font-family: var(--serif-display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 6px;
}

.price-card .amount-note {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 32px;
}

.price-features {
  list-style: none;
  margin-bottom: 32px;
  flex: 1;
}

.price-features li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.price-card.featured .price-features li { border-color: rgba(250, 246, 238, 0.12); }

.price-features li::before {
  content: "·";
  color: var(--rose-deep);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

/* ============================================
   FAQ
   ============================================ */

.faq-section { background: var(--bone); }

.faq-list {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  cursor: pointer;
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--serif-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.faq-toggle {
  font-size: 28px;
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--rose-deep);
  transition: transform var(--transition);
}

.faq-item.open .faq-toggle { transform: rotate(45deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.faq-item.open .faq-a {
  max-height: 400px;
  padding-top: 18px;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 96px 0 32px;
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}

@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }

.footer h5 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.5);
  margin-bottom: 24px;
  font-weight: 500;
}

.footer-col a {
  display: block;
  font-size: 15px;
  margin-bottom: 12px;
  color: rgba(250, 246, 238, 0.85);
}

.footer-brand h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 42px;
  color: var(--cream);
  margin-bottom: 12px;
}

.footer-brand p {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 17px;
  color: rgba(250, 246, 238, 0.6);
  max-width: 320px;
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(250, 246, 238, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(250, 246, 238, 0.5);
  letter-spacing: 0.1em;
}

@media (max-width: 768px) { .footer-bottom { flex-direction: column; gap: 16px; } }

/* ============================================
   CTA STRIP
   ============================================ */

.cta-strip {
  padding: 120px 0;
  text-align: center;
  background: var(--cream);
  position: relative;
}

.cta-strip h2 {
  font-family: var(--serif-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
}

.cta-strip h2 em { font-style: italic; color: var(--rose-deep); }

.cta-strip .actions {
  display: inline-flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================
   EDITOR — KREATOR
   ============================================ */

.editor-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: calc(100vh - 73px);
  margin-top: 73px;
}

@media (max-width: 1100px) {
  .editor-shell { grid-template-columns: 320px 1fr; }
}

@media (max-width: 968px) {
  .editor-shell { grid-template-columns: 1fr; min-height: 0; }
  .editor-side { max-height: none; overflow: visible; }
}

.editor-side {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 26px 32px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;   /* przewijanie panelu nie porusza stroną */
}

.editor-side h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 24px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.field {
  margin-bottom: 22px;
}

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 500;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--cream);
  color: var(--ink);
  transition: border-color var(--transition);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--rose-deep);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.theme-swatches {
  display: grid;
  /* auto-fill zamiast sztywnych 4 kolumn: kafelek pokazuje teraz CAŁĄ
     planszę 3:5 razem z imionami, więc przy 4 kolumnach byłby za wąski,
     żeby cokolwiek przeczytać. */
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

.swatch {
  /* BEZ sztywnej proporcji. Wysokość wynika z miniatury (3:5, dokładnie
     tyle co plansza) plus podpis pod spodem. Przy 3/4 dół planszy był
     ucinany — miniatura pokazywała dwie trzecie kompozycji. */
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--bone);
  padding: 0;
}
.swatch svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.swatch .swatch-thumb {
  /* Proporcja płótna motywu — dzięki temu nic się nie przycina */
  aspect-ratio: 3 / 5;
  flex: 0 0 auto;
  width: 100%;
  position: relative;
  overflow: hidden;
  pointer-events: none;
  background: #FFFFFF;
}
.swatch .swatch-thumb img,
.swatch .swatch-thumb svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: none;                  /* plansza idzie 1:1, bez korekt */
}
/* Miniatura ma proporcję planszy (3:5), więc żadnego kadrowania nie ma —
   ani dla SVG, ani dla ewentualnego <img>. */
/* Podpis POD obrazkiem — czarny gradient na akwareli dawał brudny,
   brązowy odcień i to on psuł całe wrażenie koloru. */
.swatch .swatch-label {
  flex: 0 0 auto;
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 5px 3px; text-align: center; pointer-events: none;
  font-family: var(--sans); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.swatch.active .swatch-label { color: var(--rose-deep); }
.swatch:hover { transform: translateY(-2px); border-color: var(--ink-soft); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.swatch.active { border-color: var(--rose-deep); box-shadow: 0 0 0 3px rgba(176,122,112,0.2); }
.swatch.active::after {
  content: "✓"; position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px; background: var(--rose-deep); color: #fff;
  border-radius: 50%; font-size: 10px; display: flex;
  align-items: center; justify-content: center; line-height: 1;
}

.editor-preview {
  background: var(--bone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* ramka od góry — inaczej przy wysokim
                                    podglądzie centrowanie ucinało dół */
  padding: 24px 32px 24px;
  overflow: hidden;              /* wysokość ramki liczy sizePreview(),
                                    więc nic nie powinno wystawać */
}

.invitation-preview {
  width: 100%;
  max-width: 480px;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
}

/* ============================================
   PUBLISHED INVITATION
   ============================================ */

.invite-page {
  background: var(--paper);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.invite-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  position: relative;
}

.invite-hero-inner {
  max-width: 640px;
  position: relative;
  z-index: 2;
}

.invite-hero .script {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
}

.invite-names {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.5rem, 12vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 36px;
}

.invite-names .amp {
  font-family: var(--script);
  font-style: normal;
  color: var(--rose-deep);
  display: block;
  font-size: 0.5em;
  margin: 8px 0;
  transform: rotate(-6deg);
  line-height: 1;
}

.invite-tagline {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  margin-bottom: 40px;
  line-height: 1.4;
}

.invite-date-block {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 24px 36px;
  border-top: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 22px;
}

.invite-date-block .num {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 42px;
  font-weight: 300;
}

.invite-date-block .div {
  font-size: 22px;
  color: var(--rose-deep);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 60px auto 0;
  max-width: 540px;
}

.countdown-item {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 12px;
  text-align: center;
  backdrop-filter: blur(4px);
}

.countdown-num {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
}

.countdown-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}

.invite-section {
  padding: 100px 24px;
  text-align: center;
  position: relative;
}

.invite-section.dark { background: var(--moss); color: var(--cream); }
.invite-section.cream { background: var(--cream); }
.invite-section.bone { background: var(--bone); }

.invite-section h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}

.invite-section .lead {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 36px;
  opacity: 0.85;
}

.invite-section.dark h2 em { color: var(--rose); }

/* Schedule */
.schedule {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.schedule-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.invite-section.dark .schedule-item { border-color: rgba(250, 246, 238, 0.15); }

.schedule-time {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.schedule-content h4 {
  font-family: var(--serif-display);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 4px;
}

.schedule-content p {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 15px;
  opacity: 0.75;
}

/* Venue */
.venue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
  text-align: left;
}

@media (max-width: 768px) { .venue-grid { grid-template-columns: 1fr; gap: 32px; } }

.venue-photo {
  aspect-ratio: 4/5;
  background: var(--bone);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

/* RSVP form */
.rsvp-form {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.rsvp-form .field input,
.rsvp-form .field textarea,
.rsvp-form .field select {
  background: var(--cream);
  border-color: var(--line);
  padding: 16px 18px;
  font-size: 15px;
}

.invite-section.dark .rsvp-form .field label { color: rgba(250, 246, 238, 0.7); }
.invite-section.dark .rsvp-form .field input,
.invite-section.dark .rsvp-form .field textarea,
.invite-section.dark .rsvp-form .field select {
  background: rgba(250, 246, 238, 0.06);
  border-color: rgba(250, 246, 238, 0.2);
  color: var(--cream);
}

.radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.radio-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  cursor: pointer;
  text-align: center;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  transition: all var(--transition);
  background: var(--cream);
  color: var(--ink);
  position: relative;
}
.radio-card:hover {
  border-color: var(--theme-accent, var(--ink));
}

/* Active state — branded accent color, always high contrast.
   Uses --theme-accent (with --rose-deep fallback) + pure white text.
   Works on ANY background section (cream/bone/dark) and ANY theme. */
.radio-card.active {
  background: var(--theme-accent, var(--rose-deep));
  color: #ffffff;
  border-color: var(--theme-accent, var(--rose-deep));
  font-weight: 500;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-accent, var(--rose-deep)) 35%, transparent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Inactive state inside dark section — translucent on dark with cream text */
.invite-section.dark .radio-card {
  background: rgba(250, 246, 238, 0.06);
  color: var(--cream);
  border-color: rgba(250, 246, 238, 0.2);
}
.invite-section.dark .radio-card:hover {
  background: rgba(250, 246, 238, 0.12);
  border-color: var(--theme-accent, var(--cream));
}
/* Active inside dark section — SAME branded accent treatment (white text on accent) */
.invite-section.dark .radio-card.active {
  background: var(--theme-accent, var(--rose-deep));
  color: #ffffff;
  border-color: var(--theme-accent, var(--rose-deep));
  font-weight: 500;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-accent, var(--rose-deep)) 45%, transparent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* ============================================
   DASHBOARD
   ============================================ */

.dash-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 73px);
  margin-top: 73px;
}

@media (max-width: 968px) { .dash-layout { grid-template-columns: 1fr; min-height: 0; } .dash-side { padding: 24px 20px; } .dash-main { padding: 28px 20px; } }
@media (max-width: 480px) { .dash-head h1 { font-size: 32px; } .dash-head { gap: 14px; margin-bottom: 28px; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

.dash-side {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 32px 24px;
}

.dash-side-title {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 22px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.dash-nav {
  list-style: none;
}

.dash-nav li {
  margin-bottom: 4px;
}

.dash-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink-soft);
  border-radius: 8px;
  transition: all var(--transition);
}

.dash-nav a:hover { background: var(--bone); opacity: 1; }
.dash-nav a.active,
.dash-nav a.is-active { background: var(--ink); color: var(--cream); opacity: 1; }

.dash-main { padding: 48px; }

@media (max-width: 768px) { .dash-main { padding: 32px 20px; } }

.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  gap: 24px;
  flex-wrap: wrap;
}

.dash-head h1 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.dash-head p {
  font-family: var(--serif-body);
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 6px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

@media (max-width: 768px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 24px;
}

.stat-card .label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
/* v350: na telefonie kafelki są wąskie — „POTWIERDZENI” łamało się
   w środku słowa („POTWIERDZEN / I”). */
@media (max-width: 520px) {
  .stat-card { padding: 22px 16px; }
  .stat-card .label { font-size: 10px; letter-spacing: 0.12em; overflow-wrap: normal; word-break: keep-all; hyphens: none; }
}

.stat-card .num {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
}

.stat-card .delta {
  font-size: 12px;
  font-family: var(--serif-body);
  font-style: italic;
  color: var(--sage-deep);
}

.stat-card.accent { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.stat-card.accent .label,
.stat-card.accent .delta { color: rgba(250, 246, 238, 0.7); }

/* Guest table */
.guest-table {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  border-collapse: collapse;
}

.guest-table th {
  text-align: left;
  padding: 18px 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}

.guest-table td {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  vertical-align: middle;
}

.guest-table tr:hover td { background: var(--bone); }

.guest-name {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.guest-email { color: var(--ink-soft); font-size: 13px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-confirmed { background: rgba(110, 130, 112, 0.15); color: var(--sage-deep); }
.status-confirmed::before { background: var(--sage-deep); }
.status-pending { background: rgba(184, 149, 106, 0.15); color: var(--gold-deep); }
.status-pending::before { background: var(--gold); }
.status-declined { background: rgba(176, 122, 112, 0.15); color: var(--rose-deep); }
.status-declined::before { background: var(--rose-deep); }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 24px; }
.hidden { display: none !important; }

.fade-in {
  animation: fadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fade-in-up {
  animation: fadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fade-delay-1 { animation-delay: 0.1s; }
.fade-delay-2 { animation-delay: 0.25s; }
.fade-delay-3 { animation-delay: 0.4s; }
.fade-delay-4 { animation-delay: 0.55s; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Envelope opening animation */
/* ============================================
   ENVELOPE OPENING — 2026 trend: vintage cream paper
   with lace scalloped flap + ornate wax seal + pressed sprig
   ============================================ */

/* ============ COVER REVEAL — cinematic photographic cover (premium 2026) ============ */
.envelope-overlay {
  position: fixed; inset: 0; z-index: 9999;
  cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #1a1712;
  will-change: opacity;
}
/* Hero photo behind — slow Ken-Burns drift */
.cover-photo {
  position: absolute; inset: -5%;
  z-index: 1;
  animation: cover-zoom 16s ease-in-out infinite alternate;
}
.cover-photo svg, .cover-photo > * { width: 100%; height: 100%; display: block; }
@keyframes cover-zoom { 0% { transform: scale(1.02); } 100% { transform: scale(1.13); } }
/* Darkening + warm scrim for text legibility */
.cover-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,16,12,0.58) 0%, rgba(20,16,12,0.22) 36%, rgba(20,16,12,0.42) 68%, rgba(20,16,12,0.82) 100%),
    radial-gradient(circle at 50% 44%, rgba(20,16,12,0) 28%, rgba(20,16,12,0.5) 100%);
}
.cover-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 220px 50px rgba(0,0,0,0.55);
}
/* Soft golden floating dust */
.envelope-overlay::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle 2px at 18% 24%, rgba(232,201,154,0.5), transparent 60%),
    radial-gradient(circle 1.5px at 82% 30%, rgba(232,201,154,0.4), transparent 60%),
    radial-gradient(circle 2px at 26% 74%, rgba(232,201,154,0.45), transparent 60%),
    radial-gradient(circle 1.5px at 76% 70%, rgba(232,201,154,0.4), transparent 60%),
    radial-gradient(circle 1px at 50% 14%, rgba(232,201,154,0.5), transparent 60%),
    radial-gradient(circle 1px at 62% 88%, rgba(232,201,154,0.4), transparent 60%);
  opacity: 0.7; animation: env-float 9s ease-in-out infinite;
}
@keyframes env-float { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(-12px); opacity: 0.95; } }

.envelope-overlay.opened { opacity: 0; pointer-events: none; }

/* Centered content */
.cover-content {
  position: relative; z-index: 3;
  text-align: center; color: #FBF7EF;
  padding: 40px 28px; max-width: 660px;
  display: flex; flex-direction: column; align-items: center;
  animation: cover-rise 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cover-rise { 0% { opacity: 0; transform: translateY(26px); } 100% { opacity: 1; transform: translateY(0); } }

.cover-eyebrow {
  font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.42em;
  text-transform: uppercase; color: rgba(251,247,239,0.82); margin-bottom: 24px;
}
.cover-names {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: clamp(50px, 11vw, 108px); line-height: 0.96; letter-spacing: -0.02em;
  color: #FBF7EF; text-shadow: 0 2px 34px rgba(0,0,0,0.45); margin: 0;
}
.cover-names .amp {
  font-family: "Tangerine", cursive; font-style: normal; color: #E8C99A;
  font-size: 0.72em; display: inline-block; margin: 0 0.08em; line-height: 0;
}
.cover-rule { display: flex; align-items: center; gap: 16px; margin: 28px 0 18px; color: #E8C99A; }
.cover-rule .line { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,201,154,0.85)); }
.cover-rule .line:last-child { background: linear-gradient(90deg, rgba(232,201,154,0.85), transparent); }
.cover-sprig { color: #E8C99A; }
.cover-date {
  font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: 0.34em;
  text-transform: uppercase; color: rgba(251,247,239,0.9); margin-bottom: 42px;
}
/* Open button — premium wax seal + label */
.cover-open {
  background: none; border: none; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 15px;
}
.cover-seal {
  width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
  font-family: "Italiana", "Marcellus", "Cormorant Garamond", serif; font-size: 25px; letter-spacing: 1px; color: #F6D9B0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,232,205,0.62) 0%, transparent 30%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,0.45) 0%, transparent 44%),
    radial-gradient(ellipse at center, #A8472E 8%, #7E2A1A 54%, #561608 100%);
  border-radius: 48% 52% 47% 53% / 52% 47% 53% 48%;
  box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5), inset 0 3px 6px rgba(255,205,175,0.4), 0 10px 26px rgba(0,0,0,0.5);
  text-shadow: 0 1px 1px rgba(0,0,0,0.45);
  transition: transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1);
  position: relative;
}
.cover-seal::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(246,217,176,0.45); border-radius: 50%; }
.cover-open:hover .cover-seal { transform: scale(1.09) rotate(-3deg); }
.cover-open-label {
  font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.34em;
  text-transform: uppercase; color: rgba(251,247,239,0.85);
  animation: pulse 2.4s ease-in-out infinite;
}
@media (max-width: 480px) { .cover-content { padding: 32px 20px; } .cover-rule .line { width: 48px; } }

/* ============ LUXURY INVITATION CARD — clean, photo-driven (2026) ============ */
.invite-card {
  position: relative;
  width: min(440px, 88vw);
  background: linear-gradient(170deg, #FFFEFA 0%, #F5ECDA 100%);
  border-radius: 4px;
  padding: 56px 44px 84px;
  margin: 14px 0 64px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.25);
  animation: cover-rise 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
}
/* thin gold inner border */
.invite-card::before {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(201, 165, 84, 0.45);
  border-radius: 2px;
  pointer-events: none;
}
.invite-card-inner { text-align: center; color: #2A2018; }

.invite-eyebrow {
  font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.45em;
  text-transform: uppercase; color: rgba(60, 45, 30, 0.7);
  margin-bottom: 30px;
}

.invite-names {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300;
  font-size: clamp(40px, 8vw, 64px); line-height: 1.0; letter-spacing: -0.01em;
  color: #2A2018; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.invite-names .n { display: block; }
.invite-names .amp {
  font-family: "Tangerine", cursive; font-style: normal; color: #9C3A2A;
  font-size: 1.05em; line-height: 0.7; display: block;
}

.invite-divider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 30px 0 22px;
}
.invite-divider .ln { width: 56px; height: 1px; background: #9C7A50; opacity: 0.65; }

.invite-date {
  font-family: "Inter", sans-serif; font-size: 13px; letter-spacing: 0.42em;
  text-transform: uppercase; color: #5C4A35; margin-bottom: 12px;
}

.invite-place {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 16px; color: rgba(60, 45, 30, 0.78);
}

/* Wax seal at bottom of card, slightly overlapping bottom edge */
.invite-seal {
  position: absolute; left: 50%; bottom: -34px;
  transform: translateX(-50%);
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Italiana", "Marcellus", "Cormorant Garamond", serif;
  font-size: 22px; letter-spacing: 1px; color: #F6D9B0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 232, 205, 0.62) 0%, transparent 30%),
    radial-gradient(circle at 68% 74%, rgba(0, 0, 0, 0.45) 0%, transparent 44%),
    radial-gradient(ellipse at center, #A8472E 8%, #7E2A1A 54%, #561608 100%);
  border-radius: 48% 52% 47% 53% / 52% 47% 53% 48%;
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.5),
              inset 0 3px 6px rgba(255, 205, 175, 0.4),
              0 12px 26px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer; border: none; padding: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1), box-shadow 0.5s ease;
  animation: seal-breathe 2.8s ease-in-out infinite;
}
.invite-seal::before {
  content: ""; position: absolute; inset: 7px;
  border: 1.5px solid rgba(246, 217, 176, 0.45); border-radius: 50%;
}
.invite-seal:hover { transform: translateX(-50%) scale(1.09) rotate(-3deg); }
@keyframes seal-breathe {
  0%, 100% { box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5), inset 0 3px 6px rgba(255,205,175,0.4), 0 12px 26px rgba(0,0,0,0.5), 0 0 0 0 rgba(168,71,46,0.55); }
  60% { box-shadow: inset 0 -5px 10px rgba(0,0,0,0.5), inset 0 3px 6px rgba(255,205,175,0.4), 0 12px 26px rgba(0,0,0,0.5), 0 0 0 18px rgba(168,71,46,0); }
}

@media (max-width: 480px) {
  .invite-card { padding: 44px 30px 76px; }
  .invite-divider .ln { width: 40px; }
}

/* Opening sequence — card scales + fades, photo backdrop dissolves */
.envelope-overlay.opened .invite-card {
  transform: scale(1.05);
  opacity: 0;
}
.envelope-overlay.opened .invite-seal {
  opacity: 0;
  transform: translateX(-50%) scale(1.4) rotate(14deg);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.6, 0.64, 1);
}
.envelope-overlay.opened .cover-eyebrow,
.envelope-overlay.opened .cover-open-label {
  opacity: 0;
  transition: opacity 0.4s ease;
}

@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* Music toggle floating */
.music-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-card);
}

.music-toggle:hover { transform: scale(1.08); }
.music-toggle.playing { background: var(--rose-deep); }
.music-toggle.playing::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--rose-deep);
  opacity: 0.4;
  animation: ripple 1.6s ease-out infinite;
}

@keyframes ripple {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Toast */
/* === Inline form validation === */
.field { position: relative; }
.field input.invalid,
.field input:user-invalid {
  border-color: #C0392B !important;
  background-color: rgba(192, 57, 43, 0.04);
}
.field input:user-valid {
  border-color: #6E8270;
}
.field-error {
  display: none;
  font-size: 12px;
  color: #C0392B;
  margin-top: 6px;
  font-family: var(--sans);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.field-error::before {
  content: "⚠ ";
  font-weight: 500;
}
.field.has-error .field-error { display: block; animation: shake 0.4s ease-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes shake { 0%, 100% { transform: none; } }
}

/* Toast container — stacks multiple toasts vertically with safe spacing */
.toast-container {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse; /* newest on bottom (closest to viewport edge) */
  gap: 10px;
  z-index: 1000;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast {
  background: var(--ink);
  color: var(--cream);
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-family: var(--serif-body);
  font-style: italic;
  box-shadow: var(--shadow-card);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.4s var(--transition), transform 0.4s var(--transition);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--transition), transform 1s var(--transition); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================
   FEATURE GATING — lock states + upgrade modal
   ============================================ */
.feature-locked {
  position: relative;
  opacity: 0.55;
  filter: grayscale(0.4);
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.feature-locked:hover { opacity: 0.75; filter: grayscale(0.2); }
.feature-locked > *:not(.feature-lock-badge) { pointer-events: none; }
.feature-locked::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(20,16,12,0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 5;
}
.feature-locked .feature-lock-badge {
  position: absolute; top: 10px; right: 10px;
  z-index: 6;
  background: rgba(31,26,20,0.85);
  color: #E8C99A;
  padding: 5px 10px 5px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.feature-lock-badge::before {
  content: "";
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3H9z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3H9z'/></svg>") center/contain no-repeat;
}

/* Locked side-menu list item (panel.html, kreator.html) */
.menu-item.feature-locked,
a.feature-locked {
  display: flex; align-items: center; justify-content: space-between;
}
.menu-item.feature-locked::before,
a.feature-locked::before {
  content: ""; display: inline-block;
  width: 12px; height: 12px; margin-right: 6px;
  background: currentColor; opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3H9z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3H9z'/></svg>") center/contain no-repeat;
}
.feature-tag-pro {
  display: inline-block;
  font-family: var(--sans); font-size: 8px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600;
  background: linear-gradient(135deg, #C9A554, #8E6E48);
  color: #FBF7EF; padding: 2px 6px; border-radius: 2px;
  margin-left: 6px; vertical-align: middle;
}

/* === UPGRADE MODAL === */
.upgrade-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(20,16,12,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.upgrade-modal.open { opacity: 1; }
.upgrade-modal-card {
  position: relative;
  background: linear-gradient(180deg, #FBF6EC 0%, #F0E8D6 100%);
  border-radius: 8px;
  max-width: 460px;
  width: 100%;
  padding: 56px 40px 40px;
  text-align: center;
  box-shadow: 0 50px 80px rgba(0,0,0,0.4);
  transform: scale(0.96) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.upgrade-modal.open .upgrade-modal-card { transform: scale(1) translateY(0); }
.upgrade-modal-card::before {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(201,165,84,0.4); border-radius: 4px;
  pointer-events: none;
}
.upgrade-modal-close {
  position: absolute; top: 14px; right: 18px;
  width: 32px; height: 32px;
  background: transparent; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink-soft);
  border-radius: 50%;
  transition: background 0.2s ease;
}
.upgrade-modal-close:hover { background: rgba(60,45,30,0.08); }
.upgrade-eyebrow {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 18px;
}
.upgrade-title {
  font-family: var(--serif-display); font-style: italic; font-weight: 300;
  font-size: clamp(22px, 3vw, 28px); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 24px;
}
.upgrade-title em { color: var(--rose-deep); font-style: italic; }
.upgrade-price { margin-bottom: 16px; }
.upgrade-amount {
  font-family: var(--serif-display); font-style: italic; font-weight: 400;
  font-size: 44px; color: var(--ink); display: block;
}
.upgrade-note {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ink-soft);
  display: block; margin-top: 4px;
}
.upgrade-sub {
  font-family: var(--serif-body); font-style: italic; font-size: 14px;
  color: var(--ink-soft); margin-bottom: 28px; line-height: 1.5;
}
.upgrade-actions {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
.upgrade-actions .btn { width: 100%; justify-content: center; }
.upgrade-actions .btn-ghost {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line);
}
@media (max-width: 480px) {
  .upgrade-modal-card { padding: 48px 24px 32px; }
}

/* === AMORÉ WATERMARK (footer link) — dla planów Starter/Essential === */
.amore-watermark {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(31, 26, 20, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 247, 239, 0.85);
  text-decoration: none;
  border: 1px solid rgba(201, 165, 84, 0.2);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, background 0.3s ease;
}
.amore-watermark:hover {
  transform: translateY(-2px);
  background: rgba(31, 26, 20, 0.9);
}
.amore-watermark .wm-label {
  font-weight: 400;
  opacity: 0.8;
}
.amore-watermark .wm-brand {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #E8C99A;
}
@media (max-width: 480px) {
  .amore-watermark { bottom: 12px; right: 12px; padding: 6px 12px; font-size: 9px; }
  .amore-watermark .wm-brand { font-size: 12px; }
}

/* ============================================
   CURTAIN REVEAL — pastel curtain that splits open
   (alternatywa do envelope dla motywu "bouquet")
   ============================================ */

.curtain-reveal {
  /* FULL-VIEWPORT — używa dynamic viewport units (działa lepiej na iOS Safari
     bo uwzględnia automatycznie znikający URL bar) */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;  /* dynamic viewport — większe na mobile po scroll */
  z-index: 9999;
  /* Sam overlay jest przezroczysty — krycie zapewnia .curtain-backdrop,
     które gaśnie po kliknięciu i odsłania stronę pod spodem */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

.curtain-stage {
  /* Stage rozciąga się na cały .curtain-reveal — zawsze full-screen */
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* === PŁÓTNO 900×1500 ===
   Wszystkie trzy warstwy zasłon mają RÓŻNE wymiary źródłowe (900×1500 vs
   941×1672) i różne offsety. Gdyby każda dostała osobno object-fit:cover,
   skalowałyby się niezależnie i przestałyby do siebie pasować.
   Dlatego: jedno płótno o proporcji 3:5, warstwy pozycjonowane procentowo
   1:1 wg macierzy z pliku źródłowego, a skalowane jest CAŁE płótno. */
/* === GEOMETRIA WSPÓLNA Z EKRANEM 2 ===
   Zasłony MUSZĄ mieć dokładnie tę samą szerokość, wysokość i punkt
   zaczepienia co .rg-date pod spodem. Inaczej w chwili, gdy backdrop
   gaśnie, grafika „przeskakuje" o różnicę skali — a dzieje się to
   w trakcie rozsuwania, więc widać to najmocniej.
   Ta sama formuła jest w theme-rose-garden.css jako --rg-w dla .rg-date. */
.curtain-canvas {
  --rg-w: min(100vw, 760px);                                  /* fallback */
  --rg-w: max(min(100vw, 760px), calc(100svh * 3 / 5));       /* svh, nie dvh:
              dvh zmienia się przy chowaniu paska URL na mobile i płótno
              zmieniałoby rozmiar w trakcie animacji */
  position: absolute;
  left: 50%;
  top: 0;                    /* .rg-date też startuje od y=0 (nav jest fixed) */
  translate: -50% 0;
  width: var(--rg-w);
  height: calc(var(--rg-w) * 5 / 3);
  /* --rg-fit liczy JS: ile trzeba pomniejszyć, żeby CAŁE płótno (razem
     z szarfą i dołem zasłon) zmieściło się w oknie. Na wysokich ekranach
     wychodzi 1 i nic się nie dzieje. */
  transform-origin: 50% 0;
  transform: scale(var(--rg-fit, 1));
  /* BEZ przejścia w stanie spoczynku. `--rg-fit` liczy JS dopiero po
     pierwszym renderze, więc z przejściem na `transform` płótno po wejściu
     na stronę przez 4 s samo z siebie odjeżdżało od skali 1 do docelowej —
     wyglądało to jak powolne oddalanie kurtyny, zanim ktokolwiek kliknął.
     Przejście dostaje dopiero `.opening` (reguła niżej). */
  transition: none;
  will-change: transform;
}

/* Po kliknięciu płótno dojeżdża do skali 1 — czyli DOKŁADNIE do geometrii
   ekranu 2 pod spodem. Zamiast skoku ramki mamy powolny najazd. */
/* Najazdu NIE MA: płótno zostaje w swojej skali przez całą sekwencję.
   Wcześniej dojeżdżało do skali ekranu 2 pod spodem, ale przy zasłonach
   idących do krawędzi kadru czytało się to jak zbliżenie kamery
   w trakcie rozsuwania — a nie o to chodzi. Treść pod spodem i tak
   pojawia się we własnej skali, bo nakładka niesie już tylko tkaninę. */
.curtain-reveal.opening .curtain-canvas {
  transition: none;
}

/* === TRYB PEŁNOEKRANOWY (data-curtain="bleed") ===
   Domyślnie płótno trzyma szerokość kolumny zaproszenia (760 px), żeby po
   rozsunięciu grafika nie „przeskoczyła" względem treści pod spodem. Ale przy
   zasłonach z jednolitej tkaniny nie ma czego dopasowywać — za to po bokach
   widać wtedy zasadę. W trybie bleed płótno pokrywa całe okno (jak cover):
   bierzemy większą z dwóch skal, więc żaden bok nie zostaje odsłonięty. */
.curtain-reveal[data-curtain="bleed"] .curtain-canvas {
  --rg-w: 100vw;                                    /* fallback */
  --rg-w: max(100vw, calc(100svh * 3 / 5));
}

/* === TRYB KURTYNY NA CAŁY EKRAN (data-curtain="cover") ===
   Dostawa z sierpnia 2026: lewe i prawe skrzydło narysowane KAŻDE na całą
   klatkę 2400×1600, stykające się na jej środku. To już nie są pasy do
   kolumny zaproszenia, więc nie wpasowujemy ich w płótno 3:5 — kładziemy
   na całe okno przez `object-fit: cover`. Oba skrzydła dostają IDENTYCZNĄ
   geometrię, więc ich szew zawsze wypada dokładnie na środku ekranu,
   niezależnie od jego proporcji, i żaden bok nie zostaje odsłonięty.

   Płótno przestaje tu cokolwiek skalować (żadnego `--rg-fit`, żadnego
   najazdu) — jest tylko układem odniesienia dla środka z szarfą. */
.curtain-reveal[data-curtain="cover"] .curtain-canvas {
  --rg-w: 100vw;
  left: 0;
  width: 100%;
  height: 100%;
  translate: none;
  transform: none;
  transition: none;
}

.curtain-reveal[data-curtain="cover"] .curtain-left,
.curtain-reveal[data-curtain="cover"] .curtain-right {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Prawe skrzydło nie ma w bazowym CSS własnego z-index (dostaje `auto`,
     czyli 0) — a środek ma 1, więc bez tej linijki malowałby się NAD nim.
     3 stawia je między środkiem (1) a lewym skrzydłem (4), zgodnie
     z kolejnością warstw w pliku źródłowym. */
  z-index: 3;
  /* Skrzydło maluje tylko WEWNĘTRZNĄ połowę swojego pudełka (w klatce zajmuje
     x 0–51 %), więc do zejścia z ekranu wystarczy mu ok. 55 % szerokości —
     domyślne 104 % dawało ruch „na sucho": obraz znikał w połowie czasu,
     a potem przez 1,7 s jechało puste pudełko. Stąd osobny dystans niżej. */
  /* Falowanie w spoczynku ruszałoby szwem na styku skrzydeł — przy kurtynie
     na cały ekran było to widać jako drgająca szpara na środku. */
  animation: none;
}

/* Środek z szarfą NA WIERZCHU skrzydeł (z-index 6 > 4). Skrzydła stykają się
   na środku, więc gdyby leżał pod spodem, w ogóle nie byłoby go widać.
   Wysokość wiąże z oknem, szerokość dobiera sama grafika (900:1500),
   dzięki czemu szarfa nie rozjeżdża się na szerokim ekranie. */
/* Skrzydła stykają się u samej góry i rozchodzą ku dołowi — zostaje między
   nimi litera V, i to jest miejsce na środkową część z szarfą. Stożek środka
   musi więc być WIĘKSZY niż okno: przy wysokości 1:1 jego wierzchołek wypadał
   za nisko i nad szarfą świeciła biała szpara. 148 % wysokości z górą na
   −48 % sadza dół szarfy na dolnej krawędzi okna, a stożek rozpycha się
   dokładnie w rozwidleniu skrzydeł. */
.curtain-reveal[data-curtain="cover"] .curtain-bg {
  /* Środek POD skrzydłami — tak jak w kompozycji grafika: widać go wyłącznie
     w rozwidleniu V, a jego boki chowają się pod tkaniną.
     z-index MUSI tu być 1, nie domyślne 2: prawe skrzydło nie ma własnego
     z-index (idzie po kolejności w dokumencie, czyli 0), więc środek z 2
     malował się NAD nim i po prawej stronie szarfy wychodziła prosta
     krawędź przycięcia pliku 900×1500. */
  z-index: 1;
  left: 50%;
  translate: -50% 0;
  /* Środek musi siedzieć w TEJ SAMEJ klatce 2400×1600 co skrzydła, inaczej
     przy zmianie proporcji okna wychodzi ze swojego rozwidlenia. Skrzydła
     kadruje `object-fit: cover`, czyli skala = max(100vw/2400, 100svh/1600);
     poniżej ta sama skala rozpisana wprost na `max()`, bo dzielenie długości
     przez długość w calc() nie jest jeszcze wszędzie pewne.
     Prostokąt środka w jednostkach klatki: 1333 × 2221, górna krawędź
     1470 jednostek nad środkiem klatki. Stożek jest wyższy niż klatka —
     inaczej jego wierzchołek wypadał poniżej miejsca, gdzie skrzydła się
     stykają, i nad szarfą świeciła szpara. */
  /* dvh, nie svh: nakładka ma `height: 100dvh`, a skrzydła kadrują się do
     SWOJEGO pudełka. Przy svh (mniejszym o pasek adresu) środek liczył się
     dla niższej klatki niż skrzydła i na telefonie brakowało go u dołu.
     Wysokość 2400 zamiast 2221 daje jeszcze ok. 8 % zwisu pod dolną krawędź
     klatki — margines na chowający się pasek URL i na zaokrąglenia. Skoro
     środek idzie pod skrzydła, nadmiar i tak nie ma jak wystawać. */
  width:  max(calc(100vw * 1440 / 2400), calc(100dvh * 1440 / 1600));
  height: max(calc(100vw * 2400 / 2400), calc(100dvh * 2400 / 1600));
  top: calc(50% - max(calc(100vw * 1470 / 2400), calc(100dvh * 1470 / 1600)));
  /* globalne `img { max-width: 100% }` ścinało tu szerokość do okna, przez co
     `object-fit` wpisywał grafikę w listki i szarfa urywała się w połowie */
  max-width: none;
  object-fit: contain;
}

/* Zasada wraca pod CAŁE okno (w trybie kolumny leży tylko po bokach).
   Skrzydła kryją tu wszystko, więc widać ją wyłącznie w resztkach szpary
   między nimi a szarfą — i o to chodzi: to kolor tkaniny, nie biel strony. */
.curtain-reveal[data-curtain="cover"] .curtain-backdrop {
  background:
    radial-gradient(circle at 50% 40%, #FDE4E8 0%, #FBD3D9 55%, #F3BCC5 100%);
}
.curtain-reveal[data-curtain="cover"] .curtain-backdrop::before,
.curtain-reveal[data-curtain="cover"] .curtain-backdrop::after {
  content: none;
}

/* ...ale gaśnie RAZEM ZE ŚRODKIEM (ETAP 1), nie ze skrzydłami. Skrzydła kryją
   tu cały ekran poza rozwidleniem V, więc wcześniejszy zanik zasady odsłania
   stronę wyłącznie w tym rozwidleniu — czyli dokładnie tam, gdzie znika
   środek z szarfą. Dzięki temu w miejscu środka pojawia się fontanna
   z ekranu 2, a nie płaski różowy trójkąt. */
.curtain-reveal[data-curtain="cover"].opening .curtain-backdrop {
  transition: opacity var(--zaslona-srodek, 1.1s) linear 0.15s;
}

.curtain-layer {
  position: absolute;
  display: block;
  backface-visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Nieprzezroczysta zasada na CAŁY viewport — leży pod płótnem zasłon.
   Dopóki jest, nic nie prześwituje przez akwarelę ani boki płótna. */
.curtain-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Kolory wzięte z samej grafiki zasłon (#FDDCE0 / #FCD2D7) — akwarela
     jest miejscami przezroczysta i na białym tle prześwity czytały się
     jak dziury. Na tle w kolorze tkaniny wyglądają jak głębia materiału.

     UWAGA: zasada leży teraz TYLKO PO BOKACH płótna (dwa pasy niżej), a nie
     pod nim. Pod płótnem ma być widać ekran 2 — wtedy znikający środek
     odsłania fontannę, zamiast pokazywać płaską róż. Boki gasną razem ze
     skrzydłami, żeby na szerokim ekranie strona nie wyszła za wcześnie. */
  background: none;
}

.curtain-backdrop::before,
.curtain-backdrop::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* +1 px zapasu — przy ułamkowej szerokości płótna zostawał włos tła */
  width: calc((100% - var(--curtain-w, 100%)) / 2 + 1px);
  background:
    radial-gradient(circle at 50% 40%, #FDE4E8 0%, #FBD3D9 55%, #F3BCC5 100%);
}
.curtain-backdrop::before { left: 0; }
.curtain-backdrop::after  { right: 0; }

/* Geometria 1:1 z macierzy SVG (płótno 900×1500):
   dolna  matrix(1.0428 0 0 1.0287 -1.1714 -45.4213)
   prawa  matrix(0.896  0 0 0.896   53.7008   1.7273)
   lewa   matrix(0.9703 0 0 0.9398   0.7068  -1.3480) */

.curtain-bg {
  /* dolna_czesc — środkowa zasłona z SZARFĄ. Znika przez zanik krycia
     i robi to PIERWSZA: zaczyna po 0,15 s i gaśnie 1,10 s, więc o 1,25 s
     jest już całkowicie niewidoczna. Dopiero wtedy ruszają skrzydła
     (opóźnienie 1.2s niżej) — to dwa następujące po sobie etapy, a nie
     jedno wspólne zdarzenie.
     Motywy, które NAPRAWDĘ mają część środkową, gaszą ją wolniej —
     patrz reguły [data-srodek] przy stanie .opening. */
  z-index: 2;
  left: -0.30%; top: -3.20%; width: 104.60%; height: 103.10%;
  transition: opacity 1.1s linear 0.15s;
  animation: curtain-breath 6s ease-in-out infinite;
}

.curtain-right {
  /* Surowa macierz z SVG kończy tę warstwę na 99.64% szerokości płótna —
     zostawał 3-pikselowy pasek odsłoniętego tła przy prawej krawędzi.
     Przesunięte w prawo (bez rozciągania) + zapas u góry i na dole.
     Nadmiar przycina overflow:hidden na .curtain-stage. */
  left: 6.30%; top: -0.50%; width: 94.00%; height: 100.80%;
  /* BRAKOWAŁO PRZEJŚCIA. Bez niego `transform` w stanie .opening działał
     natychmiast: prawe skrzydło znikało w jednej klatce, a lewe płynęło
     2,7 s. Rozsuwanie wyglądało przez to na zepsute. Lustrzane odbicie
     ustawień lewego skrzydła — ten sam czas, ta sama krzywa, to samo
     opóźnienie, tylko punkt zaczepienia po przeciwnej stronie. */
  transform-origin: 100% 50%;
  /* Start CO DO CHWILI wtedy, gdy środek znika (0.15 s + 1.50 s = 1.65 s) —
     bez zapasu, bo każda przerwa czytała się jako zawieszenie.
     Krzywa też się zmieniła: przy 0.5/0.02 skrzydło przejeżdżało przez
     pierwsze 0,3 s zaledwie 0,8 % szerokości okna (ok. 3 px na telefonie),
     więc mimo zerowego opóźnienia ruch wydawał się spóźniony o pół sekundy.
     Przy 0.2/0.03 to 4,3 % (ok. 18 px) — widać od razu, a dojście do końca
     jest tak samo miękkie. Koniec: 1.65 + 3.6 = 5,25 s. */
  transition: transform 2.8s cubic-bezier(0.25, 0.1, 0.55, 0.9) var(--zaslona-skrzydla, 1.2s);
  animation: curtain-wave-r 5s ease-in-out infinite;
  will-change: transform;
}

/* Falowanie prawego skrzydła — lustrzane wobec lewego, z przesuniętą fazą,
   żeby oba nie oddychały równym marszem. Wyłącznie właściwości
   indywidualne: `transform` jest zarezerwowany dla rozsuwania. */
@keyframes curtain-wave-r {
  0%, 100% { rotate: 0.35deg;  translate: 0 0; }
  50%      { rotate: -0.35deg; translate: -0.4% 0.3%; }
}

.curtain-left {
  z-index: 4;
  left: -0.30%; top: -0.50%; width: 102.00%; height: 105.30%;
  transform-origin: 0% 50%;
  /* To samo opóźnienie i ta sama krzywa co prawe skrzydło — oba ruszają
     w tej samej chwili, w której znika środkowa zasłona z szarfą. */
  transition: transform 2.8s cubic-bezier(0.25, 0.1, 0.55, 0.9) var(--zaslona-skrzydla, 1.2s);
  animation: curtain-wave-l 5s ease-in-out infinite;
  will-change: transform;
}

.curtain-cta {
  position: absolute;
  left: 50%;
  /* Bezpieczna pozycja na każdym urządzeniu — używa max() żeby zawsze było
     co najmniej 32px od dołu (uwzględnia notch/home indicator iOS),
     ale na większych ekranach pozycja procentowa daje ładny "breathing room" */
  bottom: max(32px, env(safe-area-inset-bottom, 0px) + 24px, 8%);
  translate: -50% 0;
  z-index: 5;
  font-family: 'Pinyon Script', 'Italianno', cursive;
  /* Skaluje się płynnie: małe telefony 24px, średnie 32-40px, desktop 48px */
  font-size: clamp(24px, 5vw, 48px);
  color: #9B3A47;
  text-shadow:
    0 1px 0 rgba(255, 245, 230, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
  pointer-events: none;
  animation: curtain-cta-pulse 2.2s ease-in-out infinite;
  white-space: nowrap;
  /* Dodatkowy padding od krawędzi ekranu (tablet portrait) */
  padding: 0 16px;
  max-width: 90vw;
  text-align: center;
}

/* === ANIMACJE ===
   ZASADA: bezczynne animacje (wiatr, oddech, puls) używają WYŁĄCZNIE
   właściwości indywidualnych — translate / rotate / scale.
   Animacja otwierania używa `transform`.
   Dzięki temu nie walczą o tę samą właściwość i nie trzeba ich zabijać
   przez `animation: none`, co wcześniej powodowało szarpnięcie w chwili
   kliknięcia (transform snapował z pozycji fali z powrotem do zera).
   === */

/* Subtelne falowanie zasłon przed kliknięciem (jakby wiatr) */
@keyframes curtain-wave-l {
  0%, 100% { translate: 0 0;      rotate: 0deg;    }
  50%      { translate: -0.4% 0;  rotate: 0.12deg; }
}
@keyframes curtain-wave-r {
  0%, 100% { translate: 0 0;      rotate: 0deg;     }
  50%      { translate: 0.4% 0;   rotate: -0.12deg; }
}

/* Subtelne podnoszenie tła (breath) */
@keyframes curtain-breath {
  0%, 100% { scale: 1;     }
  50%      { scale: 1.012; }
}

/* Pulsowanie CTA „dotknij aby otworzyć" */
@keyframes curtain-cta-pulse {
  0%, 100% { opacity: 0.85; translate: -50% 0;    }
  50%      { opacity: 1;    translate: -50% -3px; }
}

/* === SEKWENCJA — jedna klasa, reszta na transition-delay ===
   Wszystko rusza z `.opening`, więc start jest współdzielony i nie zależy
   od dokładności setTimeout.

   DWA ETAPY, jeden po drugim (życzenie: skrzydła ruszają dopiero wtedy,
   gdy środek zniknie CAŁKOWICIE):

     ETAP 1 — środek
     0.00 s  CTA gaśnie (0.35 s)
     0.00 s  płótno zaczyna najazd do skali ekranu 2 (4.00 s)
     0.15 s  środkowa zasłona z szarfą gaśnie liniowo (1.10 s)
     1.25 s  środek jest już całkiem niewidoczny

     ETAP 2 — skrzydła
     1.20 s  oba boki rozsuwają się (2.80 s) — ruszają 0,05 s ZANIM środek
             dojdzie do zera, żeby styk etapów był bezszwowy: przy starcie
             dokładnie na 1,25 s wciąż czuć było przerwę
     1.20 s  zasada gaśnie (2.60 s); w trybie kurtyny na cały ekran gaśnie
             razem ze środkiem, bo tam odsłania tylko rozwidlenie V
     2.90 s  skrzydła są już poza kadrem (tryb kurtyny)
     4.00 s  koniec przejścia skrzydeł i najazdu płótna
     3.60 s  .opened — overlay gaśnie (0.80 s)
     4.50 s  display:none

   MOTYW Z CZĘŚCIĄ ŚRODKOWĄ ([data-srodek], np. Ogród Różany) — ten sam
   przebieg, tylko etap 1 trwa dłużej, bo środek ma gasnąć wolniej:
     0.15 s  środek gaśnie liniowo (1.90 s)
     2.05 s  środek jest już całkiem niewidoczny
     2.00 s  skrzydła (2.80 s) i zasada (2.60 s) — koniec 4.80 s
     4.40 s  .opened
     5.30 s  display:none
   === */

.curtain-reveal.opening .curtain-cta {
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: none;
}

.curtain-reveal.opening .curtain-bg {
  opacity: 0;
  /* ETAP 1 — środek z szarfą gaśnie jako pierwszy i całkowicie:
     start 0,15 s, koniec 1,25 s (z atrybutem [data-srodek]: 2,05 s).
     Skrzydła ruszają DOKŁADNIE w tej chwili.
     `linear`, a nie `ease`: przy ease ostatnie 10 % krycia schodziło
     asymptotycznie i środek wyglądał na zniknięty już ok. 1,3 s, przez co
     start skrzydeł czytał się jako spóźniony. Liniowo moment zniknięcia
     pokrywa się z nominalnym końcem przejścia. */
  transition: opacity var(--zaslona-srodek, 1.1s) linear 0.15s;
}

.curtain-reveal.opening .curtain-backdrop {
  opacity: 0;
  /* Boczne pasy zasady gasną razem ze skrzydłami (ETAP 2) — pod samym
     płótnem zasady już nie ma, więc znikający środek odsłania fontannę
     od pierwszej chwili, a strona po bokach nie wychodzi przedwcześnie. */
  transition: opacity 2.6s ease-in-out var(--zaslona-skrzydla, 1.2s);
}

/* === MOTYW Z CZĘŚCIĄ ŚRODKOWĄ (data-srodek) — wolniejsze gaśnięcie ===
   Życzenie z 12.10: „klikam, troszkę wolniej on się wygasza i dopiero
   zasłony się rozsuwają". Samo rozsuwanie zostaje bez zmian (2,8 s,
   ta sama krzywa) — przesuwa się tylko jego POCZĄTEK, bo etap drugi
   nadal ma ruszać w chwili, gdy środka już nie widać.

   Dlaczego osobna reguła, a nie zmiana czasu wyżej: zasłony ma też
   Granatowy Aksamit, ale tam `curtains[0]` jest `null` — części
   środkowej nie ma wcale. Gdyby opóźnienie skrzydeł wzrosło globalnie,
   ten motyw dostałby 2 s pustego ekranu po kliknięciu, bo nie miałby
   czego gasić. Atrybut ustawia JS wtedy i tylko wtedy, gdy motyw
   dostarcza część środkową.

   ETAP 1 — środek:  0,15 s → 2,05 s (1,90 s liniowo)
   ETAP 2 — skrzydła: 2,00 s → 4,80 s (to samo zazębienie 0,05 s co wyżej)
   Dalsze progi (.opened, display:none) przesuwa JS — są w setTimeout.

   JEDNO ŹRÓDŁO CZASU — lekcja z 12.10. Pierwsza wersja tej zmiany
   przesuwała opóźnienie tylko skrzydłom płótna. Ale w Ogrodzie Różanym
   z tym samym opóźnieniem jadą też PANELE TKANINY po bokach
   (`.curtain-backdrop::before/::after` w theme-rose-garden.css), które
   na szerokim ekranie dopełniają zasłonę poza płótnem 3:5. Panele
   ruszyły dalej o 1,2 s, skrzydła dopiero o 2,0 s — i zasłona
   rozsuwała się DWA RAZY: najpierw boki, po chwili środek kadru.
   Na wąskim ekranie paneli prawie nie widać, więc pomiar w oknie
   telefonu tego nie złapał.
   Dlatego czas jest teraz zmienną, którą czytają WSZYSTKIE warstwy
   poruszające się razem — także te w arkuszach motywów. Nowa warstwa,
   która ma jechać ze skrzydłami, bierze `var(--zaslona-skrzydla)`,
   a nie wpisaną liczbę. */
.curtain-reveal {
  --zaslona-srodek: 1.1s;      /* jak długo gaśnie część środkowa */
  --zaslona-skrzydla: 1.2s;    /* kiedy ruszają skrzydła i wszystko, co z nimi jedzie */
}
.curtain-reveal[data-srodek] {
  --zaslona-srodek: 1.9s;
  --zaslona-skrzydla: 2s;
}

/* Tryb kurtyny na cały ekran: krótszy dystans, bo skrzydło maluje tylko
   swoją wewnętrzną połowę (patrz komentarz przy .curtain-left w tym trybie).
   Skrzydło potrzebuje ok. 55 % szerokości okna, żeby zejść z ekranu.
   Przy dystansie 60 % ta chwila wypadała na 63 % czasu przejścia, gdzie
   krzywa już hamuje — ostatnie 15 px pełzło przez ponad sekundę i wyglądało
   jak zawieszony strzęp tkaniny, który potem po prostu znika. Przy 75 %
   skrzydło schodzi z ekranu na 60 % czasu, jadąc jeszcze ok. 130 px/s,
   a pozostały ogon przejścia odbywa się już poza kadrem. */
.curtain-reveal[data-curtain="cover"].opening .curtain-left  { transform: translateX(-75%) rotate(-1.2deg); }
.curtain-reveal[data-curtain="cover"].opening .curtain-right { transform: translateX( 75%) rotate( 1.2deg); }

/* Boki rozsuwają się — opóźnienie w CSS, nie w setTimeout */
.curtain-reveal.opening .curtain-left {
  transform: translateX(-104%) rotate(-1.2deg);
}
.curtain-reveal.opening .curtain-right {
  transform: translateX(104%) rotate(1.2deg);
}

/* === STAN OPENED — cała kurtyna znika === */

.curtain-reveal.opened {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reduced motion — bez animacji */
@media (prefers-reduced-motion: reduce) {
  .curtain-left, .curtain-right, .curtain-bg, .curtain-cta {
    animation: none !important;
  }
  .curtain-canvas,
  .curtain-reveal.opening .curtain-left,
  .curtain-reveal.opening .curtain-right,
  .curtain-reveal.opening .curtain-bg,
  .curtain-reveal.opening .curtain-backdrop {
    transition-duration: 0.5s !important;
    transition-delay: 0s !important;
  }
}

/* ============================================
   SHUTTER REVEAL — okiennice otwierane na zawiasach
   Inny mechanizm niż zasłony. Zasłony jadą w bok i muszą się mieścić
   w kadrze, więc bywa potrzebne skalowanie płótna. Tu ściana pokrywa
   całe okno (cover), a skrzydła obracają się w miejscu — nic nie zmienia
   rozmiaru, więc animacja jest wolna od przeskoku.
   ============================================ */

.shutter-reveal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: #F4F1E4;              /* kolor zaprawy między kaflami */
}

/* Rozmyte tło pod planszą — wypełnia margines, którego pionowa plansza
   nie zakryje na poziomym ekranie. Powiększone i rozmyte, więc czyta się
   jak ściana poza ostrością, a nie jak przycięta grafika. */
.shutter-bleed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.shutter-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.28;                    /* żeby rozmycie nie odsłoniło krawędzi */
  /* Wcześniej przygaszone i odbarwione (saturate .9, brightness .95) —
     boki czytały się jak szara plama obok jasnej planszy. Teraz idą
     w stronę kremu strony: jaśniej i odrobinę cieplej, więc pas przy
     krawędzi ekranu przestaje przyciągać wzrok. */
  filter: blur(30px) saturate(1.05) brightness(1.06);
  display: block;
}
/* Dodatkowo wygaszamy boki ku krawędziom ekranu — plansza zostaje
   najjaśniejszym punktem kadru, a tło rozpływa się w tle strony. */
.shutter-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 45%, rgba(251,249,240,0) 38%, rgba(251,249,240,.55) 100%);
}

/* Płótno 900×1500.
   Rozmiar dobrany tak, żeby CAŁE okno (y 10.6–79.3% planszy) mieściło się
   w kadrze — inaczej na laptopie okiennice zostałyby ucięte w pół.
   Na wąskich ekranach wchodzi tryb cover, bo tam proporcje i tak pasują. */
.shutter-stage {
  /* Płótno = ramka planszy ekranu 2 (left/top/width/height z JS).
     Żadnego zbliżenia: brama ma rozmiar z plików pierwotnych, a kadr
     nie jedzie — rusza się wyłącznie para skrzydeł. */
  position: absolute;
  /* Perspektywa musi być na rodzicu skrzydeł, inaczej rotateY jest płaskie.
     W jednostkach planszy, żeby głębia była taka sama na każdym ekranie. */
  perspective: calc(var(--sh-w, 760px) * 1.6);
  perspective-origin: 50% 42%;
}

.shutter-wall,
.shutter-wall img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shutter-wall img { object-fit: fill; display: block; }
/* Dolna krawędź planszy wtopiona w rozmyte tło — na wysokim oknie plansza
   (3:5) nie sięga dołu i ostra krawędź czytała się jak niedokończony pas.
   Ta sama kuracja co przy fotobudce. */
.shutter-wall {
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
}

.shutter-leaf {
  position: absolute;
  transform-style: preserve-3d;
  /* Krzywa z wyraźnym oporem na starcie (0.68) i miękkim dojściem:
     drewno najpierw stawia opór, potem idzie samo. Opóźnienia są PER
     SKRZYDŁO niżej — obydwa ruszające równocześnie wyglądały mechanicznie. */
  transition: transform 1.55s cubic-bezier(0.68, 0.02, 0.20, 1);
  will-change: transform;
  backface-visibility: hidden;
}
.shutter-leaf img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* Zawias na zewnętrznej krawędzi — dokładnie tam, gdzie namalowano okucia */
.sl-l { transform-origin:   0% 50%; }
.sl-r { transform-origin: 100% 50%; }

/* Cień na skrzydle: im bardziej otwarte, tym mocniej odwrócone od światła */
.shutter-leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.9s ease 0.15s;
}
.sl-l::after { background: linear-gradient(90deg, rgba(0,14,48,.34), rgba(0,14,48,0) 70%); }
.sl-r::after { background: linear-gradient(270deg, rgba(0,14,48,.34), rgba(0,14,48,0) 70%); }

.shutter-cta {
  position: absolute;
  /* `top` w pikselach ustawia JS — napis siedzi na dolnym panelu okiennic,
     a gdy ten wypada poza kadr, dosuwa się do dołu okna. */
  left: 50%;
  /* Napis siedzi teraz NA okiennicach, w dolnej ich części — .shutter-cta
     jest dzieckiem .shutter-stage, więc procent liczy się od planszy.
     Okiennice kończą się na 79,3 %, więc 24 % od dołu to ich dolny panel. */
  translate: -50% 0;
  z-index: 5;
  font-family: 'Pinyon Script', 'Italianno', cursive;
  font-size: clamp(24px, 5vw, 48px);
  /* Drewno okiennicy ma jasność ~140 — to półton, na którym ani biel
     (3,36:1), ani krem (3,03:1), ani zwykły granat (4,15:1) nie dochodzą
     do progu 4,5. Dopiero głęboki granat daje 5,18:1.
     Jasna poświata odrywa litery od słojów drewna. */
  color: #0B1B36;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 2px 16px rgba(255, 255, 255, .40);
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  animation: shutter-cta-pulse 2.2s ease-in-out infinite;
}

/* Bezczynne: WYŁĄCZNIE właściwości indywidualne (translate/rotate/scale),
   żeby nie walczyć z `transform` animacji otwierania — ta sama zasada,
   co przy zasłonach. */
@keyframes shutter-cta-pulse {
  0%, 100% { opacity: .88; translate: -50% 0;    }
  50%      { opacity:  1;  translate: -50% -3px; }
}

/* === SEKWENCJA ===
     0.00 s  CTA gaśnie (0.25 s)
     0.10 s  lewe skrzydło (1.55 s)   |  0.26 s  prawe skrzydło (1.55 s)
     0.35 s  ŚCIANA, rozmyte boki i kolor zaprawy gasną (1.50 s) — w RUCHU
     1.85 s  z nakładki zostają już tylko skrzydła, reszta to ekran 2
     1.95 s  .opened — gasną same skrzydła (1.00 s), stojące pionowo
     3.05 s  display:none

   Dlaczego tak: geometria bramy jest już zgodna co do setnej piksela
   (patrz OTW1/OTW2 w zaproszenie.html), ale skok brał się z czegoś innego —
   z TREŚCI wokół bramy. Nakładka ma dookoła kafle, a ekran 2 cytryny,
   hortensje i otwarte okiennice. Przenikanie odpalane PO zatrzymaniu
   skrzydeł podmieniało więc dwa nieruchome, zupełnie różne obrazy i oko
   czytało to jako cięcie.
   Teraz ściana rozpływa się W TRAKCIE obrotu skrzydeł: otoczenie zmienia
   się, gdy wzrok śledzi ruch, a kiedy skrzydła się zatrzymują, pod nimi
   jest już ekran 2. Na końcu gasną same skrzydła — ustawione niemal
   krawędzią do widza, więc nie ma czego „podmieniać".
   === */
.shutter-reveal.opening {
  /* Kolor zaprawy między kaflami też musi zejść — inaczej po zniknięciu
     ściany zostaje kremowa płyta zamiast strony. */
  background-color: rgba(244, 241, 228, 0);
  transition: background-color 1.5s ease 0.35s;
}
.shutter-reveal.opening .shutter-wall {
  opacity: 0;
  transition: opacity 1.5s ease 0.35s;
}
.shutter-reveal.opening .shutter-cta {
  opacity: 0;
  transition: opacity .3s ease;
  animation: none;
}
.shutter-reveal.opening .sl-l { transform: rotateY(-101deg); transition-delay: .10s; }
.shutter-reveal.opening .sl-r { transform: rotateY( 107deg); transition-delay: .26s; }

/* Kadr stoi nieruchomo — rozmyte boki tylko delikatnie oddychają i gasną
   razem ze ścianą, żeby otoczenie bramy zmieniło się w jednym ruchu. */
.shutter-reveal.opening .shutter-bleed {
  transition: scale 2.8s cubic-bezier(0.32, 0, 0.20, 1), opacity 1.5s ease 0.35s;
  scale: 1.06;
  opacity: 0;
}
.shutter-reveal.opening .shutter-leaf::after { opacity: 1; }

.shutter-reveal.opened {
  opacity: 0;
  pointer-events: none;
  /* 1.00 s, start na 1.95 s. W tej chwili z nakładki zostały już tylko
     skrzydła stojące niemal krawędzią do widza — gaśnie więc wąski pasek
     drewna, a nie cały obraz. Liniowo, bo krzywa z przyspieszeniem robiła
     z przenikania „mrugnięcie" w połowie. */
  transition: opacity 1s linear;
}

/* Ekran 2 NIE dostaje już własnego ruchu: skoro najazd ląduje dokładnie
   na jego planszy, każde dodatkowe skalowanie znowu rozjechałoby oba
   obrazy w chwili przenikania. Podejście z `sh-enter` (skala 1.09 → 1)
   było próbą zamaskowania rozjazdu zamiast usunięcia go. */

@media (prefers-reduced-motion: reduce) {
  .shutter-cta { animation: none !important; }
  .shutter-leaf,
  .shutter-leaf::after { transition-duration: .45s !important; transition-delay: 0s !important; }
}

/* ============================================
   PHOTOBOOTH REVEAL — naciśnij guzik, wysunie się pasek zdjęć
   Trzeci mechanizm odsłony obok zasłon i okiennic. Maszynka stoi
   nieruchomo — rusza się wyłącznie guzik i pasek zdjęć wysuwający
   się ze szczeliny. Zero zmian skali, więc zero przeskoku rozmiaru.
   ============================================ */

.pb-reveal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: #EDE8DC;
}

/* Rozmyte tło pod planszą — plansza jest pionowa 3:5, okno bywa poziome */
.pb-bleed { position: absolute; inset: 0; overflow: hidden; }
.pb-bleed img {
  width: 100%; height: 100%;
  object-fit: cover;
  scale: 1.14;
  filter: blur(24px) saturate(.92) brightness(.97);
  display: block;
}

/* === GEOMETRIA WSPÓLNA Z EKRANEM 2 ===
   Ta sama zasada co przy okiennicach i zasłonach: płótno odsłony ma
   dokładnie tę samą ramkę co plansza ekranu 2 pod spodem (left/top/
   width/height ustawia JS), a kadr na maszynkę robi transform, który
   przy otwieraniu dojeżdża do `none`. Dzięki temu maszynka nie zmienia
   rozmiaru w chwili przenikania — wcześniej odsłona rysowała ją z
   39,3 % szerokości płótna, a ekran 2 z 55,6 %, czyli o 41 % większą. */
.pb-stage {
  /* Sam kontekst dla warstw — każda dostaje z JS własny prostokąt
     w pikselach okna, przepisany z odpowiadającej warstwy ekranu 2. */
  position: absolute;
  inset: 0;
}

/* Warstw ekranu 2 nie zatrzymujemy — odsłona kopiuje ich żywe prostokąty
   klatka po klatce (patrz `odswiez` w zaproszenie.html), więc dryf,
   oddech i parallaksa dzieją się po obu stronach identycznie. */

/* Papier planszy — wypełnia całe płótno, dokładnie jak `.rg-bg` ekranu 2 */
.pb-wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  z-index: 0;
  pointer-events: none;
  /* Dolna krawędź papieru wtopiona w rozmyte tło — na wysokim oknie
     plansza (3:5) nie sięga dołu i ostra krawędź czytała się jak
     niedokończony pas. */
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 90%, transparent 100%);
}

.pb-machine {
  position: absolute;
  display: block;
  z-index: 1;                     /* korpus pod paskiem — pasek zjeżdża w środku */
  user-select: none;
  -webkit-user-drag: none;
}
/* Górna belka maszynki — nad paskiem, żeby odbitka wysuwała się spod niej */
.pb-bar {
  position: absolute;
  display: block;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Szczelina: pasek zdjęć startuje SCHOWANY nad nią i zjeżdża w dół.
   overflow:hidden sprawia, że wygląda, jakby wychodził z maszynki. */
.pb-slot {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.pb-slot .pb-strip {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
  translate: 0 -100%;
  transition: translate 2.1s cubic-bezier(0.28, 0.02, 0.2, 1) 0.45s;
  filter: drop-shadow(0 6px 14px rgba(20, 8, 8, .35));
}

/* Guzik — koronkowe serce „Click the Button", osobna warstwa nad płótnem.
   Pozycję i rozmiar liczy JS w pikselach okna: naturalnie wisi na dolnej
   krawędzi maszynki, a gdy ta wypada poza kadrem, dosuwa się do dołu okna.
   Pulsuje samą skalą — żadnych transformów, które biłyby się z animacją
   wciśnięcia. */
.pb-heart {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(20, 8, 8, .38));
  animation: pb-pulse 2.4s ease-in-out infinite;
}
@keyframes pb-pulse {
  0%, 100% { scale: 1;     }
  50%      { scale: 1.035; }
}

/* === SEKWENCJA ===
     0.00 s  guzik wciska się i gaśnie (0.30 s + 0.55 s)
     0.45 s  pasek zdjęć zjeżdża ze szczeliny (2.10 s, koniec 2.55 s)
     2.70 s  .opened — nakładka gaśnie (1.00 s)
   Kadr nie rusza się ani o piksel: maszynka, belka i pasek stoją od
   pierwszej klatki dokładnie tam, gdzie na ekranie 2, więc przenikanie
   nie ma czego przesuwać. === */
/* Wciśnięcie: serce wpada w głąb i znika — na ekranie 2 go nie ma,
   więc musi zejść ze sceny PRZED przenikaniem. */
.pb-reveal.opening .pb-heart {
  animation: none;
  scale: 0.9;
  opacity: 0;
  transition: scale .3s cubic-bezier(.3,0,.2,1), opacity .55s ease .3s;
}
.pb-reveal.opening .pb-slot .pb-strip { translate: 0 0; }

.pb-reveal.opened {
  opacity: 0;
  pointer-events: none;
  /* 1.0 s od 2.70 s — po zakończeniu zjazdu paska (2.55 s) i wewnątrz
     najazdu (3.40 s), więc nakładka znika, kiedy obraz jeszcze płynie.
     Liniowo: to przenikanie dwóch obrazów, a nie efekt sam w sobie. */
  transition: opacity 1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .pb-button { animation: none !important; }
  .pb-slot .pb-strip { transition-duration: .4s !important; transition-delay: 0s !important; }
}

/* Plan tile highlight (po przyjściu z upgrade modal-a z innej strony) */
.plan-tile.plan-highlight {
  box-shadow: 0 0 0 2px var(--gold), 0 30px 60px -20px rgba(201,165,84,0.4);
  animation: plan-pulse 2s ease-in-out 2;
}
@keyframes plan-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* ============================================
   HERBARIUM — vintage romantic pressed flowers
   Aged parchment + Sepia ink + Dusty rose + Wax seal burgundy
   "Real specimen page" aesthetic (Pinterest/Canva trend 2026)
   ============================================ */

/* === Gallery card: warm parchment lift + subtle sepia glow on hover === */
.template-card[data-theme="como"] {
  background: linear-gradient(180deg, #F6EED9 0%, #EDE0BE 100%);
  border-color: rgba(139, 110, 72, 0.30);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease;
}
.template-card[data-theme="como"]:hover {
  transform: translateY(-12px) rotate(-0.4deg);
  border-color: rgba(138, 71, 71, 0.55);
  box-shadow:
    0 36px 70px -26px rgba(92, 74, 53, 0.45),
    0 14px 24px -10px rgba(61, 47, 34, 0.22),
    0 0 0 1px rgba(139, 110, 72, 0.22),
    inset 0 0 80px rgba(154, 122, 78, 0.06);
}
.template-card[data-theme="como"]:hover .template-thumb svg {
  filter: sepia(0.04) saturate(0.95) contrast(1.02);
}
/* Pressed-flower hover — each specimen gently shifts as if photographed in candlelight */
.template-card[data-theme="como"] .template-thumb svg > g[transform*="rotate"] {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.template-card[data-theme="como"]:hover .template-thumb svg > g[transform*="rotate(-22)"] {
  animation: hrb-sway-l 6s ease-in-out infinite;
}
.template-card[data-theme="como"]:hover .template-thumb svg > g[transform*="rotate(15)"] {
  animation: hrb-sway-r 7s ease-in-out infinite;
}
.template-card[data-theme="como"]:hover .template-thumb svg > g[transform*="rotate(28)"] {
  animation: hrb-sway-r 8s ease-in-out infinite 0.5s;
}
@keyframes hrb-sway-l {
  0%, 100% { transform: translate(70px, 95px) rotate(-22deg); }
  50%      { transform: translate(70px, 93px) rotate(-23.5deg); }
}
@keyframes hrb-sway-r {
  0%, 100% { transform: translate(295px, 105px) rotate(15deg); }
  50%      { transform: translate(295px, 103px) rotate(16.2deg); }
}

/* === Wax-seal soft pulse (the burgundy seal in the thumbnail + envelope) === */
@keyframes hrb-wax-pulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(138,71,71,0.3)); }
  50%      { filter: brightness(1.06) drop-shadow(0 0 8px rgba(138,71,71,0.35)); }
}
body[data-theme="como"] .envelope-wax-seal {
  background: radial-gradient(circle at 35% 30%, #B05858 0%, #8A4747 50%, #5C2F2F 100%);
  box-shadow:
    0 6px 14px rgba(92, 47, 47, 0.45),
    inset 0 -2px 4px rgba(70, 30, 30, 0.5),
    inset 0 2px 3px rgba(244, 235, 217, 0.4);
  animation: hrb-wax-pulse 6s ease-in-out infinite;
}

/* === Smooth paper-style fade-in for invitation sections (Herbarium theme) === */
@keyframes hrb-paper-fade {
  from { opacity: 0; transform: translateY(14px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
body[data-theme="como"] .hero-photo,
body[data-theme="como"] .section,
body[data-theme="como"] .program,
body[data-theme="como"] .rsvp-section,
body[data-theme="como"] .invitation-section {
  animation: hrb-paper-fade 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body[data-theme="como"] .section:nth-of-type(2) { animation-delay: 0.12s; }
body[data-theme="como"] .section:nth-of-type(3) { animation-delay: 0.22s; }
body[data-theme="como"] .section:nth-of-type(4) { animation-delay: 0.32s; }
body[data-theme="como"] .section:nth-of-type(5) { animation-delay: 0.42s; }

/* === Hero specimen drift — like pages of an old book breathing === */
@keyframes hrb-drift-l {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-2px, -4px) rotate(-0.6deg); }
}
@keyframes hrb-drift-r {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(3px, -3px) rotate(0.6deg); }
}
body[data-theme="como"] .hero-photo svg > g[transform*="translate(180, 235)"] {
  transform-origin: 180px 235px;
  animation: hrb-drift-l 11s ease-in-out infinite;
}
body[data-theme="como"] .hero-photo svg > g[transform*="translate(1000, 220)"] {
  transform-origin: 1000px 220px;
  animation: hrb-drift-r 13s ease-in-out infinite;
}
body[data-theme="como"] .hero-photo svg > g[transform*="translate(1050, 470)"] {
  transform-origin: 1050px 470px;
  animation: hrb-drift-r 14s ease-in-out infinite 1s;
}

/* === Envelope opening — elegant slow swing for Herbarium theme === */
body[data-theme="como"] .envelope-flap {
  transition: transform 1.8s cubic-bezier(0.34, 1.25, 0.42, 0.98),
              box-shadow 1.8s ease;
  transform-origin: 50% 0%;
}
body[data-theme="como"] .envelope-cover.opening .envelope-flap {
  transform: rotateX(-178deg);
  box-shadow: 0 -4px 14px rgba(92, 74, 53, 0.4);
}
body[data-theme="como"] .envelope-cover {
  transition: opacity 1s 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-theme="como"] .envelope-cover.opened {
  opacity: 0;
  transform: scale(1.04);
}

/* === Sepia ink typography for Herbarium === */
body[data-theme="como"] .hero-title,
body[data-theme="como"] .invitation-title,
body[data-theme="como"] .names-display {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #3D2F22;
}
body[data-theme="como"] .script,
body[data-theme="como"] .tagline-script,
body[data-theme="como"] .amp {
  font-family: 'Pinyon Script', 'Italianno', cursive !important;
  font-weight: 400;
  color: #8A4747;
}
/* Burgundy accent text */
body[data-theme="como"] .theme-accent {
  color: #8A4747;
  text-shadow: 0 0 1px rgba(138, 71, 71, 0.15);
}

/* === Hand-written calligraphy slow shimmer === */
@keyframes hrb-script-fade {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
body[data-theme="como"] .tagline-script,
body[data-theme="como"] .script-amp {
  animation: hrb-script-fade 5s ease-in-out infinite;
}

/* === Reduced-motion guard === */
@media (prefers-reduced-motion: reduce) {
  .template-card[data-theme="como"]:hover .template-thumb svg > g[transform*="rotate"],
  body[data-theme="como"] .hero-photo,
  body[data-theme="como"] .section,
  body[data-theme="como"] .envelope-wax-seal,
  body[data-theme="como"] .tagline-script,
  body[data-theme="como"] .script-amp,
  body[data-theme="como"] .hero-photo svg > g {
    animation: none !important;
  }
  body[data-theme="como"] .envelope-flap,
  body[data-theme="como"] .envelope-cover { transition: opacity 0.3s ease !important; }
}

/* ============================================
   UNIVERSAL PREMIUM PHOTO TREATMENT — neutral cream / desaturated grade
   (Pinterest/Canva wedding trend: lekko odbarwione fotografie + mocna
   czytelność typografii. Stosowane do wszystkich motywów dla spójnego
   premium-stationery vibe.)
   ============================================ */

/* === Premium brighten + desaturate for ALL theme photos (Pinterest/Canva look) === */
.template-card .template-thumb .hero-fill,
.template-card .template-thumb svg,
.template-thumb .hero-fill,
.template-thumb svg,
.hero-photo svg,
.preview-hero-bg,
.preview-hero-bg svg,
#themeHeroBg svg,
#previewHeroBg svg {
  filter: brightness(1.18) saturate(0.82) contrast(0.96) sepia(0.04) !important;
}

/* === Stronger center scrim behind text in ALL gallery thumbnails (better legibility) === */
.template-card .template-thumb .thumb-gradient,
.template-thumb .thumb-gradient {
  background:
    radial-gradient(ellipse 95% 65% at 50% 50%, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 80%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.10) 25%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0.68) 100%) !important;
}

/* === Bolder text + sharper layered shadows for ALL gallery thumbnails === */
.template-card .template-thumb .thumb-tagline,
.template-thumb .thumb-tagline {
  font-weight: 600 !important;
  color: #FBF7EF !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.85),
    0 2px 6px rgba(0,0,0,0.75),
    0 0 18px rgba(0,0,0,0.45) !important;
}
.template-card .template-thumb .thumb-names,
.template-thumb .thumb-names {
  font-weight: 600 !important;
  color: #FBF7EF !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.92),
    0 3px 8px rgba(0,0,0,0.78),
    0 5px 16px rgba(0,0,0,0.58),
    0 0 24px rgba(0,0,0,0.4) !important;
}
.template-card .template-thumb .thumb-date,
.template-thumb .thumb-date {
  font-weight: 500 !important;
  color: #FBF7EF !important;
  text-shadow:
    0 1px 4px rgba(0,0,0,0.85),
    0 2px 8px rgba(0,0,0,0.55) !important;
  border-color: rgba(251, 247, 239, 0.85) !important;
}

/* === Strong text shadows ONLY where text lays on a photo (live invitation + preview) === */
/* IMPORTANT: NOT on .hero-title alone — that class is used on homepage cream background.
   Only scope to .hero-photo and .preview-hero-overlay contexts. */
.hero-photo .invitation-title,
.hero-photo .names-display,
.hero-photo .hero-names,
.hero-photo h1,
.hero-photo h2,
.hero-overlay h1,
.hero-overlay h2,
.preview-hero-overlay h1,
.preview-hero-overlay h2,
.preview-hero-overlay .names {
  text-shadow:
    0 2px 0 rgba(0,0,0,0.6),
    0 3px 10px rgba(0,0,0,0.5),
    0 6px 20px rgba(0,0,0,0.38);
}

/* Live invitation script — strong shadow so it pops on photo */
.hero-photo .tagline-script,
.hero-photo .script-amp,
.hero-photo .amp-script,
.preview-hero-overlay .tagline,
.preview-hero-overlay .script {
  text-shadow:
    0 1px 0 rgba(0,0,0,0.65),
    0 2px 8px rgba(0,0,0,0.5),
    0 0 18px rgba(0,0,0,0.32);
}

/* Date stamp on photo */
.hero-photo .hero-date,
.preview-hero-overlay .date {
  text-shadow: 0 1px 5px rgba(0,0,0,0.7), 0 2px 9px rgba(0,0,0,0.45);
  font-weight: 500;
}

/* Soft radial scrim behind text on live invitation hero (ALL themes) */
.hero-photo::after,
.preview-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 50%, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.12) 55%, transparent 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.14) 70%, rgba(0, 0, 0, 0.52) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-photo,
.preview-hero { position: relative; }
.hero-photo > *:not(.hero-photo-bg):not(#themeHeroBg),
.preview-hero > *:not(.preview-hero-bg) { position: relative; z-index: 2; }


/* ── Sloty motywów czekających na grafiki ──────────────────────── */
.template-card.is-soon { cursor: default; }
.template-card.is-soon .template-thumb { filter: saturate(0.55); }
.template-card.is-soon:hover { transform: none; box-shadow: inherit; }
.template-card.is-soon .template-overlay { background: rgba(255,255,255,.55); }
.template-tag.soon {
  background: rgba(255,255,255,.9);
  color: #8A7B84;
  border: 1px solid rgba(138,123,132,.35);
  letter-spacing: .12em;
}


/* ══════════════════════════════════════════════════════════════
   KAFELEK Z GOTOWĄ PLANSZĄ (motywy z THEMES[id].thumb)
   Sam obrazek — bez korekt koloru, bez zasłon, bez zoomu.
   Ma wyglądać dokładnie tak, jak plik dostarczony przez grafika.
   ══════════════════════════════════════════════════════════════ */
.template-thumb.is-plate { background: #FFFFFF; }

/* Kafelek planszy. Od build 119 w środku jest SVG (plansza + imiona i data
   rysowane na żywo), a nie samo <img> — dlatego reguły muszą łapać oba.
   filter:none jest KONIECZNE: .hero-fill svg ma wspólny grade rozjaśniający
   dla motywów fotograficznych, a on na akwareli robi z różu błoto. */
.template-thumb .thumb-plate,
.template-thumb .thumb-plate svg,
.template-thumb .thumb-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* kafelek 3/5 = proporcja planszy → brak przycięcia */
  display: block;
  filter: none !important;
  transition: none;
}

/* Hover nie rusza grafiki — podnosi kartę */
.template-card:hover .template-thumb.is-plate { transform: none; }
.template-card:has(.is-plate) { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }
.template-card:has(.is-plate):hover { transform: translateY(-4px); }

/* ══════════════════════════════════════════════════════════════════
   PLATE REVEAL — plansza startowa, która ustępuje
   Czwarty mechanizm odsłony, obok zasłon, okiennic i fotobudki.
   Buduje ekran startowy z warstw screenLayers["01-start"], więc nie
   wymaga od grafika ani jednego dodatkowego pliku.

   Zasada, której pilnujemy w całym projekcie: SKALA PLANSZY NIE ZMIENIA
   SIĘ ANI NA MOMENT. Plansza od pierwszej klatki wypełnia okno, a ruch
   dzieje się wyłącznie w animacji wyjścia — na nakładce, nie na stronie
   pod spodem. Stąd `transform` jest tu dozwolony: to jest właśnie ta
   animacja odsłaniająca, dla której go rezerwujemy.
   ══════════════════════════════════════════════════════════════════ */
.plate-reveal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; background: #FFFFFF;
}
/* Rozmyta, powiększona kopia tła wypełnia to, czego pionowa plansza
   nie zakryje na poziomym oknie. Bez tego widać pas tła strony. */
.plate-bleed { position: absolute; inset: 0; }
.plate-bleed img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(38px) saturate(0.92); transform: scale(1.14);
}
.plate-bleed::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.28); }

/* Plansza jest pionowa 3:5. Dobieramy jej wysokość tak, żeby zmieściła
   się w oknie i nie trzeba jej było w trakcie animacji domierzać. */
.plate-stage {
  position: relative;
  --pl-h: min(100svh, calc(100vw * 5 / 3));
  height: var(--pl-h); width: calc(var(--pl-h) * 3 / 5);
}
.plate-canvas { position: absolute; inset: 0; }
.plate-layer { position: absolute; object-fit: contain; will-change: transform, opacity; }

.plate-cta {
  position: absolute; left: 50%; bottom: clamp(28px, 7vh, 64px);
  transform: translateX(-50%);
  font: 500 clamp(11px, 1.3vw, 13px)/1 var(--rg-ui, sans-serif);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rg-ink, #333); opacity: 0.72;
  animation: plate-cta-tetno 3.4s ease-in-out infinite;
}
@keyframes plate-cta-tetno { 0%,100% { opacity: 0.72; } 50% { opacity: 0.34; } }
.plate-reveal.opening .plate-cta { opacity: 0; transition: opacity 0.35s; }

/* Wyjście — wspólna podstawa. Nakładka gaśnie; poszczególne motywy
   nadpisują ruch warstwy kluczowej poniżej. */
.plate-reveal.opening { transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.55s; opacity: 0; }
.plate-reveal.opening .plate-layer {
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease;
}

/* ── Wyjścia charakterystyczne dla motywu ─────────────────────────
   Każdy motyw ustępuje inaczej, zgodnie z tym, co jest na planszy.   */

/* Biały Len — koperta unosi się i rozpływa, jakby ją ktoś podniósł. */


/* Czerń i Biel — koperta zbliża się do widza i wychodzi poza kadr;
   fotograficzny motyw, więc ruch jak najazd obiektywu. */
body[data-theme="mono-ink"] .plate-reveal.opening .plate-key {
  transform: scale(1.55); opacity: 0;
}
body[data-theme="mono-ink"] .plate-reveal.opening .plate-layer:not(.plate-key) {
  transform: scale(1.08);
}

/* Zielona Oliwka — koperta otwiera się do tyłu na dolnej krawędzi,
   tak jak otwiera się prawdziwa koperta z kwiatami w środku. */
body[data-theme="olive-green"] .plate-reveal.opening .plate-key {
  transform-origin: 50% 100%;
  transform: perspective(900px) rotateX(78deg); opacity: 0;
}

/* Złoty Liść — atłasowa draperia idzie w górę jak welon. */
body[data-theme="gold-leaf"] .plate-reveal.opening .plate-layer {
  transform: translateY(-42%); opacity: 0;
}
body[data-theme="gold-leaf"] .plate-reveal.opening .plate-key {
  transform: translateY(-16%) scale(1.05); opacity: 0;
}

/* Fioletowa Wisteria — pieczęć pęka i koperta odchyla się od rogu. */
body[data-theme="violet-dusk"] .plate-reveal.opening .plate-key {
  transform-origin: 0% 0%;
  transform: perspective(1100px) rotate(-7deg) translate(-16%, 10%); opacity: 0;
}

/* Włoski Len — lniana karta unosi się ku widzowi i jaśnieje. */
body[data-theme="italian-linen"] .plate-reveal.opening .plate-key {
  transform: translateY(-8%) scale(1.28); opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .plate-reveal.opening,
  .plate-reveal.opening .plate-layer { transition-duration: 0.01ms !important; }
  .plate-cta { animation: none; }
}

/* Nakładki dekoracyjne (malowane karty miejsca, pocztówka historii) leżą
   na CAŁEJ sekcji (`inset: 0`) i są pozycjonowane, więc malują się nad
   treścią nieustawioną w kontekście układania — i przechwytywały
   kliknięcia. Przycisk „Dojazd" pod kartami lokalizacji był martwy:
   kursor trafiał w przezroczysty obszar nakładki. Oba kontenery mają
   `aria-hidden="true"`, więc nic w nich nie jest interaktywne; wyjątkiem
   są zdjęcia pary w pocztówce, które para może podmienić — te dostają
   `pointer-events: auto` z powrotem (reguła w motywie). */
.rg-loc-cards, .rg-postcard { pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   Bazowy blok treści ekranu — wspólny dla wszystkich motywów.
   Motyw może go zawęzić własną regułą (patrz theme-*.css); ta
   jest punktem wyjścia, gdy motyw nic nie narzuca.
   Wcześniej leżała w theme-rose-garden.css bez zakresu.
   ══════════════════════════════════════════════════════════════ */
.rg-inner {
  position: relative;
  z-index: 2;
  width: min(84%, 520px);
  margin: 0 auto;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   KARTY MOTYWÓW W NAGŁÓWKU
   Zastąpiły trzy zmyślone zaproszenia. Pokazują dokładnie te plansze,
   które para zobaczy w galerii — nagłówek przestał obiecywać coś,
   czego w produkcie nie ma.

   Plansze mają proporcję 3:5 (900 × 1500), a stare karty 5:7. Przy tej
   samej szerokości karta 3:5 jest o 75 px wyższa, więc zwężamy ją, żeby
   stos zmieścił się w tym samym miejscu układu.
   ══════════════════════════════════════════════════════════════════ */
.stack-card--plate {
  width: 252px;
  aspect-ratio: 3 / 5;
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
}
/* templateHero zwraca <svg>, nie <img> — kadrowanie robi
   preserveAspectRatio="… slice" wewnątrz, więc tutaj wystarczy
   rozciągnąć pojemnik na całą kartę. */
.stack-card--plate .sc-plate {
  width: 100%; height: 100%;
  display: block;
}
.stack-card--plate .sc-plate svg,
.stack-card--plate .sc-plate img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: center;
}

/* Podpis wjeżdża od dołu — na karcie centralnej od razu, na bocznych
   dopiero pod kursorem, żeby nie rozpraszał od tej wybranej. */
.stack-card--plate .sc-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 16px 14px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(to top, rgba(20,14,8,0.62), rgba(20,14,8,0));
  color: #FFFFFF;
  opacity: 0; translate: 0 8px;
  transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stack-card--plate.stack-card--center .sc-label,
.stack-card--plate:hover .sc-label,
.stack-card--plate:focus-visible .sc-label { opacity: 1; translate: 0 0; }

.stack-card--plate .sc-name {
  font-family: var(--serif-display);
  font-size: 19px; line-height: 1.15;
}
.stack-card--plate .sc-tag {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.82;
}
/* Odnośnik jest tylko nośnikiem adresu — klik obsługuje cała karta,
   więc trzymamy go poza układem i poza kolejnością tabulacji. */
.stack-card--plate .sc-go {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
@media (max-width: 900px) {
  .stack-card--plate { width: 208px; }
  .stack-card--plate .sc-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-card--plate .sc-label { transition: none; }
}


/* ============================================================
   AUTOMATYCZNA KALIBRACJA POD TELEFON
   ------------------------------------------------------------
   Jeden blok, który pilnuje, żeby KAŻDA podstrona mieściła się
   w ekranie telefonu — także te dodane w przyszłości.
   Wszystko jest zamknięte w media query, więc widok na desktopie
   pozostaje bez zmian.
   ============================================================ */

@media (max-width: 968px) {

  /* 1. Bezpiecznik: nic nie wypycha strony w bok */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* 2. NAJWAŻNIEJSZE: element siatki/flexa ma domyślnie min-width:auto,
        przez co szeroka zawartość (tabela, długi tekst) rozpycha cały
        układ. Zerujemy to. Specyficzność (0,0,2) jest niższa niż
        jakakolwiek reguła klasowa, więc celowe min-width w projekcie
        nadal działają. */
  body * { min-width: 0; }

  /* 3. Media nigdy szersze niż ekran */
  img, svg, video, canvas, iframe, picture { max-width: 100%; height: auto; }
  svg { max-width: 100%; }

  /* 4. Długie słowa / adresy URL łamią się zamiast rozpychać */
  p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, a, span, div, label, figcaption {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* 5. Przyciski mogą się zawijać zamiast wystawać poza ekran */
  .btn, .btn-pill, .btn-outline, button {
    max-width: 100%;
    white-space: normal;
  }

  /* 6. Szerokie tabele → poziome przewijanie w ramce
        (.table-scroll dokłada automatycznie JS) */
  .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-card, 10px);
  }
  .table-scroll > table { min-width: 560px; }

  /* 7. Panel: kolumna nie może rosnąć ponad ekran */
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-side, .dash-main { max-width: 100%; }

  /* 8. Siatki wielokolumnowe schodzą do jednej kolumny */
  .auth-layout, .hero-grid, .split-grid, .two-col {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 9. Kontener ZAWSZE zachowuje boczny oddech.
        Blok jest na końcu pliku, więc wygrywa z regułami w rodzaju
        `.login-required { padding: 96px 0 }`, które gubiły margines
        i dociskały treść do krawędzi ekranu. */
  .container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 968px) {
  /* 11. Link powrotny na stronach logowania/rejestracji jest przyklejony
        (position: fixed) i przy przewijaniu nachodził na nagłówek karty.
        Na telefonie ma przewijać się razem z treścią.
        Selektor a.back-home ma wyższą specyficzność niż .back-home
        z <style> w tych stronach, więc wygrywa mimo kolejności. */
  a.back-home { position: absolute; }
}

@media (max-width: 560px) {
  /* 10. Rzędy z dwoma przyciskami zawijają się zamiast ściskać tekst */
  *:has(> .btn + .btn) { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 560px) {
  /* Na wąskich telefonach kafelki statystyk czytelniejsze pojedynczo */
  .stat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare-grid, .price-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Wspólna ramka trzech warstw koperty w odsłonie `plateFlap`.
   Ma wymiar całego płótna, więc `transform-origin` w procentach
   znaczy w niej to samo co na planszy zaproszenia — dzięki temu
   odsłona może powtórzyć dryf tamtej warstwy obrotem wokół JEJ
   środka, a nie środka każdego kawałka z osobna. */
.plate-koperta { position: absolute; inset: 0; }

/* Skrzydła odsłony (`parts.plateSkrzydla`) — po jednej ramce na klapę
   koperty, każda o wymiarze płótna. Obrys klapy i oś obrotu ustawia
   CSS motywu, bo linie złożenia są inne w każdym projekcie. */
.plate-skrz { position: absolute; inset: 0; backface-visibility: visible; }

/* ════════════════════════════════════════════════════════════
   OKIENKO „KTO ODPOWIADA" (RSVP) + EKRAN BŁĘDU ZAPROSZENIA
   ------------------------------------------------------------
   Oba komponenty są wspólne dla wszystkich 12 motywów, dlatego
   mieszkają tutaj, a nie w pliku motywu. Nie wchodzą w żaden układ
   planszy — to nakładki nad całą stroną.
   ════════════════════════════════════════════════════════════ */
.rsvp-kto {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(31, 30, 26, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rsvp-kto[hidden] { display: none; }

.rsvp-kto-karta {
  width: 100%;
  max-width: 420px;
  background: var(--cream, #FAF6EE);
  color: var(--ink, #1F1E1A);
  border-radius: 18px;
  padding: clamp(22px, 5vw, 32px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
}
.rsvp-kto-karta h3 {
  margin: 0 0 6px;
  font-family: var(--serif-display, Georgia, serif);
  font-size: clamp(20px, 5vw, 25px);
  font-weight: 400;
}
.rsvp-kto-lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft, #6B675E);
}
.rsvp-kto-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft, #6B675E);
}
.rsvp-kto-label span {
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
}
.rsvp-kto-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink, #1F1E1A);
  background: #fff;
  border: 1px solid var(--line, rgba(31, 30, 26, 0.14));
  border-radius: 10px;
}
.rsvp-kto-input:focus-visible {
  outline: 2px solid var(--sage-deep, #6E8270);
  outline-offset: 1px;
}
.rsvp-kto-blad {
  margin: 12px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  color: #B3261E;
}
.rsvp-kto-akcje {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.rsvp-kto-ok,
.rsvp-kto-anuluj {
  flex: 1 1 auto;
  padding: 13px 16px;
  font: inherit;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line, rgba(31, 30, 26, 0.14));
}
.rsvp-kto-anuluj {
  flex: 0 1 34%;
  background: transparent;
  color: var(--ink-soft, #6B675E);
}
.rsvp-kto-ok {
  background: var(--sage-deep, #6E8270);
  border-color: var(--sage-deep, #6E8270);
  color: var(--cream, #FAF6EE);
}
.rsvp-kto-rodo {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft, #6B675E);
}
.rsvp-kto-rodo a { color: inherit; }
/* v348: wybór osoby towarzyszącej i menu — dwa duże przyciski w rzędzie. */
.rsvp-kto-wybor { display: flex; gap: 8px; }
.rsvp-kto-wybor label {
  flex: 1 1 0; position: relative; cursor: pointer;
}
.rsvp-kto-wybor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rsvp-kto-wybor span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 10px 12px; box-sizing: border-box;
  font-size: 14px; line-height: 1.25;
  background: #fff; color: var(--ink, #1F1E1A);
  border: 1px solid var(--line, rgba(31, 30, 26, 0.14)); border-radius: 12px;
  transition: background .15s, border-color .15s, color .15s;
}
.rsvp-kto-wybor input:checked + span {
  background: var(--sage-deep, #6E8270); border-color: var(--sage-deep, #6E8270); color: var(--cream, #FAF6EE);
}
.rsvp-kto-wybor input:focus-visible + span { outline: 2px solid var(--sage-deep, #6E8270); outline-offset: 2px; }
#rsvpKto [hidden] { display: none !important; }
.rsvp-kto-anuluj { flex: 0 0 auto; white-space: nowrap; padding-left: 18px; padding-right: 18px; }
.rsvp-kto-ok { flex: 1 1 auto; white-space: nowrap; }

/* Ekran zastępujący zaproszenie, gdy link jest nieprawidłowy. */
.zap-blad {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--cream, #FAF6EE);
  text-align: center;
}
.zap-blad[hidden] { display: none; }
.zap-blad-karta { max-width: 420px; }
.zap-blad-znak {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 18px;
  color: var(--rose-deep, #C58B84);
}
.zap-blad-karta h1 {
  margin: 0 0 10px;
  font-family: var(--serif-display, Georgia, serif);
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 400;
}
.zap-blad-karta p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft, #6B675E);
}
.zap-blad-cta {
  display: inline-block;
  padding: 12px 22px;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink, #1F1E1A);
  border: 1px solid var(--line, rgba(31, 30, 26, 0.14));
}

/* ════════════════════════════════════════════════════════════
   BRAMKA LOGOWANIA
   ------------------------------------------------------------
   Panel pary i kreator stały otwarte dla każdego, kto znał adres —
   a panel pokazuje listę gości z e-mailami i plan stołów. Do czasu
   potwierdzenia sesji zawartość jest niewidoczna. Zasada: najpierw
   sprawdzamy, potem pokazujemy.
   ════════════════════════════════════════════════════════════ */
html.czeka-na-sesje body { visibility: hidden; }
html.czeka-na-sesje::after {
  content: "Sprawdzamy, czy jesteś zalogowany…";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: var(--cream, #FAF6EE);
  color: var(--ink-soft, #6B675E);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: no-preference) {
  html.czeka-na-sesje::after { animation: brama-puls 1.4s ease-in-out infinite; }
}
@keyframes brama-puls { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Sekcja płatna w panelu: widoczna jako podgląd, ale bez możliwości
   zmian. Wcześniej banner „odblokuj plan" wisiał nad w pełni działającym
   narzędziem, więc plan stołów, budżet i lista kontrolna były darmowe. */
.sekcja-podglad > *:not(.upgrade-banner) {
  pointer-events: none;
  user-select: none;
}
.sekcja-podglad [draggable="true"] { cursor: default; }

/* Strony powrotu z bramki płatności (Stripe). */
.platnosc-ekran {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
}
.platnosc-karta { max-width: 460px; }
.platnosc-znak {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 20px;
  color: var(--rose-deep, #B07A70);
}
.platnosc-karta h1 {
  font-family: var(--serif-display, Georgia, serif);
  font-size: clamp(24px, 6vw, 32px);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 12px;
}
.platnosc-karta p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft, #6B675E);
  margin-bottom: 26px;
}
.platnosc-linki { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.platnosc-linki[hidden] { display: none; }


/* v354: imienne zaproszenie — karta nad wezwaniem „Dotknij, aby otworzyć”
   (pozycję ustawia pages/zaproszenie.html, pokazDedykacje). */
.dla-goscia {
  position: fixed; z-index: 2147482000; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: min(86vw, 420px); padding: 10px 24px 12px;
  background: rgba(255, 252, 247, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(156, 122, 80, 0.35); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(40, 28, 16, 0.18);
  text-align: center; pointer-events: none;
  animation: dla-goscia-wejscie 0.7s ease both 0.25s;
  transition: opacity 0.5s ease;
}
.dla-goscia[hidden] { display: none; }
.dla-goscia.znika { opacity: 0; }
.dla-goscia .dla-l {
  font: 600 10px/1.2 var(--sans, 'Poppins', sans-serif);
  letter-spacing: 0.24em; text-transform: uppercase; color: #8A6B45;
}
.dla-goscia .dla-n {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic; font-size: clamp(19px, 5.4vw, 26px); line-height: 1.2;
  color: #2A2018; overflow-wrap: anywhere;
}
@keyframes dla-goscia-wejscie { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .dla-goscia { animation: none; } }
/* v355: gość już odpowiedział — stan na karcie „Zaproszenie dla…”. */
.dla-goscia .dla-s {
  margin-top: 4px; padding: 3px 12px; border-radius: 999px;
  font: 500 12px/1.4 var(--sans, 'Poppins', sans-serif); letter-spacing: 0.02em;
  color: #3F5A2E; background: rgba(110, 140, 80, 0.14);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.dla-goscia .dla-s.nie { color: #6B5A48; background: rgba(120, 100, 80, 0.12); }
.dla-goscia .dla-s[hidden] { display: none; }