*{box-sizing:border-box}
:root{
  --gold:#b98527;
  --gold2:#d8ae5b;
  --gold-soft:#ead3a0;
  --ink:#2c2823;
  --paper:#fffdfa;
  --cream:#fbf5e8;
  --line:#ead9b8;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  background:var(--paper);
  color:var(--ink);
  font-family:Montserrat,Arial,sans-serif;
  overflow-x:hidden;
}
[hidden]{display:none!important}
.gold-line{height:5px;background:linear-gradient(90deg,#9e6d18,#dfb85f,#9e6d18)}
main{width:100%;max-width:none;margin:0}

/* HERO */
.hero{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:650px;
  text-align:center;
  padding:46px 24px 76px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 20%,#fff 0 18%,rgba(255,255,255,.93) 32%,transparent 62%),
    linear-gradient(90deg,#fbf0db 0%,#fffdfa 19%,#fff 50%,#fffdfa 81%,#fbf0db 100%);
}
.sparkles{
  position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.52;
  background-image:
    radial-gradient(circle,rgba(210,161,65,.55) 0 1.3px,transparent 1.8px),
    radial-gradient(circle,rgba(255,255,255,.98) 0 1.7px,transparent 2.2px);
  background-size:210px 180px,170px 155px;
  background-position:0 15px,60px 80px;
}
.decor{
  position:absolute;
  top:30px;
  width:285px;height:410px;
  z-index:-1;
  opacity:.48;
  pointer-events:none;
}
.decor-left{left:-45px}
.decor-right{right:-45px;transform:scaleX(-1)}
.decor::before{
  content:"";
  position:absolute;
  left:60px;top:0;
  width:155px;height:330px;
  border:2px solid rgba(190,139,43,.62);
  border-left:0;border-bottom:0;
  border-radius:0 95% 0 0;
  transform:rotate(-18deg);
}
.decor::after{
  content:"";
  position:absolute;
  left:32px;top:75px;
  width:210px;height:275px;
  background:
    radial-gradient(ellipse at 30% 18%,rgba(215,178,108,.65) 0 16px,transparent 17px),
    radial-gradient(ellipse at 48% 31%,rgba(215,178,108,.53) 0 18px,transparent 19px),
    radial-gradient(ellipse at 26% 47%,rgba(215,178,108,.43) 0 22px,transparent 23px),
    radial-gradient(ellipse at 58% 57%,rgba(215,178,108,.45) 0 20px,transparent 21px),
    radial-gradient(ellipse at 38% 76%,rgba(215,178,108,.38) 0 24px,transparent 25px);
  transform:rotate(-17deg);
}

/* Obrączki idealnie wycentrowane */
.rings{
  position:relative;
  width:94px;
  height:70px;
  margin:0 auto 12px;
}
.ring{
  position:absolute;
  top:23px;
  width:42px;
  height:42px;
  border:3px solid var(--gold);
  border-radius:50%;
}
.ring-left{left:15px}
.ring-right{right:15px}
.rings b{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  color:#c69434;
  font:16px Georgia,serif;
}

.eyebrow{
  margin:5px 0 17px;
  color:#b78227;
  font-size:13px;
  font-weight:500;
  letter-spacing:3.4px;
}
.hero h1{
  margin:0;
  color:#a97720;
  font:600 clamp(58px,5.2vw,88px)/.98 "Cormorant Garamond",serif;
  letter-spacing:2px;
}
.hero h1 span{font-size:.76em;font-weight:400}
.ornament{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 9px}
.ornament i{display:block;width:62px;border-top:1px solid var(--gold2)}
.ornament b{color:var(--gold2);font-size:16px}
.script{margin:0;color:#b48229;font:28px Parisienne,cursive}
.hero-script{font-size:30px}

/* Upload */
.upload-intro{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  max-width:700px;
  margin:45px auto 20px;
  text-align:left;
}
.camera{
  flex:0 0 88px;
  width:88px;height:88px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#f7f0e3;
  color:var(--gold);
  font:52px Georgia,serif;
}
.upload-intro h2{
  margin:0 0 5px;
  font:600 30px "Cormorant Garamond",serif;
}
.upload-intro p{
  max-width:540px;
  margin:0;
  font-size:14px;
  line-height:1.75;
}
.upload-button{
  display:inline-flex;
  min-width:295px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:17px 31px;
  border-radius:7px;
  background:linear-gradient(180deg,#d9ad57,#bd8827);
  box-shadow:0 8px 20px rgba(158,111,26,.22);
  color:#fff;
  font-size:15px;
  font-weight:600;
  letter-spacing:1px;
  cursor:pointer;
  transition:.22s ease;
}
.upload-button span{font-size:25px;line-height:0}
.upload-button:hover{transform:translateY(-2px);box-shadow:0 11px 26px rgba(158,111,26,.3)}
.privacy{margin:13px 0 0;color:#af7c25;font-size:12px}
.status{min-height:18px;margin-top:4px;color:#9d7227;font-size:12px}

/* Fala */
.wave-separator{
  position:relative;
  z-index:3;
  height:44px;
  margin-top:-29px;
  overflow:hidden;
}
.wave-separator span{
  position:absolute;
  left:-3%;
  width:106%;
  height:58px;
  border-radius:50%;
  background:var(--paper);
  border-top:2px solid #d8a94d;
}
.wave-separator span:first-child{top:13px}
.wave-separator span:last-child{top:19px;border-top-width:1px;opacity:.48}

/* Galeria */
.gallery-section{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:20px 0 50px;
}
.section-title{text-align:center;margin-bottom:25px}
.section-title>div{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:17px;
  color:#a97720;
  font:31px "Cormorant Garamond",serif;
  letter-spacing:1px;
}
.section-title i{width:65px;border-top:1px solid #d4ac60}
.section-title .script{margin-top:0;font-size:27px}
.tabs{
  display:flex;
  max-width:760px;
  height:42px;
  margin:0 auto 25px;
  overflow:hidden;
  border:1px solid #dbbd80;
  border-radius:8px;
  background:#fff;
}
.tabs button{
  flex:1;
  border:0;
  background:#fff;
  color:#a87926;
  font:500 11px Montserrat;
  cursor:pointer;
  transition:.2s ease;
}
.tabs button+button{border-left:1px solid #e5d2ac}
.tabs button.active{background:#d5a84e;color:#fff}
.tabs button:hover:not(.active){background:#fbf5e8}
.gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.card{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:9px;
  background:#f2ecdf;
  box-shadow:0 4px 14px rgba(65,47,18,.08);
  cursor:pointer;
  transition:.28s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 13px 28px rgba(65,47,18,.15)}
.card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover img{transform:scale(1.05)}
.like{
  position:absolute;right:9px;bottom:9px;
  border:0;border-radius:20px;
  padding:6px 9px;
  background:rgba(255,255,255,.92);
  color:#a37629;
  font:500 11px Montserrat;
  cursor:pointer;
}
.like.liked{background:#d5a84e;color:#fff}
.empty{text-align:center;color:#9a8460;font-size:13px;margin:37px 0 20px}
.load-more{
  display:block;
  margin:20px auto 0;
  padding:10px 20px;
  border:1px solid #d9bc81;
  border-radius:7px;
  background:#fff;
  color:#a77825;
  font:500 11px Montserrat;
  cursor:pointer;
}

/* Instrukcja */
.how{
  width:min(1120px,calc(100% - 48px));
  margin:5px auto 34px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.58);
  padding:20px 16px;
}
.step{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 22px;
}
.step+.step{border-left:1px solid var(--line)}
.step>b{
  align-self:flex-start;
  flex:0 0 27px;
  width:27px;height:27px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#d0a147;color:#fff;font-size:12px;
}
.step-icon{
  flex:0 0 40px;
  min-width:40px;
  text-align:center;
  color:#c99434;
  font:37px Georgia,serif;
}
.step strong{color:#ae7c26;font-size:11px;letter-spacing:.2px}
.step p{margin:6px 0 0;color:#5d574f;font-size:10.5px;line-height:1.6}
footer{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
  padding:0 20px 22px;
  text-align:center;
  border-bottom:4px solid var(--gold);
}
footer .script{font-size:26px}
footer span{color:#d3a349;font-size:19px}

/* Lightbox */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:50;
  place-items:center;
  padding:30px;
  background:rgba(0,0,0,.82);
}
.lightbox.show{display:grid}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:8px;object-fit:contain}
.lightbox button{
  position:fixed;right:20px;top:11px;
  border:0;background:none;color:#fff;
  font-size:42px;cursor:pointer;
}

/* Animacje */
@media (prefers-reduced-motion:no-preference){
  .rings{animation:float 4.5s ease-in-out infinite}
  .ornament b,footer>span{animation:pulse 2.6s ease-in-out infinite}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
  .reveal.visible{opacity:1;transform:none}
  .card{animation:photoIn .45s ease both}
  @keyframes float{50%{transform:translateY(-5px)}}
  @keyframes pulse{50%{transform:scale(1.12)}}
  @keyframes photoIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* Tablet */
@media(max-width:850px){
  .hero{min-height:auto;padding:36px 20px 64px}
  .decor{display:none}
  .hero h1{font-size:54px}
  .upload-intro{max-width:620px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gallery-section,.how,footer{width:calc(100% - 28px)}
  .how{grid-template-columns:1fr;padding:8px 14px}
  .step{padding:16px 8px}
  .step+.step{border-left:0;border-top:1px solid var(--line)}
}

/* Telefon */
@media(max-width:520px){
  .hero{padding:29px 16px 54px}
  .rings{transform:scale(.9);margin-bottom:4px}
  .eyebrow{font-size:10px;letter-spacing:2.2px}
  .hero h1{font-size:42px;letter-spacing:.5px}
  .hero-script{font-size:24px}
  .ornament{margin-top:13px}
  .upload-intro{gap:13px;margin-top:34px;align-items:flex-start}
  .camera{flex-basis:62px;width:62px;height:62px;font-size:37px}
  .upload-intro h2{font-size:24px}
  .upload-intro p{font-size:12px;line-height:1.55}
  .upload-button{width:100%;max-width:310px;min-width:0}
  .wave-separator{height:30px;margin-top:-20px}
  .wave-separator span{height:42px}
  .section-title>div{font-size:26px}
  .section-title i{width:34px}
  .section-title .script{font-size:23px}
  .tabs button{font-size:9px}
  .gallery-section{padding-top:14px}
  footer .script{font-size:22px}
}
/* DODAJ NA KOŃCU styles.css — nawigacja między zdjęciami */
body.lightbox-open{overflow:hidden}

.lightbox-nav{
  position:absolute;
  top:50%;
  z-index:55;
  width:56px;
  height:56px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  background:rgba(25,22,18,.42);
  backdrop-filter:blur(5px);
  color:#fff;
  font:300 46px/1 Georgia,serif;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.lightbox-prev{left:22px}
.lightbox-next{right:22px}

.lightbox-nav:hover{
  background:rgba(185,133,39,.82);
  transform:translateY(-50%) scale(1.05);
}

.lightbox-counter{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:55;
  transform:translateX(-50%);
  padding:6px 12px;
  border-radius:18px;
  background:rgba(20,18,15,.48);
  color:#fff;
  font:500 12px Montserrat,Arial,sans-serif;
  letter-spacing:.5px;
  backdrop-filter:blur(5px);
}

@media(max-width:700px){
  .lightbox{padding:18px 8px 60px}
  .lightbox img{max-width:100%;max-height:82vh}
  .lightbox-nav{
    width:46px;
    height:46px;
    font-size:39px;
    background:rgba(25,22,18,.48);
  }
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .lightbox-counter{bottom:12px}
}

@media(prefers-reduced-motion:reduce){
  .lightbox-nav{transition:none}
}
.lightbox .lightbox-nav {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 56px;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;

  background: rgba(20,20,20,.55);
  color: white;

  font-size: 46px;
  line-height: 1;

  cursor: pointer;
  z-index: 9999;
  transition: background .2s ease;
}

.lightbox .lightbox-prev {
  left: 25px !important;
  right: auto !important;
}

.lightbox .lightbox-next {
  right: 25px !important;
  left: auto !important;
}


/* X zostaje w prawym górnym rogu */
.lightbox #close {
  position: fixed !important;
  top: 15px !important;
  right: 20px !important;
  left: auto !important;
  transform: none !important;
}


/* TELEFON */
@media (max-width: 700px) {

  .lightbox .lightbox-nav {
    width: 46px;
    height: 46px;
    font-size: 38px;
  }

  .lightbox .lightbox-prev {
    left: 8px !important;
  }

  .lightbox .lightbox-next {
    right: 8px !important;
  }
}

/* ===== IDEALNIE WYŚRODKOWANE STRZAŁKI ===== */

.lightbox .lightbox-nav {
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Rysujemy strzałkę */
.lightbox .lightbox-nav::after {
  content: "";
  display: block;

  width: 12px;
  height: 12px;

  border-top: 3px solid white;
  border-right: 3px solid white;
}

/* ← LEWA */
.lightbox .lightbox-prev::after {
  transform: rotate(-135deg);
  margin-left: 5px;
}

/* → PRAWA */
.lightbox .lightbox-next::after {
  transform: rotate(45deg);
  margin-right: 5px;
}

/* Na telefonie ukrywamy przyciski strzałek */
@media (max-width: 700px) {
  .lightbox .lightbox-nav {
    display: none !important;
  }
}
/* Większe serce nad obrączkami */
.rings b {
  font-size: 26px !important;
  top: -5px !important;
}